57f2c543d1
- Replaced font references in globals.css to use DM Sans and JetBrains Mono for improved typography consistency. - Adjusted various components to utilize the new font styles, enhancing visual hierarchy and readability. - Updated layout properties in AppShell and Sidebar for better alignment and spacing. - Enhanced button styles to include a new subtle variant for improved UI flexibility. - Refactored SearchFilterBar to support active filter display, improving user interaction experience. - Made minor adjustments to the DashboardView and landing page components for better visual consistency.
53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { Squares2X2Icon, ListBulletIcon } from "@heroicons/react/24/outline";
|
|
import { cn } from "@/shared/utils";
|
|
|
|
export type ViewMode = "grid" | "list";
|
|
|
|
interface ViewToggleProps {
|
|
value: ViewMode;
|
|
onChange: (mode: ViewMode) => void;
|
|
className?: string;
|
|
}
|
|
|
|
export function ViewToggle({ value, onChange, className }: ViewToggleProps) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"inline-flex items-center rounded-lg border border-border/60 bg-muted/30 p-0.5",
|
|
className
|
|
)}
|
|
>
|
|
<button
|
|
type="button"
|
|
onClick={() => onChange("grid")}
|
|
className={cn(
|
|
"inline-flex items-center justify-center h-7 w-7 rounded-md transition-all duration-200",
|
|
value === "grid"
|
|
? "bg-background text-foreground shadow-sm"
|
|
: "text-muted-foreground hover:text-foreground"
|
|
)}
|
|
aria-label="Grid view"
|
|
aria-pressed={value === "grid"}
|
|
>
|
|
<Squares2X2Icon className="h-3.5 w-3.5" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => onChange("list")}
|
|
className={cn(
|
|
"inline-flex items-center justify-center h-7 w-7 rounded-md transition-all duration-200",
|
|
value === "list"
|
|
? "bg-background text-foreground shadow-sm"
|
|
: "text-muted-foreground hover:text-foreground"
|
|
)}
|
|
aria-label="List view"
|
|
aria-pressed={value === "list"}
|
|
>
|
|
<ListBulletIcon className="h-3.5 w-3.5" />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|