feat: hero alt right section

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>
ZTL-UwU · Dec 1, 2024 · f9400ed · f9400ed
1 parent 03233a4
commit f9400ed
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 33 deletions.
diff --git a/components/content/HeroAlt.vue b/components/content/HeroAlt.vue
@@ -1,41 +1,52 @@
 <template>
-  <section class="mx-auto flex flex-col items-start gap-2 px-4 py-8 md:py-12 md:pb-8 lg:py-12 lg:pb-10">
-    <NuxtLink
-      v-if="announcement"
-      :to="announcement.to"
-      :target="announcement.target"
-      class="inline-flex items-center px-0.5 text-sm font-medium"
+  <div
+    class="gap-4 px-4 py-8 md:py-12 md:pb-8 lg:py-12 lg:pb-10"
+    :class="{ 'grid md:grid-cols-3': $slots.right }"
+  >
+    <section
+      class="flex flex-col items-start gap-2"
+      :class="{ 'md:col-span-2': $slots.right }"
     >
-      <template v-if="announcement.icon">
-        <SmartIcon :name="announcement.icon" :size="16" />
-        <UiSeparator class="mx-2 h-4" orientation="vertical" />
-      </template>
-      <span class="underline-offset-4 hover:underline">{{ announcement.title }}</span>
-      <Icon name="lucide:arrow-right" class="ml-1 size-4" />
-    </NuxtLink>
-
-    <h1 class="text-3xl font-bold leading-tight tracking-tighter md:text-4xl lg:leading-[1.1]">
-      <ContentSlot :use="$slots.title" unwrap="p" />
-    </h1>
-    <p class="max-w-2xl text-lg font-light text-foreground">
-      <ContentSlot :use="$slots.description" unwrap="p" />
-    </p>
-
-    <div class="flex w-full items-center justify-start gap-2 py-2">
       <NuxtLink
-        v-for="(action, i) in actions"
-        :key="i"
-        :to="action.to"
-        :target="action.target"
+        v-if="announcement"
+        :to="announcement.to"
+        :target="announcement.target"
+        class="inline-flex items-center px-0.5 text-sm font-medium"
       >
-        <UiButton :variant="action.variant" size="sm">
-          <SmartIcon v-if="action.leftIcon" :name="action.leftIcon" class="mr-1" />
-          {{ action.name }}
-          <SmartIcon v-if="action.rightIcon" :name="action.rightIcon" class="ml-1" />
-        </UiButton>
+        <template v-if="announcement.icon">
+          <SmartIcon :name="announcement.icon" :size="16" />
+          <UiSeparator class="mx-2 h-4" orientation="vertical" />
+        </template>
+        <span class="underline-offset-4 hover:underline">{{ announcement.title }}</span>
+        <Icon name="lucide:arrow-right" class="ml-1 size-4" />
       </NuxtLink>
-    </div>
-  </section>
+
+      <h1 class="text-3xl font-bold leading-tight tracking-tighter md:text-4xl lg:leading-[1.1]">
+        <ContentSlot :use="$slots.title" unwrap="p" />
+      </h1>
+      <p class="max-w-2xl text-lg font-light text-foreground">
+        <ContentSlot :use="$slots.description" unwrap="p" />
+      </p>
+
+      <div class="flex w-full items-center justify-start gap-2 py-2">
+        <NuxtLink
+          v-for="(action, i) in actions"
+          :key="i"
+          :to="action.to"
+          :target="action.target"
+        >
+          <UiButton :variant="action.variant" size="sm">
+            <SmartIcon v-if="action.leftIcon" :name="action.leftIcon" class="mr-1" />
+            {{ action.name }}
+            <SmartIcon v-if="action.rightIcon" :name="action.rightIcon" class="ml-1" />
+          </UiButton>
+        </NuxtLink>
+      </div>
+    </section>
+    <section>
+      <ContentSlot :use="$slots.right" unwrap="p" />
+    </section>
+  </div>
 </template>
 
 <script setup lang="ts">

diff --git a/content/2.components/3.page/hero-alt.md b/content/2.components/3.page/hero-alt.md
@@ -7,6 +7,7 @@ badges:
     to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/HeroAlt.vue
     target: _blank
   - value: 0.4.0
+toc: false
 ---
 
 ::code-group
@@ -31,6 +32,36 @@ badges:
     #description
     Beautifully designed components that you can copy and paste into your apps.
     ::
+
+    ::hero-alt
+    ---
+    announcement:
+      title: 'Introducing Charts'
+      icon: 'lucide:pie-chart'
+      to: /getting-started
+    actions:
+      - name: Get Started
+        to: /getting-started
+      - name: GitHub
+        variant: ghost
+        to: https://github.com/ZTL-UwU/shadcn-docs-nuxt
+    ---
+
+    #title
+    Build your component library
+
+    #description
+    Beautifully designed components that you can copy and paste into your apps.
+
+    #right
+    ```bash [Terminal]
+    # Get Starter Template
+    bun x nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
+
+    # Start Development Server
+    bun run dev
+    ```
+    ::
   ::
   ```mdc[Code]
   ::hero-alt
@@ -54,5 +85,35 @@ badges:
   #description
   Beautifully designed components that you can copy and paste into your apps.
   ::
+
+  ::hero-alt
+  ---
+  announcement:
+    title: 'Introducing Charts'
+    icon: 'lucide:pie-chart'
+    to: /getting-started
+  actions:
+    - name: Get Started
+      to: /getting-started
+    - name: GitHub
+      variant: ghost
+      to: https://github.com/ZTL-UwU/shadcn-docs-nuxt
+  ---
+
+  #title
+  Build your component library
+
+  #description
+  Beautifully designed components that you can copy and paste into your apps.
+
+  #right
+  ```bash [Terminal]
+  # Get Starter Template
+  bun x nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
+
+  # Start Development Server
+  bun run dev
+  ```
+  ::
   ```
 ::