feat: team card

Signed-off-by: ZTL-UwU <[email protected]>

components/content/TeamCard.vue

@@ -0,0 +1,38 @@
+<template>
+  <UiCard>
+    <UiCardHeader>
+      <div class="flex flex-col gap-3" :class="{ 'text-center': center }">
+        <UiAvatar :class="{ 'mx-auto': center }">
+          <UiAvatarImage :src="avatar" :alt="name" />
+        </UiAvatar>
+        <div>
+          <div class="text-lg font-bold">
+            {{ name }}
+          </div>
+          <div class="text-sm text-muted-foreground">
+            {{ title }}
+          </div>
+        </div>
+        <div class="flex gap-3 text-secondary-foreground" :class="{ 'mx-auto': center }">
+          <NuxtLink v-for="link in links" :key="link.to" :to="link.to">
+            <SmartIcon :name="link.icon" />
+          </NuxtLink>
+        </div>
+      </div>
+    </UiCardHeader>
+  </UiCard>
+</template>
+
+<script setup lang="ts">
+const { center = true } = defineProps<{
+  avatar: string;
+  name: string;
+  title?: string;
+  links?: ({
+    icon: string;
+    to: string;
+    target?: Target;
+  })[];
+  center?: boolean;
+}>();
+</script>

components/content/TeamCardGroup.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="grid grid-cols-[repeat(auto-fit,_minmax(270px,_1fr))] gap-6">
+    <slot />
+  </div>
+</template>

components/ui/avatar/Avatar.vue

@@ -0,0 +1,21 @@
+<template>
+  <AvatarRoot :class="cn(avatarVariant({ size, shape }), props.class)">
+    <slot />
+  </AvatarRoot>
+</template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+import { AvatarRoot } from 'radix-vue';
+import { avatarVariant, type AvatarVariants } from '.';
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes['class'];
+  size?: AvatarVariants['size'];
+  shape?: AvatarVariants['shape'];
+}>(), {
+  size: 'sm',
+  shape: 'circle',
+});
+</script>

components/ui/avatar/AvatarFallback.vue

@@ -0,0 +1,11 @@
+<template>
+  <AvatarFallback v-bind="props">
+    <slot />
+  </AvatarFallback>
+</template>
+
+<script setup lang="ts">
+import { AvatarFallback, type AvatarFallbackProps } from 'radix-vue';
+
+const props = defineProps<AvatarFallbackProps>();
+</script>

components/ui/avatar/AvatarImage.vue

@@ -0,0 +1,9 @@
+<template>
+  <AvatarImage v-bind="props" class="size-full object-cover" />
+</template>
+
+<script setup lang="ts">
+import { AvatarImage, type AvatarImageProps } from 'radix-vue';
+
+const props = defineProps<AvatarImageProps>();
+</script>

components/ui/avatar/index.ts

@@ -0,0 +1,24 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+export { default as Avatar } from './Avatar.vue';
+export { default as AvatarFallback } from './AvatarFallback.vue';
+export { default as AvatarImage } from './AvatarImage.vue';
+
+export const avatarVariant = cva(
+  'inline-flex shrink-0 select-none items-center justify-center overflow-hidden bg-secondary font-normal text-foreground',
+  {
+    variants: {
+      size: {
+        sm: 'size-10 text-xs',
+        base: 'size-16 text-2xl',
+        lg: 'size-32 text-5xl',
+      },
+      shape: {
+        circle: 'rounded-full',
+        square: 'rounded-md',
+      },
+    },
+  },
+);
+
+export type AvatarVariants = VariantProps<typeof avatarVariant>;

content/2.components/3.page/team-card.md

@@ -0,0 +1,85 @@
+---
+title: Team Card
+icon: lucide:users
+description: ''
+navBadges:
+  - value: New
+    type: lime
+badges:
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/TeamCard.vue
+    target: _blank
+  - value: 0.7.7
+---
+
+::code-group
+  ::div{label="Preview" class="md:p-4"}
+    ::team-card-group
+      ::team-card
+      ---
+      avatar: https://www.github.com/ZTL-UwU.png
+      name: Tony Zhang
+      title: Author of shadcn-docs-nuxt
+      links:
+        - icon: lucide:github
+          to: https://github.com/ZTL-UwU
+        - icon: lucide:twitter
+          to: https://x.com/ZTL_UwU
+        - icon: lucide:coffee
+          to: https://ko-fi.com/ztl_uwu
+      ---
+      ::
+
+      ::team-card
+      ---
+      center: false
+      avatar: https://www.github.com/ZTL-UwU.png
+      name: Tony Zhang
+      title: Author of shadcn-docs-nuxt
+      links:
+        - icon: lucide:github
+          to: https://github.com/ZTL-UwU
+        - icon: lucide:twitter
+          to: https://x.com/ZTL_UwU
+        - icon: lucide:coffee
+          to: https://ko-fi.com/ztl_uwu
+      ---
+      ::
+    ::
+  ::
+  ```mdc [Code]
+  ::team-card-group
+    ::team-card
+    ---
+    avatar: https://www.github.com/ZTL-UwU.png
+    name: Tony Zhang
+    title: Author of shadcn-docs-nuxt
+    links:
+      - icon: lucide:github
+        to: https://github.com/ZTL-UwU
+      - icon: lucide:twitter
+        to: https://x.com/ZTL_UwU
+      - icon: lucide:coffee
+        to: https://ko-fi.com/ztl_uwu
+    ---
+    ::
+
+    ::team-card
+    ---
+    center: false
+    avatar: https://www.github.com/ZTL-UwU.png
+    name: Tony Zhang
+    title: Author of shadcn-docs-nuxt
+    links:
+      - icon: lucide:github
+        to: https://github.com/ZTL-UwU
+      - icon: lucide:twitter
+        to: https://x.com/ZTL_UwU
+      - icon: lucide:coffee
+        to: https://ko-fi.com/ztl_uwu
+    ---
+    ::
+  ::
+  ```
+::