From 89e98efb7d93a8ba4016aacf5e68e196aa45637b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jens=20Bech-S=C3=B8rensen?= Date: Tue, 6 May 2025 23:09:47 +0200 Subject: [PATCH] Initial commit --- .gitignore | 27 ++ app/globals.css | 205 ++++++++ app/layout.tsx | 62 +++ app/page.tsx | 26 + app/posts/[slug]/page.tsx | 68 +++ components.json | 21 + components/mdx-content.tsx | 9 + components/post-preview.tsx | 26 + components/theme-provider.tsx | 11 + components/ui/accordion.tsx | 58 +++ components/ui/alert-dialog.tsx | 141 ++++++ components/ui/alert.tsx | 59 +++ components/ui/aspect-ratio.tsx | 7 + components/ui/avatar.tsx | 50 ++ components/ui/badge.tsx | 36 ++ components/ui/breadcrumb.tsx | 115 +++++ components/ui/button.tsx | 56 +++ components/ui/calendar.tsx | 66 +++ components/ui/card.tsx | 79 ++++ components/ui/carousel.tsx | 262 ++++++++++ components/ui/chart.tsx | 365 ++++++++++++++ components/ui/checkbox.tsx | 30 ++ components/ui/collapsible.tsx | 11 + components/ui/command.tsx | 153 ++++++ components/ui/context-menu.tsx | 200 ++++++++ components/ui/dialog.tsx | 122 +++++ components/ui/drawer.tsx | 118 +++++ components/ui/dropdown-menu.tsx | 200 ++++++++ components/ui/form.tsx | 178 +++++++ components/ui/hover-card.tsx | 29 ++ components/ui/input-otp.tsx | 71 +++ components/ui/input.tsx | 22 + components/ui/label.tsx | 26 + components/ui/menubar.tsx | 236 +++++++++ components/ui/navigation-menu.tsx | 128 +++++ components/ui/pagination.tsx | 117 +++++ components/ui/popover.tsx | 31 ++ components/ui/progress.tsx | 28 ++ components/ui/radio-group.tsx | 44 ++ components/ui/resizable.tsx | 45 ++ components/ui/scroll-area.tsx | 48 ++ components/ui/select.tsx | 160 +++++++ components/ui/separator.tsx | 31 ++ components/ui/sheet.tsx | 140 ++++++ components/ui/sidebar.tsx | 763 ++++++++++++++++++++++++++++++ components/ui/skeleton.tsx | 15 + components/ui/slider.tsx | 28 ++ components/ui/sonner.tsx | 31 ++ components/ui/switch.tsx | 29 ++ components/ui/table.tsx | 117 +++++ components/ui/tabs.tsx | 55 +++ components/ui/textarea.tsx | 22 + components/ui/toast.tsx | 129 +++++ components/ui/toaster.tsx | 35 ++ components/ui/toggle-group.tsx | 61 +++ components/ui/toggle.tsx | 45 ++ components/ui/tooltip.tsx | 30 ++ components/ui/use-mobile.tsx | 19 + components/ui/use-toast.ts | 194 ++++++++ hooks/use-mobile.tsx | 19 + hooks/use-toast.ts | 194 ++++++++ lib/api.ts | 583 +++++++++++++++++++++++ lib/utils.ts | 6 + next.config.mjs | 33 ++ package.json | 79 ++++ pnpm-lock.yaml | 5 + postcss.config.mjs | 8 + posts/animation-techniques.md | 103 ++++ posts/hello-world.md | 33 ++ posts/responsive-design.md | 91 ++++ posts/using-markdown.md | 84 ++++ public/placeholder-logo.png | Bin 0 -> 958 bytes public/placeholder-logo.svg | 1 + public/placeholder-user.jpg | Bin 0 -> 2615 bytes public/placeholder.jpg | Bin 0 -> 1596 bytes public/placeholder.svg | 1 + styles/globals.css | 94 ++++ tailwind.config.ts | 97 ++++ tsconfig.json | 27 ++ 79 files changed, 6948 insertions(+) create mode 100644 .gitignore create mode 100644 app/globals.css create mode 100644 app/layout.tsx create mode 100644 app/page.tsx create mode 100644 app/posts/[slug]/page.tsx create mode 100644 components.json create mode 100644 components/mdx-content.tsx create mode 100644 components/post-preview.tsx create mode 100644 components/theme-provider.tsx create mode 100644 components/ui/accordion.tsx create mode 100644 components/ui/alert-dialog.tsx create mode 100644 components/ui/alert.tsx create mode 100644 components/ui/aspect-ratio.tsx create mode 100644 components/ui/avatar.tsx create mode 100644 components/ui/badge.tsx create mode 100644 components/ui/breadcrumb.tsx create mode 100644 components/ui/button.tsx create mode 100644 components/ui/calendar.tsx create mode 100644 components/ui/card.tsx create mode 100644 components/ui/carousel.tsx create mode 100644 components/ui/chart.tsx create mode 100644 components/ui/checkbox.tsx create mode 100644 components/ui/collapsible.tsx create mode 100644 components/ui/command.tsx create mode 100644 components/ui/context-menu.tsx create mode 100644 components/ui/dialog.tsx create mode 100644 components/ui/drawer.tsx create mode 100644 components/ui/dropdown-menu.tsx create mode 100644 components/ui/form.tsx create mode 100644 components/ui/hover-card.tsx create mode 100644 components/ui/input-otp.tsx create mode 100644 components/ui/input.tsx create mode 100644 components/ui/label.tsx create mode 100644 components/ui/menubar.tsx create mode 100644 components/ui/navigation-menu.tsx create mode 100644 components/ui/pagination.tsx create mode 100644 components/ui/popover.tsx create mode 100644 components/ui/progress.tsx create mode 100644 components/ui/radio-group.tsx create mode 100644 components/ui/resizable.tsx create mode 100644 components/ui/scroll-area.tsx create mode 100644 components/ui/select.tsx create mode 100644 components/ui/separator.tsx create mode 100644 components/ui/sheet.tsx create mode 100644 components/ui/sidebar.tsx create mode 100644 components/ui/skeleton.tsx create mode 100644 components/ui/slider.tsx create mode 100644 components/ui/sonner.tsx create mode 100644 components/ui/switch.tsx create mode 100644 components/ui/table.tsx create mode 100644 components/ui/tabs.tsx create mode 100644 components/ui/textarea.tsx create mode 100644 components/ui/toast.tsx create mode 100644 components/ui/toaster.tsx create mode 100644 components/ui/toggle-group.tsx create mode 100644 components/ui/toggle.tsx create mode 100644 components/ui/tooltip.tsx create mode 100644 components/ui/use-mobile.tsx create mode 100644 components/ui/use-toast.ts create mode 100644 hooks/use-mobile.tsx create mode 100644 hooks/use-toast.ts create mode 100644 lib/api.ts create mode 100644 lib/utils.ts create mode 100644 next.config.mjs create mode 100644 package.json create mode 100644 pnpm-lock.yaml create mode 100644 postcss.config.mjs create mode 100644 posts/animation-techniques.md create mode 100644 posts/hello-world.md create mode 100644 posts/responsive-design.md create mode 100644 posts/using-markdown.md create mode 100644 public/placeholder-logo.png create mode 100644 public/placeholder-logo.svg create mode 100644 public/placeholder-user.jpg create mode 100644 public/placeholder.jpg create mode 100644 public/placeholder.svg create mode 100644 styles/globals.css create mode 100644 tailwind.config.ts create mode 100644 tsconfig.json diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..f650315 --- /dev/null +++ b/.gitignore @@ -0,0 +1,27 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules + +# next.js +/.next/ +/out/ + +# production +/build + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# env files +.env* + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts \ No newline at end of file diff --git a/app/globals.css b/app/globals.css new file mode 100644 index 0000000..2d70e5a --- /dev/null +++ b/app/globals.css @@ -0,0 +1,205 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + :root { + --background: 222 30% 7%; /* Darkened background */ + --foreground: 210 20% 98%; + --card: 222 47% 9%; /* Darkened card */ + --card-foreground: 210 20% 98%; + --popover: 222 47% 9%; + --popover-foreground: 210 20% 98%; + --primary: 263.4 70% 50.4%; + --primary-foreground: 210 20% 98%; + --secondary: 222 30% 12%; /* Darkened secondary */ + --secondary-foreground: 210 20% 98%; + --muted: 222 30% 12%; + --muted-foreground: 217.9 10.6% 64.9%; + --accent: 222 30% 12%; + --accent-foreground: 210 20% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 20% 98%; + --border: 222 30% 12%; + --input: 222 30% 12%; + --ring: 263.4 70% 50.4%; + } +} + +@layer base { + body { + @apply bg-background text-foreground; + } +} + +@keyframes gradient { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + +.animate-gradient { + background-size: 200% 200%; + animation: gradient 8s ease infinite; +} + +/* Animated background gradients */ +.animated-bg { + position: relative; + overflow: hidden; +} + +.animated-bg::before { + content: ""; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: radial-gradient( + circle at center, + rgba(124, 58, 237, 0.03) 0%, + rgba(124, 58, 237, 0.01) 20%, + rgba(236, 72, 153, 0.01) 40%, + rgba(236, 72, 153, 0) 60%, + transparent 100% + ); + animation: rotate 60s linear infinite; + z-index: -1; +} + +.animated-bg::after { + content: ""; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: radial-gradient( + circle at center, + rgba(236, 72, 153, 0.03) 0%, + rgba(236, 72, 153, 0.01) 20%, + rgba(124, 58, 237, 0.01) 40%, + rgba(124, 58, 237, 0) 60%, + transparent 100% + ); + animation: rotate 40s linear infinite reverse; + z-index: -1; +} + +@keyframes rotate { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +/* Modified post-link to always show the gradient line on hover */ +.post-link { + position: relative; + display: inline-block; + transition: all 0.3s ease; +} + +.post-link::after { + content: ""; + position: absolute; + width: 0; + height: 2px; + bottom: -2px; + left: 0; + background: linear-gradient(90deg, #7c3aed, #ec4899); + transition: width 0.3s ease; +} + +.post-card:hover .post-link::after { + width: 100%; +} + +.post-card { + position: relative; + transition: transform 0.3s ease; +} + +.post-card::before { + content: ""; + position: absolute; + inset: 0; + border-radius: 0.5rem; + padding: 1px; + background: linear-gradient(90deg, rgba(124, 58, 237, 0.2), rgba(236, 72, 153, 0.2)); + -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); + -webkit-mask-composite: xor; + mask-composite: exclude; + opacity: 0; + transition: opacity 0.3s ease; +} + +.post-card:hover { + transform: translateY(-2px); +} + +.post-card:hover::before { + opacity: 1; +} + +.prose { + @apply max-w-none; +} + +.prose a { + @apply text-purple-400 hover:text-pink-400 transition-colors duration-200; +} + +.prose h1, +.prose h2, +.prose h3, +.prose h4 { + @apply text-foreground; +} + +.prose code { + @apply bg-secondary text-foreground px-1 py-0.5 rounded; +} + +.prose pre { + @apply bg-card border border-border/40 rounded-md; +} + +.prose blockquote { + @apply border-l-4 border-purple-400 bg-secondary/50 pl-4 py-1 italic; +} + +.prose img { + @apply rounded-md; +} + +/* Ensure proper scrolling */ +html, +body { + height: 100%; + overflow-x: hidden; + overflow-y: auto; + scroll-behavior: smooth; +} + +/* Ensure content can extend beyond viewport */ +#__next, +main { + min-height: 100%; + display: flex; + flex-direction: column; +} + +/* Reduce spacing between posts for more compact layout */ +.space-y-6 > * + * { + margin-top: 1.25rem; +} diff --git a/app/layout.tsx b/app/layout.tsx new file mode 100644 index 0000000..d6925ea --- /dev/null +++ b/app/layout.tsx @@ -0,0 +1,62 @@ +import type React from "react" +import type { Metadata } from "next" +import { Inter } from "next/font/google" +import "./globals.css" +import { ThemeProvider } from "@/components/theme-provider" +import { Code, ExternalLink, Linkedin } from "lucide-react" + +const inter = Inter({ subsets: ["latin"] }) + +export const metadata: Metadata = { + title: "Minimalist Blog", + description: "A minimalist blog built with Next.js and Markdown", + generator: 'v0.dev' +} + +export default function RootLayout({ + children, +}: { + children: React.ReactNode +}) { + return ( + + + +
+
+

