feat: add shadcn, add banner page

assets/css/tailwind.css

@@ -0,0 +1,78 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 224 71.4% 4.1%;
+
+    --muted: 220 14.3% 95.9%;
+    --muted-foreground: 220 8.9% 46.1%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 224 71.4% 4.1%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 224 71.4% 4.1%;
+
+    --border: 220 13% 91%;
+    --input: 220 13% 91%;
+
+    --primary: 220.9 39.3% 11%;
+    --primary-foreground: 210 20% 98%;
+
+    --secondary: 220 14.3% 95.9%;
+    --secondary-foreground: 220.9 39.3% 11%;
+
+    --accent: 220 14.3% 95.9%;
+    --accent-foreground: 220.9 39.3% 11%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 20% 98%;
+
+    --ring: 224 71.4% 4.1%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 224 71.4% 4.1%;
+    --foreground: 210 20% 98%;
+
+    --muted: 215 27.9% 16.9%;
+    --muted-foreground: 217.9 10.6% 64.9%;
+
+    --popover: 224 71.4% 4.1%;
+    --popover-foreground: 210 20% 98%;
+
+    --card: 224 71.4% 4.1%;
+    --card-foreground: 210 20% 98%;
+
+    --border: 215 27.9% 16.9%;
+    --input: 215 27.9% 16.9%;
+
+    --primary: 210 20% 98%;
+    --primary-foreground: 220.9 39.3% 11%;
+
+    --secondary: 215 27.9% 16.9%;
+    --secondary-foreground: 210 20% 98%;
+
+    --accent: 215 27.9% 16.9%;
+    --accent-foreground: 210 20% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 20% 98%;
+
+    --ring: 216 12.2% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

components.json

@@ -0,0 +1,15 @@
+{
+  "style": "default",
+  "typescript": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "assets/css/tailwind.css",
+    "baseColor": "gray",
+    "cssVariables": true
+  },
+  "framework": "nuxt",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/utils"
+  }
+}

components/c-side-bar.vue

@@ -118,7 +118,7 @@ watchEffect(() => {
   StyleProvider(currentTheme);
 });
 
-const total = await blogsCount();
+// const total = await blogsCount();
 
 const socialLinks = [
   {

components/ui/button/Button.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { buttonVariants } from ".";
+// import { cn } from '@/lib/utils'
+
+interface Props {
+  variant?: NonNullable<Parameters<typeof buttonVariants>[0]>["variant"];
+  size?: NonNullable<Parameters<typeof buttonVariants>[0]>["size"];
+  as?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  as: "button",
+});
+</script>
+
+<template>
+  <component
+    :is="as"
+    :class="cn(buttonVariants({ variant, size }), $attrs.class ?? '')"
+  >
+    <slot />
+  </component>
+</template>

components/ui/button/index.ts

@@ -0,0 +1,32 @@
+import { cva } from 'class-variance-authority'
+
+export { default as Button } from './Button.vue'
+
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)

components/ui/card/Card.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const props = defineProps({
+  class: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'rounded-lg border bg-card text-card-foreground shadow-sm',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

components/ui/card/CardContent.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const props = defineProps({
+  class: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<template>
+  <div :class="cn('p-6 pt-0', props.class)">
+    <slot />
+  </div>
+</template>

components/ui/card/CardDescription.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const props = defineProps({
+  class: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<template>
+  <p :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </p>
+</template>

components/ui/card/CardFooter.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const props = defineProps({
+  class: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<template>
+  <div :class="cn('p-6 pt-0', props.class)">
+    <slot />
+  </div>
+</template>

components/ui/card/CardHeader.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const props = defineProps({
+  class: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<template>
+  <div :class="cn('flex flex-col space-y-1.5 p-6', props.class)">
+    <slot />
+  </div>
+</template>

components/ui/card/CardTitle.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const props = defineProps({
+  class: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<template>
+  <h3
+    :class="
+      cn('text-2xl font-semibold leading-none tracking-tighter', props.class)
+    "
+  >
+    <slot />
+  </h3>
+</template>

components/ui/card/index.ts

@@ -0,0 +1,6 @@
+export { default as Card } from './Card.vue'
+export { default as CardHeader } from './CardHeader.vue'
+export { default as CardTitle } from './CardTitle.vue'
+export { default as CardDescription } from './CardDescription.vue'
+export { default as CardContent } from './CardContent.vue'
+export { default as CardFooter } from './CardFooter.vue'

components/ui/input/Input.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { cn } from '@/utils'
+
+const props = defineProps<{
+  defaultValue?: string | number
+  modelValue?: string | number
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <input v-model="modelValue" type="text" :class="cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? '')">
+</template>

components/ui/input/index.ts

@@ -0,0 +1 @@
+export { default as Input } from './Input.vue'

components/ui/label/Label.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { Label, type LabelProps } from 'radix-vue'
+import { cn } from '@/utils'
+
+const props = defineProps<LabelProps & { class?: string }>()
+</script>
+
+<template>
+  <Label
+    v-bind="props"
+    :class="
+      cn(
+        'block text-sm tracking-tight font-medium text-foreground text-left',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Label>
+</template>

components/ui/label/index.ts

@@ -0,0 +1 @@
+export { default as Label } from './Label.vue'

components/ui/slider/Slider.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { SliderRootEmits, SliderRootProps } from 'radix-vue'
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useEmitAsProps } from 'radix-vue'
+import { cn } from '@/utils'
+
+const props = defineProps<SliderRootProps>()
+const emits = defineEmits<SliderRootEmits>()
+
+const emitsAsProps = useEmitAsProps(emits)
+</script>
+
+<template>
+  <SliderRoot
+    :class="cn(
+      'relative flex w-full touch-none select-none items-center',
+      $attrs.class ?? '',
+    )"
+    v-bind="{ ...props, ...emitsAsProps }"
+  >
+    <SliderTrack class="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+      <SliderRange class="absolute h-full bg-primary" />
+    </SliderTrack>
+    <SliderThumb class="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+  </SliderRoot>
+</template>

components/ui/slider/index.ts

@@ -0,0 +1 @@
+export { default as Slider } from './Slider.vue'

components/ui/textarea/Textarea.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { cn } from '@/utils'
+
+const props = defineProps<{
+  defaultValue?: string | number
+  modelValue?: string | number
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <textarea v-model="modelValue" :class="cn('flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? '')" />
+</template>

components/ui/textarea/index.ts

@@ -0,0 +1 @@
+export { default as Textarea } from './Textarea.vue'

nuxt.config.ts

@@ -149,4 +149,20 @@ export default defineNuxtConfig({
     // only ssr
     public: {},
   },
+  components: [
+    {
+      path: "~/components/ui",
+      // this is required else Nuxt will autoImport `.ts` file
+      extensions: [".vue"],
+      // prefix for your components, eg: UiButton
+      prefix: "Ui",
+    },
+    {
+      path: "~/components",
+      // this is required else Nuxt will autoImport `.ts` file
+      extensions: [".vue"],
+      // prefix for your components, eg: UiButton
+      // prefix: "Ui",
+    },
+  ],
 });