re-organise and break down docs

Author: stevethomas

app/components/CodingLabsLogo.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 425.2 595.28">
+    <path class="fill-white"
+          d="M320,220.15l7.7-27-113.68-32.4-7.9,27.73C122.71,191.18,46.92,247,22.81,331.63c-29.88,104.82,30.87,214,135.69,243.89s214-30.87,243.89-135.69C426.74,354.41,390.89,266.09,320,220.15ZM212.6,528A141.51,141.51,0,1,1,354.11,386.45,141.51,141.51,0,0,1,212.6,528Z" />
+    <circle class="fill-[#f95e08]" cx="325.01" cy="93.07" r="17.74" stroke="currentColor" />
+    <circle class="fill-[#f95e08]" cx="271.17" cy="328.71" r="18.39" stroke="currentColor" />
+    <circle class="fill-[#f95e08]" cx="237.07" cy="296.47" r="11.69" stroke="currentColor" />
+    <path class="fill-[#f95e08]"  stroke="currentColor"
+          d="M322,369.31a69.45,69.45,0,0,1-36.66,13.35c-23.68,1.48-46.8-7.2-68.2-17.44-21-10-42.38-22-65.64-21.48-16.59.4-31.92,7.17-46.41,15.69A110.7,110.7,0,1,0,322,369.31ZM138.63,391.61a15.69,15.69,0,1,1,15.69,15.69A15.69,15.69,0,0,1,138.63,391.61Zm30.58,45.62a8.45,8.45,0,1,1,8.45-8.45A8.45,8.45,0,0,1,169.21,437.23Z" />
+    <rect class="bg-white" x="212.84" y="113.82" width="141.7" height="38.13"
+          transform="translate(47.3 -72.68) rotate(15.91)" />
+    <circle class="fill-[#f95e08]" cx="272.82" cy="65.03" r="10.3" />
+    <circle class="fill-[#f95e08]" cx="328.47" cy="18.44" r="10.3" />
+  </svg>
+</template>
+<script setup lang="ts">
+</script>

app/components/ComponentSummary.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { useRouter } from "vue-router"
+import { type Component, computed } from "vue"
+import { ArrowRight } from "lucide-vue-next"
+import { Button } from "@/components/button"
+import { Heading } from "@"
+import ShadcnLogo from "@app/components/ShadcnLogo.vue"
+import CodingLabsLogo from "@app/components/CodingLabsLogo.vue"
+
+type Meta = {
+  layout: Component
+  shadcn?: boolean | string
+  modified?: boolean
+}
+
+const props = defineProps<{
+  meta: Meta
+}>()
+
+const router = useRouter()
+const currentRoute = computed(() => router.currentRoute)
+const shadcnRoute = computed(() => {
+  return props.meta.shadcn === true
+    ? `${currentRoute.value.value.path}`
+    : `/components/${props.meta.shadcn}`
+})
+</script>
+
+<template>
+  <div>
+    <Heading as="h1">
+      <div class="flex items-center gap-x-2">
+        <CodingLabsLogo v-if="!meta.shadcn" class="size-8" />
+
+        <ShadcnLogo v-if="meta.shadcn" class="size-8" />
+        {{ currentRoute.value.name }}
+      </div>
+    </Heading>
+
+    <h2 class="mt-4 text-2xl font-bold tracking-tight">
+      {{ currentRoute.value.name }} is a
+      <template v-if="meta.shadcn">
+        <span v-if="meta.modified" class="italic">modified</span> Shadcn-vue component.
+      </template>
+
+      <template v-else>
+        custom component.
+      </template>
+    </h2>
+
+    <template v-if="meta.shadcn">
+      <p class="mt-6 text-lg leading-8 text-card-foreground">
+      <span v-if="meta.modified">
+        This component is imported from Shadcn Vue
+        <span class="italic">with</span> modifications.
+      </span>
+
+        <span v-else> This component is imported from Shadcn Vue without modification. </span>
+      </p>
+
+      <div class="mt-10 flex items-center gap-x-6">
+        <Button as-child>
+          <a :href="`https://www.shadcn-vue.com/docs${shadcnRoute}`" target="__blank">
+            See Shadcn Vue Docs
+          </a>
+
+          <ArrowRight />
+        </Button>
+      </div>
+    </template>
+  </div>
+</template>

app/components/ShadcnComponent.vue

@@ -0,0 +1,9 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="text-[#41B883]">
+    <rect width="256" height="256" fill="none"></rect>
+    <line x1="208" y1="128" x2="128" y2="208" fill="none" stroke="currentColor" stroke-linecap="round"
+          stroke-linejoin="round" stroke-width="32"></line>
+    <line x1="192" y1="40" x2="40" y2="192" fill="none" stroke="currentColor" stroke-linecap="round"
+          stroke-linejoin="round" stroke-width="32"></line>
+  </svg>
+</template>

app/components/ShadcnLogo.vue

@@ -14,7 +14,7 @@ defineEmits<{
 </script>
 
 <template>
-  <nav class="space-y-4 p-4 px-6">
+  <nav class="space-y-4 px-6">
     <div v-for="group in items" :key="group.name">
       <h3 class="text-md font-bold leading-6">{{ group.name }}</h3>
 
@@ -29,10 +29,6 @@ defineEmits<{
               >
                 {{ route.name }}
               </RouterLink>
-
-              <Badge v-if="!route.meta.shadcn" variant="secondary"> custom </Badge>
-
-              <Badge v-if="route.meta.modified"> modified </Badge>
             </li>
           </ul>
         </li>

app/components/SidebarNavigation.vue

@@ -1,18 +1,16 @@
 <script setup lang="ts">
 import { computed } from "vue"
 import { useRouter } from "vue-router"
-import ShadcnComponent from "@app/components/ShadcnComponent.vue"
+import ComponentSummary from "@app/components/ComponentSummary.vue"
 import { Heading } from "@/components/heading"
 
 const router = useRouter()
 const currentRoute = computed(() => router.currentRoute)
 </script>
 
 <template>
-  <article>
-    <Heading as="h1">{{ currentRoute.value.name }}</Heading>
-
-    <ShadcnComponent v-if="$route.meta.shadcn" :modified="$route.meta.modified" />
+  <article class="space-y-6">
+    <ComponentSummary :meta="$route.meta" />
 
     <hr class="my-8" />
 

app/layouts/ComponentLayout.vue

@@ -2,10 +2,15 @@
 import { ref } from "vue"
 import { cn } from "@/lib/utils"
 import { Slider } from "@/components/slider"
+import { Input } from "@/components/input"
 
 const modelValue = ref([50])
 </script>
 
 <template>
-  <Slider v-model="modelValue" :max="100" :step="1" :class="cn('w-3/5', $attrs.class ?? '')" />
+  <div class="flex items-center space-x-2">
+    <Slider v-model="modelValue" :max="100" :step="1" :class="cn('max-w-md', $attrs.class ?? '')" />
+
+    <Input v-model="modelValue" class="w-16" disabled />
+  </div>
 </template>