57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { Button } from "@heroui/react";
|
|
import Image from "next/image";
|
|
|
|
type ViewMode = "grid" | "list";
|
|
|
|
interface ViewToggleProps {
|
|
value: ViewMode;
|
|
onChange: (mode: ViewMode) => void;
|
|
}
|
|
|
|
export default function ViewToggle({ value, onChange }: ViewToggleProps) {
|
|
return (
|
|
<div className="bg-gray-200 dark:bg-gray-700 rounded-lg p-1 flex gap-0">
|
|
<Button
|
|
isIconOnly
|
|
size="sm"
|
|
variant="light"
|
|
onPress={() => onChange("list")}
|
|
className={`w-8 h-8 min-w-8 rounded-lg transition-all ${
|
|
value === "list"
|
|
? "bg-white dark:bg-gray-600 shadow-sm"
|
|
: "bg-transparent hover:bg-gray-300 dark:hover:bg-gray-600"
|
|
}`}
|
|
style={{ padding: 0 }}
|
|
>
|
|
<Image
|
|
src="/edit-list-unordered0.svg"
|
|
alt="List view"
|
|
width={24}
|
|
height={24}
|
|
/>
|
|
</Button>
|
|
<Button
|
|
isIconOnly
|
|
size="sm"
|
|
variant="light"
|
|
onPress={() => onChange("grid")}
|
|
className={`w-8 h-8 min-w-8 rounded-lg transition-all ${
|
|
value === "grid"
|
|
? "bg-white dark:bg-gray-600 shadow-sm"
|
|
: "bg-transparent hover:bg-gray-300 dark:hover:bg-gray-600"
|
|
}`}
|
|
style={{ padding: 0 }}
|
|
>
|
|
<Image
|
|
src="/menu-more-grid-small0.svg"
|
|
alt="Grid view"
|
|
width={24}
|
|
height={24}
|
|
/>
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|