From da623921ba06088f4bdff437cfee94386109c1b6 Mon Sep 17 00:00:00 2001
From: ZTL-UwU <zhangtianli2006@163.com>
Date: Sat, 16 Nov 2024 13:33:58 +0800
Subject: [PATCH] feat: team card

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>
---
 components/content/TeamCard.vue          | 38 +++++++++++
 components/content/TeamCardGroup.vue     |  5 ++
 components/ui/avatar/Avatar.vue          | 21 ++++++
 components/ui/avatar/AvatarFallback.vue  | 11 +++
 components/ui/avatar/AvatarImage.vue     |  9 +++
 components/ui/avatar/index.ts            | 24 +++++++
 content/2.components/3.page/team-card.md | 85 ++++++++++++++++++++++++
 7 files changed, 193 insertions(+)
 create mode 100644 components/content/TeamCard.vue
 create mode 100644 components/content/TeamCardGroup.vue
 create mode 100644 components/ui/avatar/Avatar.vue
 create mode 100644 components/ui/avatar/AvatarFallback.vue
 create mode 100644 components/ui/avatar/AvatarImage.vue
 create mode 100644 components/ui/avatar/index.ts
 create mode 100644 content/2.components/3.page/team-card.md

diff --git a/components/content/TeamCard.vue b/components/content/TeamCard.vue
new file mode 100644
index 00000000..fd3cda1a
--- /dev/null
+++ b/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>
diff --git a/components/content/TeamCardGroup.vue b/components/content/TeamCardGroup.vue
new file mode 100644
index 00000000..2fe197a7
--- /dev/null
+++ b/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>
diff --git a/components/ui/avatar/Avatar.vue b/components/ui/avatar/Avatar.vue
new file mode 100644
index 00000000..1f73102d
--- /dev/null
+++ b/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>
diff --git a/components/ui/avatar/AvatarFallback.vue b/components/ui/avatar/AvatarFallback.vue
new file mode 100644
index 00000000..52c4b1b7
--- /dev/null
+++ b/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>
diff --git a/components/ui/avatar/AvatarImage.vue b/components/ui/avatar/AvatarImage.vue
new file mode 100644
index 00000000..2b3d3779
--- /dev/null
+++ b/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>
diff --git a/components/ui/avatar/index.ts b/components/ui/avatar/index.ts
new file mode 100644
index 00000000..c1c2f6b3
--- /dev/null
+++ b/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>;
diff --git a/content/2.components/3.page/team-card.md b/content/2.components/3.page/team-card.md
new file mode 100644
index 00000000..19f4632c
--- /dev/null
+++ b/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
+    ---
+    ::
+  ::
+  ```
+::