52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
import { useCallback } from 'react';
|
|
|
|
import { useStorage } from '@libs/storage/provider';
|
|
|
|
import { TitleBar } from '@shared/titleBar';
|
|
|
|
import { DefaultWidgets, useWidgets } from '@stores/widgets';
|
|
|
|
import { Widget, WidgetGroup, WidgetGroupItem } from '@utils/types';
|
|
|
|
export function WidgetList({ params }: { params: Widget }) {
|
|
const { db } = useStorage();
|
|
const [setWidget, removeWidget] = useWidgets((state) => [
|
|
state.setWidget,
|
|
state.removeWidget,
|
|
]);
|
|
|
|
const openWidget = (widget: WidgetGroupItem) => {
|
|
setWidget(db, { kind: widget.kind, title: widget.title, content: '' });
|
|
removeWidget(db, params.id);
|
|
};
|
|
|
|
const renderItem = useCallback(
|
|
(row: WidgetGroup) => {
|
|
return (
|
|
<div className="flex flex-col gap-3">
|
|
<h3 className="font-medium text-white/50">{row.title}</h3>
|
|
<div className="grid grid-cols-3 gap-6">
|
|
{row.data.map((item, index) => (
|
|
<button onClick={() => openWidget(item)} key={index}>
|
|
<div className="inline-flex aspect-square h-full w-full transform-gpu flex-col items-center justify-center gap-2.5 rounded-2xl bg-white/5 hover:bg-white/10">
|
|
<h5 className="text-sm font-medium">{item.title}</h5>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
[DefaultWidgets]
|
|
);
|
|
|
|
return (
|
|
<div className="relative h-full shrink-0 grow-0 basis-[400px] overflow-hidden">
|
|
<TitleBar title="Add widget" />
|
|
<div className="flex flex-col gap-8 px-3">
|
|
{DefaultWidgets.map((row: WidgetGroup) => renderItem(row))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|