From 2954e0b15a81d593d2414fc996f18c6b01810993 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Sat, 22 Jul 2023 13:46:20 +0800
Subject: [PATCH] add demo page, update landing page features description

---
 docs/.vitepress/components/HomePageDemo.vue |  11 ++
 docs/.vitepress/config.ts                   |   2 +-
 docs/.vitepress/theme/index.ts              |   5 +-
 docs/components/DemoContainer.vue           |  23 ++++
 docs/components/Demos.vue                   | 113 ++++++++++++++++++++
 docs/components/HeroCodeGroup.vue           |   8 +-
 docs/components/demo/Checkbox/index.vue     |   9 +-
 docs/components/demo/Label/index.vue        |   6 +-
 docs/components/demo/ToggleGroup/index.vue  |  48 +++++----
 docs/content/index.md                       |  20 ++--
 docs/tsconfig.json                          |   4 +
 11 files changed, 203 insertions(+), 46 deletions(-)
 create mode 100644 docs/.vitepress/components/HomePageDemo.vue
 create mode 100644 docs/components/DemoContainer.vue
 create mode 100644 docs/components/Demos.vue
 create mode 100644 docs/tsconfig.json

diff --git a/docs/.vitepress/components/HomePageDemo.vue b/docs/.vitepress/components/HomePageDemo.vue
new file mode 100644
index 000000000..63fc6e19a
--- /dev/null
+++ b/docs/.vitepress/components/HomePageDemo.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import Demos from "../../components/Demos.vue";
+</script>
+
+<template>
+  <div class="mt-24 content px-[64px]">
+    <div class="mx-auto w-full container max-w-[1152px]">
+      <Demos class="grid lg:grid-cols-2 gap-12 lg:gap-6" />
+    </div>
+  </div>
+</template>
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 5b5e1eb4b..10cdae791 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -50,7 +50,7 @@ export default defineConfig({
     // https://vitepress.dev/reference/default-theme-config
     nav: [
       { text: "Home", link: "/" },
-      { text: "Examples", link: "/" },
+      { text: "Demo", link: "/#demo" },
     ],
 
     sidebar: sidebar(),
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 0ccc62fee..500593a56 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -2,12 +2,15 @@
 import { h } from "vue";
 import Theme from "vitepress/theme";
 import HomePage from "../components/HomePage.vue";
+import HomePageDemo from "../components/HomePageDemo.vue";
 import "./style.css";
 import "./tailwind.postcss";
 import "radix-vue/index.css";
 
 const regex = /\/(\w+)\.vue/;
+// @ts-ignore
 const baseModules = import.meta.glob("../../components/*.vue", { eager: true });
+// @ts-ignore
 const tableModules = import.meta.glob("../../components/tables/*.vue", { eager: true });
 
 export default {
@@ -15,7 +18,7 @@ export default {
   Layout: () => {
     return h(Theme.Layout, null, {
       // https://vitepress.dev/guide/extending-default-theme#layout-slots
-      "home-features-after": () => h(HomePage),
+      "home-features-after": () => h("div", [h(HomePageDemo), h(HomePage)]),
     });
   },
   enhanceApp({ app, router, siteData }) {
diff --git a/docs/components/DemoContainer.vue b/docs/components/DemoContainer.vue
new file mode 100644
index 000000000..bd9462a29
--- /dev/null
+++ b/docs/components/DemoContainer.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { Icon } from "@iconify/vue";
+defineProps<{
+  title: string;
+}>();
+</script>
+
+<template>
+  <div>
+    <a
+      class="capitalize text-lg font-semibold mb-2 ml-2 inline-flex items-center group"
+      :href="`/components/${title?.replace(' ', '-')}.html`"
+      >{{ title }}
+
+      <Icon icon="ic-round-arrow-forward" class="ml-2 group-focus:ml-3 group-hover:ml-3 transition-[margin]"></Icon>
+    </a>
+    <div
+      class="p-10 min-h-[256px] lg:h-[400px] bg-gradient-to-br rounded-xl from-teal9 to-green9 w-full relative items-center justify-center flex"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/docs/components/Demos.vue b/docs/components/Demos.vue
new file mode 100644
index 000000000..82956c011
--- /dev/null
+++ b/docs/components/Demos.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import AccordionDemo from "./demo/Accordion/index.vue";
+import AlertDialogDemo from "./demo/AlertDialog/index.vue";
+import AspectRatioDemo from "./demo/AspectRatio/index.vue";
+import AvatarDemo from "./demo/Avatar/index.vue";
+import CheckboxDemo from "./demo/Checkbox/index.vue";
+import CollapsibleDemo from "./demo/Collapsible/index.vue";
+import ContextMenuDemo from "./demo/ContextMenu/index.vue";
+import DialogDemo from "./demo/Dialog/index.vue";
+import DropdownMenuDemo from "./demo/DropdownMenu/index.vue";
+import HoverCardDemo from "./demo/HoverCard/index.vue";
+import LabelDemo from "./demo/Label/index.vue";
+import MenubarDemo from "./demo/Menubar/index.vue";
+import NavigationMenuDemo from "./demo/NavigationMenu/index.vue";
+import PopoverDemo from "./demo/Popover/index.vue";
+import ProgressDemo from "./demo/Progress/index.vue";
+import RadioGroupDemo from "./demo/RadioGroup/index.vue";
+import ScrollAreaDemo from "./demo/ScrollArea/index.vue";
+import SelectDemo from "./demo/Select/index.vue";
+import SeparatorDemo from "./demo/Separator/index.vue";
+import SliderDemo from "./demo/Slider/index.vue";
+import SwitchDemo from "./demo/Switch/index.vue";
+import TabsDemo from "./demo/Tabs/index.vue";
+import ToggleDemo from "./demo/Toggle/index.vue";
+import ToggleGroupDemo from "./demo/ToggleGroup/index.vue";
+import ToolbarDemo from "./demo/Toolbar/index.vue";
+import TooltipDemo from "./demo/Tooltip/index.vue";
+
+import DemoContainer from "./DemoContainer.vue";
+</script>
+
+<template>
+  <div>
+    <DemoContainer title="accordion">
+      <AccordionDemo />
+    </DemoContainer>
+    <DemoContainer title="alert dialog">
+      <AlertDialogDemo />
+    </DemoContainer>
+    <DemoContainer title="aspect ratio">
+      <AspectRatioDemo />
+    </DemoContainer>
+    <DemoContainer title="avatar">
+      <AvatarDemo />
+    </DemoContainer>
+    <DemoContainer title="checkbox">
+      <CheckboxDemo />
+    </DemoContainer>
+    <DemoContainer title="collapsible">
+      <CollapsibleDemo />
+    </DemoContainer>
+    <DemoContainer title="context menu">
+      <ContextMenuDemo />
+    </DemoContainer>
+    <DemoContainer title="dialog">
+      <DialogDemo />
+    </DemoContainer>
+    <DemoContainer title="dropdown menu">
+      <DropdownMenuDemo />
+    </DemoContainer>
+    <DemoContainer title="hover card">
+      <HoverCardDemo />
+    </DemoContainer>
+    <DemoContainer title="label">
+      <LabelDemo />
+    </DemoContainer>
+    <DemoContainer title="menubar">
+      <MenubarDemo />
+    </DemoContainer>
+    <DemoContainer title="navigation menu">
+      <NavigationMenuDemo />
+    </DemoContainer>
+    <DemoContainer title="popover">
+      <PopoverDemo />
+    </DemoContainer>
+    <DemoContainer title="progress">
+      <ProgressDemo />
+    </DemoContainer>
+    <DemoContainer title="radio group">
+      <RadioGroupDemo />
+    </DemoContainer>
+    <DemoContainer title="scroll area">
+      <ScrollAreaDemo />
+    </DemoContainer>
+    <DemoContainer title="select">
+      <SelectDemo />
+    </DemoContainer>
+    <DemoContainer title="separator">
+      <SeparatorDemo />
+    </DemoContainer>
+    <DemoContainer title="slider">
+      <SliderDemo />
+    </DemoContainer>
+    <DemoContainer title="switch">
+      <SwitchDemo />
+    </DemoContainer>
+    <DemoContainer title="tabs">
+      <TabsDemo />
+    </DemoContainer>
+    <DemoContainer title="toggle">
+      <ToggleDemo />
+    </DemoContainer>
+    <DemoContainer title="toggle group">
+      <ToggleGroupDemo />
+    </DemoContainer>
+    <DemoContainer title="toolbar">
+      <ToolbarDemo />
+    </DemoContainer>
+    <DemoContainer title="tooltip">
+      <TooltipDemo />
+    </DemoContainer>
+  </div>
+</template>
diff --git a/docs/components/HeroCodeGroup.vue b/docs/components/HeroCodeGroup.vue
index a8e831d36..2b86eea47 100644
--- a/docs/components/HeroCodeGroup.vue
+++ b/docs/components/HeroCodeGroup.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {useSlots, computed, ref, watch} from 'vue'
+import { useSlots, computed, ref, watch } from "vue";
 import { TabsRoot, TabsList, TabsTrigger, TabsContent } from "radix-vue";
 
 defineOptions({
@@ -40,7 +40,11 @@ watch(open, () => {
 </script>
 
 <template>
-  <TabsRoot v-model="currentTab" class="bg-[var(--vp-code-block-bg)] border border-neutral-700/40 rounded-b-lg overflow-hidden" @update:model-value="open = true">
+  <TabsRoot
+    v-model="currentTab"
+    class="bg-[var(--vp-code-block-bg)] border border-neutral-700/40 rounded-b-lg overflow-hidden"
+    @update:model-value="open = true"
+  >
     <div class="bg-[var(--vp-code-block-bg)] border-b-2 border-[#272727] flex pr-2">
       <div class="flex justify-between items-center w-full text-[13px]">
         <TabsList class="flex">
diff --git a/docs/components/demo/Checkbox/index.vue b/docs/components/demo/Checkbox/index.vue
index 6d22fc0a8..1c3f8bcae 100644
--- a/docs/components/demo/Checkbox/index.vue
+++ b/docs/components/demo/Checkbox/index.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { ref } from "vue";
 import { CheckboxRoot, CheckboxIndicator } from "radix-vue";
 import { Icon } from "@iconify/vue";
@@ -9,12 +9,11 @@ const checkboxOne = ref(true);
 <template>
   <div class="flex flex-col gap-2.5">
     <label class="flex flex-row gap-4 items-center [&>.checkbox]:hover:bg-neutral-100">
-      <CheckboxRoot v-model="checkboxOne"
+      <CheckboxRoot
+        v-model="checkboxOne"
         class="shadow-blackA7 hover:bg-green3 flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-[4px] bg-white shadow-[0_2px_10px] outline-none focus-within:shadow-[0_0_0_2px_black]"
       >
-        <CheckboxIndicator
-          class="bg-white h-full w-full rounded flex items-center justify-center"
-        >
+        <CheckboxIndicator class="bg-white h-full w-full rounded flex items-center justify-center">
           <Icon icon="radix-icons:check" class="h-3.5 w-3.5 text-grass11" />
         </CheckboxIndicator>
       </CheckboxRoot>
diff --git a/docs/components/demo/Label/index.vue b/docs/components/demo/Label/index.vue
index fe9caed24..a0bd16775 100644
--- a/docs/components/demo/Label/index.vue
+++ b/docs/components/demo/Label/index.vue
@@ -1,12 +1,10 @@
-<script setup>
+<script setup lang="ts">
 import { Label } from "radix-vue";
 </script>
 
 <template>
   <div class="flex flex-wrap items-center gap-[15px] px-5">
-    <Label class="text-[15px] font-semibold leading-[35px] text-white" for="firstName">
-      First name
-    </Label>
+    <Label class="text-[15px] font-semibold leading-[35px] text-white" for="firstName"> First name </Label>
     <input
       class="bg-blackA5 shadow-blackA9 inline-flex h-[35px] w-[200px] appearance-none items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none text-white shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px_black] selection:color-white selection:bg-blackA9"
       type="text"
diff --git a/docs/components/demo/ToggleGroup/index.vue b/docs/components/demo/ToggleGroup/index.vue
index abb2747b2..7ff4d3aa9 100644
--- a/docs/components/demo/ToggleGroup/index.vue
+++ b/docs/components/demo/ToggleGroup/index.vue
@@ -11,27 +11,29 @@ const toggleGroupItemClasses =
 </script>
 
 <template>
-  <ToggleGroupRoot class="flex" v-model="toggleStateSingle">
-    <ToggleGroupItem value="left" aria-label="Toggle italic" :class="toggleGroupItemClasses">
-      <Icon icon="radix-icons:text-align-left" class="w-[15px] h-[15px]" />
-    </ToggleGroupItem>
-    <ToggleGroupItem value="center" aria-label="Toggle italic" :class="toggleGroupItemClasses">
-      <Icon icon="radix-icons:text-align-center" class="w-[15px] h-[15px]" />
-    </ToggleGroupItem>
-    <ToggleGroupItem value="right" aria-label="Toggle italic" :class="toggleGroupItemClasses">
-      <Icon icon="radix-icons:text-align-right" class="w-[15px] h-[15px]" />
-    </ToggleGroupItem>
-  </ToggleGroupRoot>
-  <br />
-  <ToggleGroupRoot type="multiple" class="flex" v-model="toggleStateMultiple">
-    <ToggleGroupItem value="bold" aria-label="Toggle italic" :class="toggleGroupItemClasses">
-      <Icon icon="radix-icons:font-bold" class="w-[15px] h-[15px]" />
-    </ToggleGroupItem>
-    <ToggleGroupItem value="italic" aria-label="Toggle italic" :class="toggleGroupItemClasses">
-      <Icon icon="radix-icons:font-italic" class="w-[15px] h-[15px]" />
-    </ToggleGroupItem>
-    <ToggleGroupItem value="strikethrough" aria-label="Toggle italic" :class="toggleGroupItemClasses">
-      <Icon icon="radix-icons:strikethrough" class="w-[15px] h-[15px]" />
-    </ToggleGroupItem>
-  </ToggleGroupRoot>
+  <div>
+    <ToggleGroupRoot class="flex" v-model="toggleStateSingle">
+      <ToggleGroupItem value="left" aria-label="Toggle italic" :class="toggleGroupItemClasses">
+        <Icon icon="radix-icons:text-align-left" class="w-[15px] h-[15px]" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="center" aria-label="Toggle italic" :class="toggleGroupItemClasses">
+        <Icon icon="radix-icons:text-align-center" class="w-[15px] h-[15px]" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="right" aria-label="Toggle italic" :class="toggleGroupItemClasses">
+        <Icon icon="radix-icons:text-align-right" class="w-[15px] h-[15px]" />
+      </ToggleGroupItem>
+    </ToggleGroupRoot>
+    <br />
+    <ToggleGroupRoot type="multiple" class="flex" v-model="toggleStateMultiple">
+      <ToggleGroupItem value="bold" aria-label="Toggle italic" :class="toggleGroupItemClasses">
+        <Icon icon="radix-icons:font-bold" class="w-[15px] h-[15px]" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic" :class="toggleGroupItemClasses">
+        <Icon icon="radix-icons:font-italic" class="w-[15px] h-[15px]" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="strikethrough" aria-label="Toggle italic" :class="toggleGroupItemClasses">
+        <Icon icon="radix-icons:strikethrough" class="w-[15px] h-[15px]" />
+      </ToggleGroupItem>
+    </ToggleGroupRoot>
+  </div>
 </template>
diff --git a/docs/content/index.md b/docs/content/index.md
index 39ef13d38..66b63f80d 100644
--- a/docs/content/index.md
+++ b/docs/content/index.md
@@ -16,16 +16,16 @@ hero:
       link: https://github.com/radix-vue/radix-vue
 
 features:
-  - icon: 📝
-    title: Focus on Your Content
-    details: Effortlessly create beautiful documentation sites with just markdown.
-  - icon: <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><g fill="none"><path fill="url(#a)" d="m29.884 6.146-13.142 23.5a.714.714 0 0 1-1.244.005L2.096 6.148a.714.714 0 0 1 .746-1.057l13.156 2.352a.714.714 0 0 0 .253 0l12.881-2.348a.714.714 0 0 1 .752 1.05z"/><path fill="url(#b)" d="M22.264 2.007 12.54 3.912a.357.357 0 0 0-.288.33l-.598 10.104a.357.357 0 0 0 .437.369l2.707-.625a.357.357 0 0 1 .43.42l-.804 3.939a.357.357 0 0 0 .454.413l1.672-.508a.357.357 0 0 1 .454.414l-1.279 6.187c-.08.387.435.598.65.267l.143-.222 7.925-15.815a.357.357 0 0 0-.387-.51l-2.787.537a.357.357 0 0 1-.41-.45l1.818-6.306a.357.357 0 0 0-.412-.45z"/><defs><linearGradient id="a" x1="6" x2="235" y1="33" y2="344" gradientTransform="translate(1.34 1.894) scale(.07142)" gradientUnits="userSpaceOnUse"><stop stop-color="#41D1FF"/><stop offset="1" stop-color="#BD34FE"/></linearGradient><linearGradient id="b" x1="194.651" x2="236.076" y1="8.818" y2="292.989" gradientTransform="translate(1.34 1.894) scale(.07142)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFEA83"/><stop offset=".083" stop-color="#FFDD35"/><stop offset="1" stop-color="#FFA800"/></linearGradient></defs></g></svg>
-    title: Enjoy the Vite DX
-    details: Instant server start, lightning fast hot updates, and leverage Vite ecosystem plugins.
   - icon: <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path fill="#41b883" d="M24.4 3.925H30l-14 24.15L2 3.925h10.71l3.29 5.6 3.22-5.6Z"/><path fill="#41b883" d="m2 3.925 14 24.15 14-24.15h-5.6L16 18.415 7.53 3.925Z"/><path fill="#35495e" d="M7.53 3.925 16 18.485l8.4-14.56h-5.18L16 9.525l-3.29-5.6Z"/></svg>
-    title: Customize with Vue
-    details: Use Vue syntax and components directly in markdown, or build custom themes with Vue.
+    title: Vue, Nuxt supported.
+    details: Build for Vue framework, which compatible with any meta framework build on top of Vue.
   - icon: 🚀
-    title: Ship Fast Sites
-    details: Fast initial load with static HTML, fast post-load navigation with client-side routing.
+    title: Save time. Ship faster.
+    details: Building on top Radix components will save you time and money, so you can ship a better product faster.
+  - icon: ⌨️
+    title: Accessibility out of the box.
+    details: WAI-ARIA compliant. Support Keyboard navigation & Focus management.
+  - icon: 🧑🏻‍💻
+    title: Developer Experience First.
+    details: Unstyled, easily customizable and great for building design system and web apps.
 ---
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
new file mode 100644
index 000000000..a54aa39af
--- /dev/null
+++ b/docs/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": ["../packages/radix-vue/tsconfig.json"],
+  "include": ["/**/*.vue", ".vitepress/**/*.vue"]
+}