From 5cde16d777d1b7962b06d49cd97862b0247ba5d6 Mon Sep 17 00:00:00 2001
From: Marley <marleyrae1997@gmail.com>
Date: Thu, 13 Jul 2023 21:44:04 -0700
Subject: [PATCH] Create dropdown component;

---
 frontend/components/Dropdown.vue    | 56 +++++++++++++++++++++++++++++
 frontend/components/Table/index.vue |  8 +++--
 frontend/pages/medias/index.vue     |  9 +++--
 3 files changed, 68 insertions(+), 5 deletions(-)
 create mode 100644 frontend/components/Dropdown.vue

diff --git a/frontend/components/Dropdown.vue b/frontend/components/Dropdown.vue
new file mode 100644
index 0000000..6e2fd2a
--- /dev/null
+++ b/frontend/components/Dropdown.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+defineProps<{
+  options: { id: number, name: string }[] | string[]
+}>()
+
+const emit = defineEmits<{
+  select: [item: string | number]
+}>()
+
+const open = ref(false)
+
+const select = function (item) {
+  emit('select', typeof item === 'object' ? item.id : item)
+}
+</script>
+
+<template>
+  <div>
+    <PrimaryButton @click="open = !open">
+      <slot /> &downarrow;
+    </PrimaryButton>
+
+    <ul v-show="open" v-bind="$attrs">
+      <li v-for="(item, index) in options" :key="index" @click="select(item)">
+        <template v-if="typeof item === 'object'">
+          {{ item.name }}
+        </template>
+
+        <template v-else>
+          {{ item }}
+        </template>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+div {
+  @apply w-max inline-block relative;
+}
+
+ul {
+  @apply absolute z-10 mt-3;
+  @apply rounded-xl;
+  @apply border-pink-400 border-2;
+  @apply bg-gradient-to-br from-pink-400 via-fuchsia-300 to-cyan-400 bg-fixed;
+
+  li {
+    @apply bg-white bg-opacity-30;
+    @apply w-full px-5 py-1.5;
+    @apply first:rounded-t-xl last:rounded-b-xl;
+    @apply transition-colors duration-200 hover:text-pink-500;
+    @apply cursor-pointer;
+  }
+}
+</style>
diff --git a/frontend/components/Table/index.vue b/frontend/components/Table/index.vue
index 813ad4c..63264e2 100644
--- a/frontend/components/Table/index.vue
+++ b/frontend/components/Table/index.vue
@@ -3,7 +3,9 @@
 </script>
 
 <template>
-  <table><slot /></table>
+  <table>
+    <slot />
+  </table>
 </template>
 
 <style lang="postcss">
@@ -14,10 +16,10 @@ table {
 .actions {
   @apply text-end;
 
-  a {
+  & > * {
     @apply me-3;
 
-    @apply last-of-type:me-0;
+    @apply last:me-0;
   }
 }
 </style>
diff --git a/frontend/pages/medias/index.vue b/frontend/pages/medias/index.vue
index 0710424..808850a 100644
--- a/frontend/pages/medias/index.vue
+++ b/frontend/pages/medias/index.vue
@@ -15,6 +15,7 @@ const mediaList = computed(() => {
           <TableTh>Copies</TableTh>
           <TableTh>Checked Out</TableTh>
           <TableTh actions>
+            <Dropdown :options="['books', 'films', 'albums']">Type</Dropdown>
             <PrimaryButton>Add New</PrimaryButton>
           </TableTh>
         </tr>
@@ -31,7 +32,9 @@ const mediaList = computed(() => {
 
           <TableTd>
             <div>{{ media.checkedOut }}</div>
-            <SecondaryInfo>{{ media.holds.length }} on hold</SecondaryInfo>
+            <SecondaryInfo v-if="media.holds.length > 0">
+              {{ media.holds.length }} on hold
+            </SecondaryInfo>
           </TableTd>
 
           <TableTd actions>
@@ -46,5 +49,7 @@ const mediaList = computed(() => {
 </template>
 
 <style scoped lang="postcss">
-
+section {
+  @apply w-full px-10;
+}
 </style>