refactor widget

src/app/space/components/widgetList.tsx

@@ -0,0 +1,51 @@
+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>
+  );
+}