WidgetGroup komponent

ui/src/components/ui/Widget/WidgetGroup.tsx

@@ -0,0 +1,29 @@
+import classNames from 'classnames'
+import Widget, { type colorType } from './Widget'
+import { WidgetEditDto } from '@/proxy/form/models'
+
+interface WidgetGroup {
+  colGap?: number
+  colSpan?: number
+  items: WidgetEditDto[]
+}
+
+export default function WidgetGroup(widgets: WidgetGroup[]) {
+  return widgets.map((group, gIdx) => (
+    <div key={gIdx} className={classNames(`grid grid-cols-12 gap-${group.colGap ?? 4}`)}>
+      {group.items.map((item: WidgetEditDto, order: number) => (
+        <div key={`${gIdx}-${order}`} className={classNames(`col-span-${group.colSpan ?? 3}`)}>
+          <Widget
+            title={item.title}
+            value={item.value}
+            color={item.color as colorType}
+            icon={item.icon ?? 'FaChartBar'}
+            subtitle={item.subTitle}
+            valueClassName={item.valueClassName}
+            onClick={() => item.onClick}
+          />
+        </div>
+      ))}
+    </div>
+  ))
+}