verse 3.1 mega menu

package.json

@@ -4,7 +4,7 @@
     "author": "Alexy-OS",
     "repository": "https://github.com/alexy-os/vue-shadcn-starter",
     "license": "MIT",
-    "version": "0.2.3",
+    "version": "0.3.1",
     "private": true,
     "scripts": {
         "dev": "vite",

src/components/layout/index.ts

@@ -0,0 +1,3 @@
+export { default as Section } from './Section.vue'
+export { default as Container } from './Container.vue'
+export { default as Grid } from './Grid.vue'

src/components/sections/blog/BlogCard.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Badge } from '@/components/ui/badge'
+
+interface Props {
+  class?: HTMLAttributes['class']
+  title: string
+  description: string
+  category?: string
+  date?: string
+  image?: string
+  href?: string
+}
+
+const props = defineProps<Props>()
+
+const placeholderLight = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlnaHQ9IjYwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iODAwIiBoZWlnaHQ9IjYwMCIgZmlsbD0iI2Q1ZjRkYyIvPjwvc3ZnPg=='
+const placeholderDark = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlnaHQ9IjYwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iODAwIiBoZWlnaHQ9IjYwMCIgZmlsbD0iIzAxMGUwNCIvPjwvc3ZnPg=='
+</script>
+
+<template>
+  <div :class="cn('group relative overflow-hidden rounded-lg border shadow hover:shadow-xl', props.class)">
+    <div class="aspect-video w-full overflow-hidden">
+      <img 
+        :src="props.image || placeholderLight" 
+        class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105 dark:hidden"
+        :alt="props.title"
+      />
+      <img 
+        :src="props.image || placeholderDark"
+        class="hidden h-full w-full object-cover transition-transform duration-300 group-hover:scale-105 dark:block"
+        :alt="props.title"
+      />
+    </div>
+    <div class="absolute inset-0 bg-gradient-to-t from-background/80 to-background/0" />
+    <div class="absolute bottom-0 p-6">
+      <div class="mb-2 flex items-center gap-2">
+        <Badge v-if="props.category" variant="secondary">{{ props.category }}</Badge>
+        <span v-if="props.date" class="text-sm text-muted-foreground">{{ props.date }}</span>
+      </div>
+      <h3 class="mb-2 text-xl font-semibold text-foreground">{{ props.title }}</h3>
+      <p class="mb-4 text-sm text-muted-foreground">{{ props.description }}</p>
+      <a 
+        v-if="props.href"
+        :href="props.href"
+        class="inline-flex items-center text-sm font-medium text-primary hover:underline"
+      >
+        Read more
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="ml-1 h-4 w-4"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
+            clip-rule="evenodd"
+          />
+        </svg>
+      </a>
+    </div>
+  </div>
+</template> 

src/components/sections/blog/BlogGrid.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { blogVariants } from './variants'
+import Section from '@/components/layout/Section.vue'
+
+interface Props {
+  class?: HTMLAttributes['class']
+  layout?: 'default' | 'grid' | 'featured' | 'list'
+  padding?: 'none' | 'sm' | 'md' | 'lg'
+  columns?: 1 | 2 | 3 | 4
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  layout: 'grid',
+  padding: 'md',
+  columns: 3
+})
+</script>
+
+<template>
+  <Section>
+    <div 
+      :class="cn(
+        blogVariants({ 
+          layout: props.layout,
+          padding: props.padding,
+          columns: props.columns
+        }),
+        props.class
+      )"
+    >
+      <slot />
+    </div>
+  </Section>
+</template> 

src/components/sections/blog/index.ts

@@ -0,0 +1,3 @@
+export { blogVariants } from './variants'
+export { default as BlogGrid } from './BlogGrid.vue'
+export { default as BlogCard } from './BlogCard.vue' 

src/components/sections/blog/variants.ts

@@ -0,0 +1,38 @@
+import { cva } from 'class-variance-authority'
+
+export const blogVariants = cva(
+  'relative w-full',
+  {
+    variants: {
+      layout: {
+        default: '',
+        grid: 'grid gap-6',
+        featured: 'grid grid-cols-1 md:grid-cols-2 gap-8',
+        list: 'space-y-8'
+      },
+      padding: {
+        none: '',
+        sm: 'p-4',
+        md: 'p-6',
+        lg: 'p-8'
+      },
+      columns: {
+        1: 'grid-cols-1',
+        2: 'grid-cols-1 md:grid-cols-2',
+        3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+        4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4'
+      }
+    },
+    defaultVariants: {
+      layout: 'default',
+      padding: 'none',
+      columns: 3
+    }
+  }
+)
+
+export interface BlogVariants {
+  layout?: 'default' | 'grid' | 'featured' | 'list'
+  padding?: 'none' | 'sm' | 'md' | 'lg'
+  columns?: 1 | 2 | 3 | 4
+}