Files
ember-market-frontend/components/dashboard/widget-settings.tsx
g fe01f31538
Some checks failed
Build Frontend / build (push) Failing after 7s
Refactor UI imports and update component paths
Replaces imports from 'components/ui' with 'components/common' across the app and dashboard pages, and updates model and API imports to use new paths under 'lib'. Removes redundant authentication checks from several dashboard pages. Adds new dashboard components and utility files, and reorganizes hooks and services into the 'lib' directory for improved structure.
2026-01-13 05:02:13 +00:00

104 lines
4.3 KiB
TypeScript

"use client"
import { Button } from "@/components/common/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
DropdownMenuCheckboxItem,
} from "@/components/common/dropdown-menu"
import { Settings2, ChevronUp, ChevronDown, RotateCcw, Eye, EyeOff, Cog } from "lucide-react"
import { WidgetConfig } from "@/lib/types/dashboard"
interface WidgetSettingsProps {
widgets: WidgetConfig[]
onToggle: (id: string) => void
onMove: (id: string, direction: "up" | "down") => void
onReset: () => void
onConfigure?: (widget: WidgetConfig) => void
}
export function WidgetSettings({ widgets, onToggle, onMove, onReset, onConfigure }: WidgetSettingsProps) {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="sm" className="h-8 gap-2">
<Settings2 className="h-4 w-4" />
<span className="hidden sm:inline">Customize</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-64">
<DropdownMenuLabel className="flex items-center justify-between">
Dashboard Widgets
<Button
variant="ghost"
size="sm"
className="h-6 px-2 text-xs"
onClick={onReset}
>
<RotateCcw className="h-3 w-3 mr-1" />
Reset
</Button>
</DropdownMenuLabel>
<DropdownMenuSeparator />
{widgets.map((widget, index) => (
<div key={widget.id} className="flex items-center gap-1 px-2 py-1.5 hover:bg-muted/50 rounded-sm">
<button
onClick={() => onToggle(widget.id)}
className="flex-1 flex items-center gap-2 text-sm hover:text-foreground transition-colors"
>
{widget.visible ? (
<Eye className="h-4 w-4 text-primary" />
) : (
<EyeOff className="h-4 w-4 text-muted-foreground" />
)}
<span className={widget.visible ? "" : "text-muted-foreground line-through"}>
{widget.title}
</span>
</button>
<div className="flex items-center gap-0.5">
{widget.settings && onConfigure && (
<Button
variant="ghost"
size="icon"
className="h-6 w-6"
onClick={(e) => {
e.stopPropagation()
onConfigure(widget)
}}
title="Configure widget"
>
<Cog className="h-3 w-3" />
</Button>
)}
<Button
variant="ghost"
size="icon"
className="h-6 w-6"
onClick={() => onMove(widget.id, "up")}
disabled={index === 0}
>
<ChevronUp className="h-3 w-3" />
</Button>
<Button
variant="ghost"
size="icon"
className="h-6 w-6"
onClick={() => onMove(widget.id, "down")}
disabled={index === widgets.length - 1}
>
<ChevronDown className="h-3 w-3" />
</Button>
</div>
</div>
))}
</DropdownMenuContent>
</DropdownMenu>
)
}