feat(frontend): implement item components with variants and slots

Author: Lasim

services/frontend/src/components/ui/card/Card.vue

@@ -1,21 +1,38 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
+import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+const cardVariants = cva(
+  'text-card-foreground flex flex-col gap-6 rounded-xl border py-6',
+  {
+    variants: {
+      variant: {
+        default: 'bg-card',
+        gray: 'bg-stone-200',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+)
+
+const props = withDefaults(
+  defineProps<{
+    variant?: VariantProps<typeof cardVariants>['variant']
+    class?: HTMLAttributes['class']
+  }>(),
+  {
+    variant: 'default',
+  }
+)
 </script>
 
 <template>
   <div
     data-slot="card"
-    :class="
-      cn(
-        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6',
-        props.class,
-      )
-    "
+    :class="cn(cardVariants({ variant }), props.class)"
   >
     <slot />
   </div>

services/frontend/src/components/ui/item/Item.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ItemVariants } from "."
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { itemVariants } from "."
+
+const props = withDefaults(defineProps<PrimitiveProps & {
+  class?: HTMLAttributes["class"]
+  variant?: ItemVariants["variant"]
+  size?: ItemVariants["size"]
+}>(), {
+  as: "div",
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="item"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(itemVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

services/frontend/src/components/ui/item/ItemActions.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="item-actions"
+    :class="cn('flex items-center gap-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>

services/frontend/src/components/ui/item/ItemContent.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="item-content"
+    :class="cn('flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none', props.class)"
+  >
+    <slot />
+  </div>
+</template>

services/frontend/src/components/ui/item/ItemDescription.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <p
+    data-slot="item-description"
+    :class="cn(
+      'text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance',
+      '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+      props.class,
+    )"
+  >
+    <slot />
+  </p>
+</template>

services/frontend/src/components/ui/item/ItemFooter.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="item-footer"
+    :class="cn('flex basis-full items-center justify-between gap-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>

services/frontend/src/components/ui/item/ItemGroup.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    role="list"
+    data-slot="item-group"
+    :class="cn('group/item-group flex flex-col', props.class)"
+  >
+    <slot />
+  </div>
+</template>

services/frontend/src/components/ui/item/ItemHeader.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="item-header"
+    :class="cn('flex basis-full items-center justify-between gap-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>

services/frontend/src/components/ui/item/ItemMedia.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { ItemMediaVariants } from "."
+import { cn } from "@/lib/utils"
+import { itemMediaVariants } from "."
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  variant?: ItemMediaVariants["variant"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="item-media"
+    :data-variant="props.variant"
+    :class="cn(itemMediaVariants({ variant }), props.class)"
+  >
+    <slot />
+  </div>
+</template>

services/frontend/src/components/ui/item/ItemSeparator.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { SeparatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import { Separator } from '@/components/ui/separator'
+
+const props = defineProps<
+  SeparatorProps & { class?: HTMLAttributes["class"] }
+>()
+</script>
+
+<template>
+  <Separator
+    data-slot="item-separator"
+    orientation="horizontal"
+    :class="cn('my-0', props.class)"
+  />
+</template>