From fa3fc07d85e7327ed2a22b4b9df40138cdf75caa Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Fri, 11 Nov 2022 20:45:47 -0500
Subject: [PATCH] fix(striker-ui): add custom Grid

---
 striker-ui/components/Grid.tsx | 33 +++++++++++++++++++++++++++++++++
 striker-ui/types/Grid.d.ts     | 17 +++++++++++++++++
 2 files changed, 50 insertions(+)
 create mode 100644 striker-ui/components/Grid.tsx
 create mode 100644 striker-ui/types/Grid.d.ts

diff --git a/striker-ui/components/Grid.tsx b/striker-ui/components/Grid.tsx
new file mode 100644
index 00000000..d7763c8a
--- /dev/null
+++ b/striker-ui/components/Grid.tsx
@@ -0,0 +1,33 @@
+import { Grid as MUIGrid } from '@mui/material';
+import { FC, useMemo } from 'react';
+
+const Grid: FC<GridProps> = ({
+  calculateItemBreakpoints = () => ({ xs: 1 }),
+  layout,
+  ...restGridProps
+}) => {
+  const itemElements = useMemo(() => {
+    const items = Object.entries(layout);
+
+    return items.map(([itemId, itemGridProps], index) => {
+      const key = itemId;
+
+      return (
+        <MUIGrid
+          {...calculateItemBreakpoints(index, key)}
+          key={key}
+          item
+          {...itemGridProps}
+        />
+      );
+    });
+  }, [calculateItemBreakpoints, layout]);
+
+  return (
+    <MUIGrid container {...restGridProps}>
+      {itemElements}
+    </MUIGrid>
+  );
+};
+
+export default Grid;
diff --git a/striker-ui/types/Grid.d.ts b/striker-ui/types/Grid.d.ts
new file mode 100644
index 00000000..01880dca
--- /dev/null
+++ b/striker-ui/types/Grid.d.ts
@@ -0,0 +1,17 @@
+type GridLayout = {
+  [id: string]: import('@mui/material').GridProps;
+};
+
+type GridOptionalProps = {
+  calculateItemBreakpoints?: (
+    index: number,
+    key: string,
+  ) => Partial<
+    Pick<import('@mui/material').GridProps, 'xs' | 'sm' | 'md' | 'lg' | 'xl'>
+  >;
+};
+
+type GridProps = import('@mui/material').GridProps &
+  GridOptionalProps & {
+    layout: GridLayout;
+  };