verse 2

alexy-os · Nov 18, 2024 · 9c946c5 · 9c946c5
1 parent 797b58e
commit 9c946c5
Show file tree

Hide file tree

Showing 23 changed files with 480 additions and 68 deletions.
diff --git a/.gitignore b/.gitignore
@@ -15,7 +15,7 @@ dist-ssr
 .vscode/
 bun.lockb
 tsconfig.tsbuildinfo
-.gitignore
+.cursorignore
 
 # Editor directories and files
 .vscode/*

diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
     <title>Vite + Shadcn Vue</title>
     <meta name="description" content="A starter project for Vue 3 with Shadcn UI and Tailwind CSS">
   </head>
-  <body>
+  <body class="bg-background text-foreground antialiased">
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>

diff --git a/package.json b/package.json
@@ -19,7 +19,8 @@
         "radix-vue": "^1.9.9",
         "tailwind-merge": "^2.5.4",
         "vaul-vue": "^0.2.0",
-        "vue": "^3.5.13"
+        "vue": "^3.5.13",
+        "vue-router": "4"
     },
     "devDependencies": {
         "@vitejs/plugin-vue": "^5.1.4",

diff --git a/src/App.vue b/src/App.vue
@@ -1,67 +1,7 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { Button } from '@/components/ui/button'
-import { Card } from '@/components/ui/card'
-import content from './App.json'
-import { getStyles, getButtonStyles } from '@/utils/styles'
-
-const isDarkTheme = ref(false)
-
-const toggleTheme = () => {
-  isDarkTheme.value = !isDarkTheme.value
-  document.body.classList.toggle('dark', isDarkTheme.value)
-  localStorage.setItem('theme', isDarkTheme.value ? 'dark' : 'light')
-}
-
-// Load theme from local storage
-const savedTheme = localStorage.getItem('theme')
-if (savedTheme) {
-  isDarkTheme.value = savedTheme === 'dark'
-  document.body.classList.toggle('dark', isDarkTheme.value)
-}
-
-const openWindow = (url: string) => {
-  window.open(url, '_blank')
-}
+import { RouterView } from 'vue-router'
 </script>
 
 <template>
-  <div :class="[getStyles('app'), getStyles('app__background')]">
-    <Card :class="getStyles('card')">
-      <h1 :class="getStyles('card__title')">
-        {{ content.hero.title }}
-      </h1>
-      <p :class="getStyles('card__description')">
-        {{ content.hero.description }}
-      </p>
-      <div :class="getStyles('card__actions')">
-        <Button 
-          variant="default" 
-          :class="getButtonStyles('primary')"
-          @click="openWindow(content.buttons.primary.url)"
-        >
-          {{ content.buttons.primary.text }}
-        </Button>
-        <Button 
-          variant="default" 
-          :class="getButtonStyles('secondary')"
-          @click="openWindow(content.buttons.secondary.url)"
-        >
-          {{ content.buttons.secondary.text }}
-        </Button>
-      </div>
-    </Card>
-    <Button 
-      variant="link" 
-      :class="getButtonStyles('theme')"
-      size="icon" 
-      @click="toggleTheme"
-    >
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun !w-5 !h-5"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
-    </Button>
-  </div>
-</template>
-
-<style scoped>
-/* Additional styles can be added here */
-</style>
+  <RouterView />
+</template>
diff --git a/src/components/darkMode/DarkMode.vue b/src/components/darkMode/DarkMode.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { Sun, Moon } from 'lucide-vue-next'
+import { ref, onMounted, type HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { type DarkModeVariants, darkModeVariants } from '.'
+
+interface Props extends /* @vue-ignore */ DarkModeVariants {
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'ghost',
+  size: 'default'
+})
+
+const isDark = ref(false)
+
+const toggleDarkMode = () => {
+  isDark.value = !isDark.value
+  if (isDark.value) {
+    document.documentElement.classList.add('dark')
+    localStorage.setItem('darkMode', 'true')
+  } else {
+    document.documentElement.classList.remove('dark')
+    localStorage.setItem('darkMode', 'false')
+  }
+}
+
+onMounted(() => {
+  const darkMode = localStorage.getItem('darkMode')
+  isDark.value = darkMode === 'true'
+  if (isDark.value) {
+    document.documentElement.classList.add('dark')
+  }
+})
+</script>
+
+<template>
+  <button
+    type="button"
+    :class="cn(darkModeVariants({ variant: props.variant, size: props.size }), props.class)"
+    @click="toggleDarkMode"
+  >
+    <Sun v-if="!isDark" class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+    <Moon v-else class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+    <span class="sr-only">Toggle theme</span>
+  </button>
+</template> 
diff --git a/src/components/darkMode/index.ts b/src/components/darkMode/index.ts
@@ -0,0 +1,26 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export { default as DarkMode } from './DarkMode.vue'
+
+export const darkModeVariants = cva(
+  'inline-flex items-center justify-center rounded-full 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: {
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        default: 'h-10 w-10',
+        sm: 'h-9 w-9',
+        lg: 'h-11 w-11',
+      },
+    },
+    defaultVariants: {
+      variant: 'ghost',
+      size: 'default',
+    },
+  },
+)
+
+export type DarkModeVariants = VariantProps<typeof darkModeVariants> 
diff --git a/src/components/layout/Container.vue b/src/components/layout/Container.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { cva, type VariantProps } from 'class-variance-authority'
+import type { HTMLAttributes } from 'vue'
+
+const containerVariants = cva(
+  'mx-auto w-full',
+  {
+    variants: {
+      size: {
+        sm: 'max-w-screen-sm',
+        md: 'max-w-screen-md',
+        lg: 'max-w-screen-lg',
+        xl: 'max-w-screen-xl',
+        '2xl': 'max-w-screen-2xl',
+      },
+      padding: {
+        none: '',
+        sm: 'px-4',
+        md: 'px-6',
+        lg: 'px-8',
+      }
+    },
+    defaultVariants: {
+      size: 'xl',
+      padding: 'md'
+    }
+  }
+)
+
+type ContainerVariants = VariantProps<typeof containerVariants>
+
+interface Props extends /* @vue-ignore */ ContainerVariants {
+  class?: HTMLAttributes['class']
+  as?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'div'
+})
+
+defineExpose({
+  containerVariants
+})
+</script>
+
+<template>
+  <component
+    :is="as"
+    :class="cn(containerVariants({ size: props.size, padding: props.padding }), props.class)"
+  >
+    <slot />
+  </component>
+</template>
diff --git a/src/components/layout/ContainerBlank.vue b/src/components/layout/ContainerBlank.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  as?: string
+}>()
+</script>
+
+<template>
+  <component
+    :is="props.as || 'div'"
+    :class="cn(
+      'mx-auto w-full max-w-screen-xl px-4 md:px-6 lg:px-8',
+      props.class
+    )"
+  >
+    <slot />
+  </component>
+</template> 
diff --git a/src/components/layout/Grid.vue b/src/components/layout/Grid.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { cva, type VariantProps } from 'class-variance-authority'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const gridVariants = cva(
+  'grid',
+  {
+    variants: {
+      cols: {
+        1: 'grid-cols-1',
+        2: 'grid-cols-1 sm:grid-cols-2',
+        3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+        4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
+        6: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-6'
+      },
+      gap: {
+        none: 'gap-0',
+        sm: 'gap-4',
+        md: 'gap-6',
+        lg: 'gap-8',
+        xl: 'gap-10'
+      },
+      align: {
+        start: 'items-start',
+        center: 'items-center',
+        end: 'items-end',
+        stretch: 'items-stretch'
+      }
+    },
+    defaultVariants: {
+      cols: 3,
+      gap: 'md',
+      align: 'stretch'
+    }
+  }
+)
+
+type GridVariants = VariantProps<typeof gridVariants>
+
+interface Props extends /* @vue-ignore */ GridVariants {
+  class?: HTMLAttributes['class']
+  as?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'div'
+})
+
+defineExpose({
+  gridVariants
+})
+</script>
+
+<template>
+  <component
+    :is="props.as"
+    :class="cn(gridVariants({ cols: props.cols, gap: props.gap, align: props.align }), props.class)"
+  >
+    <slot />
+  </component>
+</template> 
diff --git a/src/components/layout/Section.vue b/src/components/layout/Section.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { cva, type VariantProps } from 'class-variance-authority'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const sectionVariants = cva(
+  'relative w-full',
+  {
+    variants: {
+      spacing: {
+        none: '',
+        sm: 'py-8 md:py-12',
+        md: 'py-12 md:py-16',
+        lg: 'py-16 md:py-24',
+        xl: 'py-24 md:py-32'
+      },
+      background: {
+        none: '',
+        light: 'bg-muted/50 dark:bg-muted/10',
+        dark: 'bg-muted dark:bg-muted/20'
+      }
+    },
+    defaultVariants: {
+      spacing: 'md',
+      background: 'none'
+    }
+  }
+)
+
+type SectionVariants = VariantProps<typeof sectionVariants>
+
+interface Props extends /* @vue-ignore */ SectionVariants {
+  class?: HTMLAttributes['class']
+  as?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'section'
+})
+
+defineExpose({
+  sectionVariants
+})
+</script>
+
+<template>
+  <component
+    :is="props.as"
+    :class="cn(sectionVariants({ spacing: props.spacing, background: props.background }), props.class)"
+  >
+    <slot />
+  </component>
+</template>
diff --git a/src/components/layout/SectionBlank.vue b/src/components/layout/SectionBlank.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  as?: string
+}>()
+</script>
+
+<template>
+  <component
+    :is="props.as || 'section'"
+    :class="cn('py-12 md:py-16 lg:py-24', props.class)"
+  >
+    <slot />
+  </component>
+</template>