feat: implement Figlet, Pastel, and Unit tools with a unified layout
- Add Figlet text converter with font selection and history - Add Pastel color palette generator and manipulation suite - Add comprehensive Units converter with category-based logic - Introduce AppShell with Sidebar and Header for navigation - Modernize theme system with CSS variables and new animations - Update project configuration and dependencies
This commit is contained in:
82
components/layout/AppHeader.tsx
Normal file
82
components/layout/AppHeader.tsx
Normal file
@@ -0,0 +1,82 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { Menu, Search, Bell, ChevronRight, Moon, Sun, X } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { useTheme } from '@/components/providers/ThemeProvider';
|
||||
import { cn } from '@/lib/utils/cn';
|
||||
import { useSidebar } from './SidebarProvider';
|
||||
|
||||
export function AppHeader() {
|
||||
const pathname = usePathname();
|
||||
const { toggle, isOpen } = useSidebar();
|
||||
|
||||
// Custom breadcrumb logic
|
||||
const pathSegments = pathname.split('/').filter(Boolean);
|
||||
|
||||
return (
|
||||
<header className="h-16 border-b border-white/5 bg-background/10 backdrop-blur-xl sticky top-0 z-40 flex items-center justify-between px-4 lg:px-8">
|
||||
<div className="flex items-center gap-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="lg:hidden text-muted-foreground hover:text-foreground"
|
||||
onClick={toggle}
|
||||
>
|
||||
{isOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
|
||||
</Button>
|
||||
|
||||
<nav className="hidden sm:flex items-center text-sm font-medium text-muted-foreground">
|
||||
<Link href="/" className="hover:text-foreground transition-colors flex items-center gap-2">
|
||||
<span>Kit</span>
|
||||
</Link>
|
||||
{pathSegments.map((segment, index) => {
|
||||
const href = `/${pathSegments.slice(0, index + 1).join('/')}`;
|
||||
const isLast = index === pathSegments.length - 1;
|
||||
|
||||
return (
|
||||
<React.Fragment key={href}>
|
||||
<ChevronRight className="h-4 w-4 mx-1 text-muted-foreground/30" />
|
||||
<Link
|
||||
href={href}
|
||||
className={cn(
|
||||
"capitalize transition-colors",
|
||||
isLast ? "text-foreground font-semibold" : "hover:text-foreground"
|
||||
)}
|
||||
>
|
||||
{segment.replace(/-/g, ' ')}
|
||||
</Link>
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 sm:gap-4">
|
||||
<ThemeToggleComponent />
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
function ThemeToggleComponent() {
|
||||
const { resolvedTheme, setTheme } = useTheme();
|
||||
|
||||
return (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
|
||||
className="text-muted-foreground hover:text-foreground hover:bg-white/5"
|
||||
title={`Switch to ${resolvedTheme === 'dark' ? 'light' : 'dark'} mode`}
|
||||
>
|
||||
{resolvedTheme === 'dark' ? (
|
||||
<Sun className="h-5 w-5" />
|
||||
) : (
|
||||
<Moon className="h-5 w-5" />
|
||||
)}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
28
components/layout/AppShell.tsx
Normal file
28
components/layout/AppShell.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { AppSidebar } from './AppSidebar';
|
||||
import { AppHeader } from './AppHeader';
|
||||
import AnimatedBackground from '@/components/AnimatedBackground';
|
||||
import { SidebarProvider } from './SidebarProvider';
|
||||
|
||||
interface AppShellProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export function AppShell({ children }: AppShellProps) {
|
||||
return (
|
||||
<SidebarProvider>
|
||||
<div className="flex min-h-screen bg-background text-foreground relative">
|
||||
<AnimatedBackground />
|
||||
<AppSidebar />
|
||||
<div className="flex-1 flex flex-col min-w-0 relative z-10">
|
||||
<AppHeader />
|
||||
<main className="flex-1 overflow-y-auto">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</SidebarProvider>
|
||||
);
|
||||
}
|
||||
230
components/layout/AppSidebar.tsx
Normal file
230
components/layout/AppSidebar.tsx
Normal file
@@ -0,0 +1,230 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import {
|
||||
ChevronRight,
|
||||
MousePointer2,
|
||||
Palette,
|
||||
Eye,
|
||||
Languages,
|
||||
Layers,
|
||||
ChevronLeft,
|
||||
X
|
||||
} from 'lucide-react';
|
||||
import { cn } from '@/lib/utils/cn';
|
||||
import Logo from '@/components/Logo';
|
||||
import { useSidebar } from './SidebarProvider';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
|
||||
interface NavItem {
|
||||
title: string;
|
||||
href: string;
|
||||
icon: React.ElementType | React.ReactNode;
|
||||
items?: { title: string; href: string }[];
|
||||
}
|
||||
|
||||
interface NavGroup {
|
||||
label: string;
|
||||
items: NavItem[];
|
||||
}
|
||||
|
||||
const PastelIcon = (props: any) => (
|
||||
<svg {...props} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" />
|
||||
<circle cx="6.5" cy="11.5" r="1" fill="currentColor" />
|
||||
<circle cx="9.5" cy="7.5" r="1" fill="currentColor" />
|
||||
<circle cx="14.5" cy="7.5" r="1" fill="currentColor" />
|
||||
<circle cx="17.5" cy="11.5" r="1" fill="currentColor" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const UnitsIcon = (props: any) => (
|
||||
<svg {...props} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const FigletIcon = (props: any) => (
|
||||
<svg {...props} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3.5 13h6" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="m2 16 4.5-9 4.5 9" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18 16V7" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="m14 11 4-4 4 4" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const navigation: NavGroup[] = [
|
||||
{
|
||||
label: 'Toolkit',
|
||||
items: [
|
||||
{
|
||||
title: 'Units Converter',
|
||||
href: '/units',
|
||||
icon: <UnitsIcon className="h-4 w-4" />
|
||||
},
|
||||
{
|
||||
title: 'Figlet ASCII',
|
||||
href: '/figlet',
|
||||
icon: <FigletIcon className="h-4 w-4" />
|
||||
},
|
||||
{
|
||||
title: 'Pastel (Color)',
|
||||
href: '/pastel',
|
||||
icon: <PastelIcon className="h-4 w-4" />,
|
||||
items: [
|
||||
{ title: 'Harmony Palettes', href: '/pastel/palettes/harmony' },
|
||||
{ title: 'Distinct Colors', href: '/pastel/palettes/distinct' },
|
||||
{ title: 'Gradients', href: '/pastel/palettes/gradient' },
|
||||
{ title: 'Contrast Checker', href: '/pastel/accessibility/contrast' },
|
||||
{ title: 'Color Blindness', href: '/pastel/accessibility/colorblind' },
|
||||
{ title: 'Text Color', href: '/pastel/accessibility/textcolor' },
|
||||
{ title: 'Named Colors', href: '/pastel/names' },
|
||||
{ title: 'Batch Operations', href: '/pastel/batch' },
|
||||
]
|
||||
},
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
export function AppSidebar() {
|
||||
const pathname = usePathname();
|
||||
const { isOpen, isCollapsed, close, toggleCollapse } = useSidebar();
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Mobile Overlay Backdrop */}
|
||||
{isOpen && (
|
||||
<div
|
||||
className="fixed inset-0 bg-background/80 backdrop-blur-sm z-40 lg:hidden"
|
||||
onClick={close}
|
||||
/>
|
||||
)}
|
||||
|
||||
<aside className={cn(
|
||||
"fixed inset-y-0 left-0 z-50 flex flex-col border-r border-white/5 bg-background/40 backdrop-blur-2xl transition-all duration-300 ease-in-out lg:relative",
|
||||
isOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0",
|
||||
isCollapsed ? "lg:w-20" : "w-64"
|
||||
)}>
|
||||
{/* Sidebar Header */}
|
||||
<div className="flex h-16 items-center justify-between px-6 shrink-0 border-b border-white/5">
|
||||
<Link href="/" className="flex items-center gap-3 group overflow-hidden">
|
||||
<div className="shrink-0">
|
||||
<Logo size={isCollapsed ? 32 : 32} />
|
||||
</div>
|
||||
{!isCollapsed && (
|
||||
<span className="font-bold text-xl bg-clip-text text-transparent bg-gradient-to-r from-purple-400 via-pink-400 to-cyan-400 group-hover:opacity-80 transition-opacity whitespace-nowrap">
|
||||
Kit
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="lg:hidden text-muted-foreground"
|
||||
onClick={close}
|
||||
>
|
||||
<X className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 overflow-y-auto px-4 py-2 space-y-8 mt-4 scrollbar-hide">
|
||||
{navigation.map((group) => (
|
||||
<div key={group.label} className="space-y-2">
|
||||
{!isCollapsed && (
|
||||
<h4 className="px-3 text-xs font-semibold text-muted-foreground/50 uppercase tracking-wider">
|
||||
{group.label}
|
||||
</h4>
|
||||
)}
|
||||
<div className="space-y-1">
|
||||
{group.items.map((item) => {
|
||||
const isActive = pathname === item.href || (item.href !== '/' && pathname.startsWith(item.href));
|
||||
|
||||
return (
|
||||
<div key={item.href} className="space-y-1">
|
||||
<Link
|
||||
href={item.href}
|
||||
onClick={() => { if (window.innerWidth < 1024) close(); }}
|
||||
className={cn(
|
||||
"flex items-center px-3 py-2 rounded-xl text-sm font-medium transition-all duration-300 relative group/item",
|
||||
isActive
|
||||
? "bg-primary/10 text-primary shadow-[0_0_15px_rgba(139,92,246,0.15)] ring-1 ring-primary/20"
|
||||
: "text-muted-foreground hover:bg-white/5 hover:text-foreground",
|
||||
isCollapsed ? "justify-center" : "justify-between"
|
||||
)}
|
||||
title={isCollapsed ? item.title : undefined}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className={cn(
|
||||
"transition-colors duration-300 shrink-0",
|
||||
isActive ? "text-primary" : "text-muted-foreground group-hover/item:text-foreground"
|
||||
)}>
|
||||
{React.isValidElement(item.icon) ? item.icon : null}
|
||||
</span>
|
||||
{!isCollapsed && <span className="whitespace-nowrap">{item.title}</span>}
|
||||
</div>
|
||||
|
||||
{!isCollapsed && item.items && (
|
||||
<ChevronRight className={cn(
|
||||
"h-3.5 w-3.5 transition-transform duration-300",
|
||||
pathname.startsWith(item.href) && "rotate-90"
|
||||
)} />
|
||||
)}
|
||||
|
||||
{/* Collapsed Active Indicator */}
|
||||
{isCollapsed && isActive && (
|
||||
<div className="absolute left-0 w-1 h-6 bg-primary rounded-r-full" />
|
||||
)}
|
||||
</Link>
|
||||
|
||||
{item.items && pathname.startsWith(item.href) && !isCollapsed && (
|
||||
<div className="ml-9 space-y-1 border-l border-white/5 pl-2 mt-1">
|
||||
{item.items.map((subItem) => (
|
||||
<Link
|
||||
key={subItem.href}
|
||||
href={subItem.href}
|
||||
onClick={() => { if (window.innerWidth < 1024) close(); }}
|
||||
className={cn(
|
||||
"block px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200",
|
||||
pathname === subItem.href
|
||||
? "text-primary bg-primary/5 font-semibold"
|
||||
: "text-muted-foreground hover:text-foreground hover:bg-white/5"
|
||||
)}
|
||||
>
|
||||
{subItem.title}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* Sidebar Footer / Desktop Toggle */}
|
||||
<div className="p-4 border-t border-white/5 hidden lg:block">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="w-full flex items-center justify-center gap-2 text-muted-foreground hover:text-foreground"
|
||||
onClick={toggleCollapse}
|
||||
>
|
||||
{isCollapsed ? (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
) : (
|
||||
<>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
<span className="text-xs font-semibold uppercase tracking-wider">Collapse Sidebar</span>
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</aside>
|
||||
</>
|
||||
);
|
||||
}
|
||||
36
components/layout/SidebarProvider.tsx
Normal file
36
components/layout/SidebarProvider.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
|
||||
interface SidebarContextType {
|
||||
isOpen: boolean;
|
||||
isCollapsed: boolean;
|
||||
toggle: () => void;
|
||||
toggleCollapse: () => void;
|
||||
close: () => void;
|
||||
}
|
||||
|
||||
const SidebarContext = React.createContext<SidebarContextType | undefined>(undefined);
|
||||
|
||||
export function SidebarProvider({ children }: { children: React.ReactNode }) {
|
||||
const [isOpen, setIsOpen] = React.useState(false);
|
||||
const [isCollapsed, setIsCollapsed] = React.useState(false);
|
||||
|
||||
const toggle = React.useCallback(() => setIsOpen((prev) => !prev), []);
|
||||
const toggleCollapse = React.useCallback(() => setIsCollapsed((prev) => !prev), []);
|
||||
const close = React.useCallback(() => setIsOpen(false), []);
|
||||
|
||||
return (
|
||||
<SidebarContext.Provider value={{ isOpen, isCollapsed, toggle, toggleCollapse, close }}>
|
||||
{children}
|
||||
</SidebarContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useSidebar() {
|
||||
const context = React.useContext(SidebarContext);
|
||||
if (!context) {
|
||||
throw new Error('useSidebar must be used within a SidebarProvider');
|
||||
}
|
||||
return context;
|
||||
}
|
||||
Reference in New Issue
Block a user