"use client"; import Image from "next/image"; import { Box, Flame, Sparkles, Zap } from "lucide-react"; import { cn } from "@/lib/utils"; type IconKey = "zap" | "sparkle" | "box" | "flame"; type Tone = | "primary" | "foreground" | "ocean" | "aurora" | "sunset" | "emerald"; interface Logo2Props { name?: string; tagline?: string; icon?: IconKey; image?: string; alt?: string; tone?: Tone; className?: string; } const iconMap: Record = { zap: Zap, sparkle: Sparkles, box: Box, flame: Flame, }; const toneClasses: Record = { primary: "bg-primary text-primary-foreground shadow-sm", foreground: "bg-foreground text-background shadow-sm", ocean: "bg-gradient-to-br from-sky-500 to-indigo-600 text-white shadow-lg shadow-sky-500/30", aurora: "bg-gradient-to-br from-violet-500 to-fuchsia-500 text-white shadow-lg shadow-violet-500/30", sunset: "bg-gradient-to-br from-rose-500 to-orange-500 text-white shadow-lg shadow-rose-500/30", emerald: "bg-gradient-to-br from-emerald-400 to-teal-500 text-white shadow-lg shadow-emerald-500/30", }; export const logo2Demo: Logo2Props = { name: "Notion", tagline: "The connected workspace", image: "https://oud.pics/sm/l/notion.png", alt: "Notion", tone: "ocean", }; export function Logo2({ name = "Brand", tagline, icon = "zap", image, alt, tone = "ocean", className, }: Logo2Props) { const Icon = iconMap[icon]; return (

{image ? ( {alt

) : (

)}

{name} {tagline && ( {tagline} )}

); }