New UI Primitices

components/ui/Grid/Grid.module.css

@@ -0,0 +1,86 @@
+.root {
+  --row-height: calc(100vh - 80px - 56px);
+  @apply grid grid-cols-1 lg:grid-cols-3 lg:grid-rows-2 gap-0;
+
+  & > * {
+    @apply row-span-1 lg:col-span-1 bg-black box-border overflow-hidden;
+    height: 500px;
+    max-height: 800px;
+
+    @screen lg {
+      height: inherit;
+    }
+  }
+}
+
+.layoutA {
+  & > div:nth-child(6n + 1),
+  & > div:nth-child(6n + 5) {
+    @apply row-span-2 lg:col-span-2 bg-violet;
+    height: var(--row-height);
+  }
+
+  & > div:nth-child(6n + 5) {
+    @apply bg-blue;
+  }
+
+  & > div:nth-child(6n + 3) {
+    @apply bg-pink;
+  }
+
+  & > div:nth-child(6n + 6) {
+    @apply bg-cyan;
+  }
+}
+
+.layoutB {
+  & > div:nth-child(6n + 2) {
+    @apply row-span-2 lg:col-span-2 bg-blue;
+    height: var(--row-height);
+  }
+
+  & > div:nth-child(6n + 4) {
+    @apply row-span-2 lg:col-span-2 bg-violet;
+    height: var(--row-height);
+  }
+
+  & > div:nth-child(6n + 3) {
+    @apply bg-pink;
+  }
+
+  & > div:nth-child(6n + 6) {
+    @apply bg-cyan;
+  }
+}
+
+.layoutC {
+  & > div:nth-child(12n + 1) {
+    @apply row-span-2 lg:col-span-2 bg-violet;
+    height: var(--row-height);
+  }
+
+  & > div:nth-child(12n + 8) {
+    @apply row-span-2 lg:col-span-2 bg-cyan;
+    height: var(--row-height);
+  }
+
+  & > div:nth-child(6n + 3) {
+    @apply bg-pink;
+  }
+}
+
+.layoutD {
+  & > div:nth-child(12n + 2) {
+    @apply row-span-2 lg:col-span-2 bg-violet;
+    height: var(--row-height);
+  }
+
+  & > div:nth-child(12n + 7) {
+    @apply row-span-2 lg:col-span-2 bg-cyan;
+    height: var(--row-height);
+  }
+
+  & > div:nth-child(6n + 3) {
+    @apply bg-pink;
+  }
+}

components/ui/Grid/Grid.tsx

@@ -0,0 +1,40 @@
+import cn from 'classnames'
+import { FC, ReactNode, Component } from 'react'
+import s from './Grid.module.css'
+
+interface Props {
+  className?: string
+  children?: any
+  items: [any] | any
+  layout?: 'A' | 'B' | 'C' | 'D'
+  wrapper?: ReactNode | Component | any
+}
+
+const DefaultWrapper: FC<Props> = ({ children }) => <div>{children}</div> // DEFAULT ITEMS WRAPPER
+
+const Grid: FC<Props> = ({
+  items = [],
+  className,
+  layout = 'A',
+  wrapper: Component = DefaultWrapper,
+}) => {
+  const rootClassName = cn(
+    s.root,
+    {
+      [s.layoutA]: layout === 'A',
+      [s.layoutB]: layout === 'B',
+      [s.layoutC]: layout === 'C',
+      [s.layoutD]: layout === 'D',
+    },
+    className
+  )
+  return (
+    <div className={rootClassName}>
+      {items.map((data: any) => (
+        <Component {...data} />
+      ))}
+    </div>
+  )
+}
+
+export default Grid

components/ui/Grid/index.ts

@@ -0,0 +1 @@
+export { default } from './Grid'