+ Minimalist Blog +

+
+ + + public code + + + + + linkedin + + +
+
+
{children}
+
+

© {new Date().getFullYear()} Minimalist Blog. All rights reserved.

+
+
+ + + + ) +} diff --git a/app/page.tsx b/app/page.tsx new file mode 100644 index 0000000..a5f71ef --- /dev/null +++ b/app/page.tsx @@ -0,0 +1,26 @@ +import { getAllPosts } from "@/lib/api" +import { PostPreview } from "@/components/post-preview" + +// Make sure this is a Server Component (default in App Router) +export default function Home() { + // Use synchronous data fetching to avoid suspense issues + const posts = getAllPosts() + + // Sort posts by date (newest first) + const sortedPosts = posts.sort((a, b) => new Date(b.metadata.date).getTime() - new Date(a.metadata.date).getTime()) + + return ( +
+
+

Blog posts

+
    + {sortedPosts.map((post) => ( +
  • + +
    • + ))} +
+
+
+ ) +} diff --git a/app/posts/[slug]/page.tsx b/app/posts/[slug]/page.tsx new file mode 100644 index 0000000..926efea --- /dev/null +++ b/app/posts/[slug]/page.tsx @@ -0,0 +1,68 @@ +import { getPostBySlug, getAllPosts } from "@/lib/api" +import { notFound } from "next/navigation" +import type { Metadata } from "next" +import Link from "next/link" +import { ArrowLeft } from "lucide-react" +import { Suspense } from "react" +import { MDXContent } from "@/components/mdx-content" + +export function generateStaticParams() { + const posts = getAllPosts() + return posts.map((post) => ({ + slug: post.slug, + })) +} + +export function generateMetadata({ params }: { params: { slug: string } }): Metadata { + const post = getPostBySlug(params.slug) + + if (!post) { + return { + title: "Post Not Found", + } + } + + return { + title: post.metadata.title, + description: post.metadata.excerpt, + } +} + +export default function Post({ params }: { params: { slug: string } }) { + const post = getPostBySlug(params.slug) + + if (!post) { + notFound() + } + + return ( +
+ + + Back to all posts + + +
+

+ {post.metadata.title} +

+ +
+ +
+ Loading content...
}> + + + +
+ ) +} diff --git a/components.json b/components.json new file mode 100644 index 0000000..d9ef0ae --- /dev/null +++ b/components.json @@ -0,0 +1,21 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "default", + "rsc": true, + "tsx": true, + "tailwind": { + "config": "tailwind.config.ts", + "css": "app/globals.css", + "baseColor": "neutral", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/components/ui", + "lib": "@/lib", + "hooks": "@/hooks" + }, + "iconLibrary": "lucide" +} \ No newline at end of file diff --git a/components/mdx-content.tsx b/components/mdx-content.tsx new file mode 100644 index 0000000..0018931 --- /dev/null +++ b/components/mdx-content.tsx @@ -0,0 +1,9 @@ +import { MDXRemote } from "next-mdx-remote/rsc" + +interface MDXContentProps { + content: string +} + +export function MDXContent({ content }: MDXContentProps) { + return +} diff --git a/components/post-preview.tsx b/components/post-preview.tsx new file mode 100644 index 0000000..6497b3f --- /dev/null +++ b/components/post-preview.tsx @@ -0,0 +1,26 @@ +import Link from "next/link" +import type { Post } from "@/lib/api" + +interface PostPreviewProps { + post: Post +} + +export function PostPreview({ post }: PostPreviewProps) { + return ( +
+ +

+ {post.metadata.title} +

+ +

{post.metadata.excerpt}

+ +
+ ) +} diff --git a/components/theme-provider.tsx b/components/theme-provider.tsx new file mode 100644 index 0000000..55c2f6e --- /dev/null +++ b/components/theme-provider.tsx @@ -0,0 +1,11 @@ +'use client' + +import * as React from 'react' +import { + ThemeProvider as NextThemesProvider, + type ThemeProviderProps, +} from 'next-themes' + +export function ThemeProvider({ children, ...props }: ThemeProviderProps) { + return {children} +} diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx new file mode 100644 index 0000000..24c788c --- /dev/null +++ b/components/ui/accordion.tsx @@ -0,0 +1,58 @@ +"use client" + +import * as React from "react" +import * as AccordionPrimitive from "@radix-ui/react-accordion" +import { ChevronDown } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Accordion = AccordionPrimitive.Root + +const AccordionItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AccordionItem.displayName = "AccordionItem" + +const AccordionTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + svg]:rotate-180", + className + )} + {...props} + > + {children} + + + +)) +AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName + +const AccordionContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + +
{children}
+ +)) + +AccordionContent.displayName = AccordionPrimitive.Content.displayName + +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } diff --git a/components/ui/alert-dialog.tsx b/components/ui/alert-dialog.tsx new file mode 100644 index 0000000..25e7b47 --- /dev/null +++ b/components/ui/alert-dialog.tsx @@ -0,0 +1,141 @@ +"use client" + +import * as React from "react" +import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" + +import { cn } from "@/lib/utils" +import { buttonVariants } from "@/components/ui/button" + +const AlertDialog = AlertDialogPrimitive.Root + +const AlertDialogTrigger = AlertDialogPrimitive.Trigger + +const AlertDialogPortal = AlertDialogPrimitive.Portal + +const AlertDialogOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName + +const AlertDialogContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + +)) +AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName + +const AlertDialogHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +AlertDialogHeader.displayName = "AlertDialogHeader" + +const AlertDialogFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +AlertDialogFooter.displayName = "AlertDialogFooter" + +const AlertDialogTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName + +const AlertDialogDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogDescription.displayName = + AlertDialogPrimitive.Description.displayName + +const AlertDialogAction = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName + +const AlertDialogCancel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName + +export { + AlertDialog, + AlertDialogPortal, + AlertDialogOverlay, + AlertDialogTrigger, + AlertDialogContent, + AlertDialogHeader, + AlertDialogFooter, + AlertDialogTitle, + AlertDialogDescription, + AlertDialogAction, + AlertDialogCancel, +} diff --git a/components/ui/alert.tsx b/components/ui/alert.tsx new file mode 100644 index 0000000..41fa7e0 --- /dev/null +++ b/components/ui/alert.tsx @@ -0,0 +1,59 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const alertVariants = cva( + "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", + { + variants: { + variant: { + default: "bg-background text-foreground", + destructive: + "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +const Alert = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes & VariantProps +>(({ className, variant, ...props }, ref) => ( +
+)) +Alert.displayName = "Alert" + +const AlertTitle = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +AlertTitle.displayName = "AlertTitle" + +const AlertDescription = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +AlertDescription.displayName = "AlertDescription" + +export { Alert, AlertTitle, AlertDescription } diff --git a/components/ui/aspect-ratio.tsx b/components/ui/aspect-ratio.tsx new file mode 100644 index 0000000..d6a5226 --- /dev/null +++ b/components/ui/aspect-ratio.tsx @@ -0,0 +1,7 @@ +"use client" + +import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio" + +const AspectRatio = AspectRatioPrimitive.Root + +export { AspectRatio } diff --git a/components/ui/avatar.tsx b/components/ui/avatar.tsx new file mode 100644 index 0000000..51e507b --- /dev/null +++ b/components/ui/avatar.tsx @@ -0,0 +1,50 @@ +"use client" + +import * as React from "react" +import * as AvatarPrimitive from "@radix-ui/react-avatar" + +import { cn } from "@/lib/utils" + +const Avatar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +Avatar.displayName = AvatarPrimitive.Root.displayName + +const AvatarImage = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarImage.displayName = AvatarPrimitive.Image.displayName + +const AvatarFallback = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName + +export { Avatar, AvatarImage, AvatarFallback } diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx new file mode 100644 index 0000000..f000e3e --- /dev/null +++ b/components/ui/badge.tsx @@ -0,0 +1,36 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const badgeVariants = cva( + "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + { + variants: { + variant: { + default: + "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", + secondary: + "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", + destructive: + "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", + outline: "text-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +export interface BadgeProps + extends React.HTMLAttributes, + VariantProps {} + +function Badge({ className, variant, ...props }: BadgeProps) { + return ( +
+ ) +} + +export { Badge, badgeVariants } diff --git a/components/ui/breadcrumb.tsx b/components/ui/breadcrumb.tsx new file mode 100644 index 0000000..60e6c96 --- /dev/null +++ b/components/ui/breadcrumb.tsx @@ -0,0 +1,115 @@ +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { ChevronRight, MoreHorizontal } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Breadcrumb = React.forwardRef< + HTMLElement, + React.ComponentPropsWithoutRef<"nav"> & { + separator?: React.ReactNode + } +>(({ ...props }, ref) =>