soconnor/beenvoice
1
0
Fork 0
mirror of https://github.com/soconnor0919/beenvoice.git synced 2026-05-08 09:38:55 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: Implement a new dashboard shell with animated background, refactor dashboard data fetching into a dedicated API route, and introduce new UI components.**

Browse Source
This commit is contained in:
Sean O'Connor
2025-12-10 03:16:36 -05:00
parent ca6484aea5
commit 39fdf16280
24 changed files with 767 additions and 412 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/branding/logo.tsx
+42 -35
View File
@@ -5,30 +5,29 @@ import { cn } from "~/lib/utils";
interface LogoProps {
className?: string;
size?: "sm" | "md" | "lg" | "xl";
size?: "sm" | "md" | "lg" | "xl" | "icon";
animated?: boolean;
}
export function Logo({ className, size = "md", animated = true }: LogoProps) {
const sizeClasses = {
sm: "text-sm",
md: "text-lg",
lg: "text-2xl",
xl: "text-4xl",
sm: "text-base",
md: "text-xl",
lg: "text-3xl",
xl: "text-5xl",
icon: "text-2xl",
};
if (!animated) {
return <LogoContent className={className} size={size} sizeClasses={sizeClasses} />;
}
return (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.1, ease: "easeOut" }}
className={cn("flex items-center", sizeClasses[size], className)}
className={cn("flex items-center font-mono", sizeClasses[size], className)}
>
<motion.span
initial={{ opacity: 0 }}
@@ -38,28 +37,32 @@ export function Logo({ className, size = "md", animated = true }: LogoProps) {
>
$
</motion.span>
<motion.span
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.03, duration: 0.05, ease: "easeOut" }}
className="inline-block w-2"
></motion.span>
<motion.span
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.04, duration: 0.05, ease: "easeOut" }}
className="text-foreground font-bold tracking-tight"
>
been
</motion.span>
<motion.span
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.06, duration: 0.05, ease: "easeOut" }}
className="text-foreground/70 font-bold tracking-tight"
>
voice
</motion.span>
{size !== "icon" && (
<>
<motion.span
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.03, duration: 0.05, ease: "easeOut" }}
className="inline-block w-1" // Reduced from w-2 to w-1 (half space)
></motion.span>
<motion.span
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.04, duration: 0.05, ease: "easeOut" }}
className="text-foreground font-bold tracking-tight"
>
been
</motion.span>
<motion.span
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.06, duration: 0.05, ease: "easeOut" }}
className="text-foreground/70 font-bold tracking-tight"
>
voice
</motion.span>
</>
)}
</motion.div>
);
}
@@ -70,15 +73,19 @@ function LogoContent({
sizeClasses,
}: {
className?: string;
size: "sm" | "md" | "lg" | "xl";
size: "sm" | "md" | "lg" | "xl" | "icon";
sizeClasses: Record<string, string>;
}) {
return (
<div className={cn("flex items-center", sizeClasses[size], className)}>
<div className={cn("flex items-center font-mono", sizeClasses[size], className)}>
<span className="text-primary font-bold tracking-tight">$</span>
<span className="inline-block w-2"></span>
<span className="text-foreground font-bold tracking-tight">been</span>
<span className="text-foreground/70 font-bold tracking-tight">voice</span>
{size !== "icon" && (
<>
<span className="inline-block w-1"></span>
<span className="text-foreground font-bold tracking-tight">been</span>
<span className="text-foreground/70 font-bold tracking-tight">voice</span>
</>
)}
</div>
);
}