From 3dc9de3c2f504690f0e029f2ae07c3664f8a9857 Mon Sep 17 00:00:00 2001
From: Julien Oculi <xdrz.jot.sr@gmail.com>
Date: Thu, 15 Feb 2024 14:02:22 +0100
Subject: [PATCH] refactor: :recycle: extract redondant grid template to
 `AutoGrid`

---
 components/AutoGrid.css        |  5 +++++
 components/AutoGrid.tsx        | 21 +++++++++++++++++++++
 routes/blog/index.tsx          | 11 +++--------
 routes/index.tsx               |  1 +
 routes/machines/index.tsx      | 11 +++--------
 routes/projets/index.tsx       | 11 +++--------
 src/stylesheets/components.css |  1 +
 7 files changed, 37 insertions(+), 24 deletions(-)
 create mode 100644 components/AutoGrid.css
 create mode 100644 components/AutoGrid.tsx

diff --git a/components/AutoGrid.css b/components/AutoGrid.css
new file mode 100644
index 0000000..39a2748
--- /dev/null
+++ b/components/AutoGrid.css
@@ -0,0 +1,5 @@
+.components__auto_grid {
+    display: 'grid';
+    gap: var(--_gap);
+    margin-block: var(--_gap);
+}
\ No newline at end of file
diff --git a/components/AutoGrid.tsx b/components/AutoGrid.tsx
new file mode 100644
index 0000000..975d90f
--- /dev/null
+++ b/components/AutoGrid.tsx
@@ -0,0 +1,21 @@
+import { JSX } from 'preact'
+
+type Units = 'rem' | '%' | 'px'
+
+export function AutoGrid(
+	{ columnWidth, children }: {
+		columnWidth: `${number}${Units}`
+		children: JSX.Element | JSX.Element[]
+	},
+) {
+	return (
+		<div
+			class='components__auto_grid'
+			style={{
+				gridTemplateColumns: `repeat(auto-fit, minmax(${columnWidth}, 1fr));`,
+			}}
+		>
+			{children}
+		</div>
+	)
+}
diff --git a/routes/blog/index.tsx b/routes/blog/index.tsx
index 877f615..4566e1f 100644
--- a/routes/blog/index.tsx
+++ b/routes/blog/index.tsx
@@ -1,18 +1,13 @@
+import { AutoGrid } from '../../components/AutoGrid.tsx'
 import { BlogCard, blogMock } from '../../components/BlogCard.tsx'
 
 export default function Blog() {
 	return (
 		<>
 			<h1>Nos articles</h1>
-			<section
-				style={{
-					display: 'grid',
-					gridTemplateColumns: 'repeat(auto-fit, minmax(15rem, 1fr));',
-					gap: 'var(--_gap)',
-				}}
-			>
+			<AutoGrid columnWidth='15rem'>
 				{blogMock.map(BlogCard)}
-			</section>
+			</AutoGrid>
 		</>
 	)
 }
diff --git a/routes/index.tsx b/routes/index.tsx
index d78e90b..696753a 100644
--- a/routes/index.tsx
+++ b/routes/index.tsx
@@ -1,4 +1,5 @@
 import { Head } from '$fresh/runtime.ts'
+import { AutoGrid } from '../components/AutoGrid.tsx'
 import { BlogCard, blogMock } from '../components/BlogCard.tsx'
 import { CohabitInfoTable } from '../components/CohabitInfoTable.tsx'
 import { Heros } from '../components/Heros.tsx'
diff --git a/routes/machines/index.tsx b/routes/machines/index.tsx
index c4131c6..5fc1c43 100644
--- a/routes/machines/index.tsx
+++ b/routes/machines/index.tsx
@@ -1,18 +1,13 @@
+import { AutoGrid } from '../../components/AutoGrid.tsx'
 import { MachineCard, machineMock } from '../../components/MachineCard.tsx'
 
 export default function Machine() {
 	return (
 		<>
 			<h1>Nos machines</h1>
-			<section
-				style={{
-					display: 'grid',
-					gridTemplateColumns: 'repeat(auto-fit, minmax(15rem, 1fr));',
-					gap: 'var(--_gap)',
-				}}
-			>
+			<AutoGrid columnWidth='15rem'>
 				{machineMock.map(MachineCard)}
-			</section>
+			</AutoGrid>
 		</>
 	)
 }
diff --git a/routes/projets/index.tsx b/routes/projets/index.tsx
index 2e9bd0d..065e1a9 100644
--- a/routes/projets/index.tsx
+++ b/routes/projets/index.tsx
@@ -1,18 +1,13 @@
+import { AutoGrid } from '../../components/AutoGrid.tsx'
 import { ProjectCard, projectMock } from '../../components/ProjectCard.tsx'
 
 export default function Project() {
 	return (
 		<>
 			<h1>Nos Projets</h1>
-			<section
-				style={{
-					display: 'grid',
-					gridTemplateColumns: 'repeat(auto-fit, minmax(30rem, 1fr));',
-					gap: 'var(--_gap)',
-				}}
-			>
+			<AutoGrid columnWidth='30rem'>
 				{projectMock.map(ProjectCard)}
-			</section>
+			</AutoGrid>
 		</>
 	)
 }
diff --git a/src/stylesheets/components.css b/src/stylesheets/components.css
index 1337eb9..6d00ba5 100644
--- a/src/stylesheets/components.css
+++ b/src/stylesheets/components.css
@@ -6,5 +6,6 @@
 @import url('../../components/BlogCard.css');
 @import url('../../components/MachineCard.css');
 @import url('../../components/ProjectCard.css');
+@import url('../../components/AutoGrid.css');
 @import url('../../islands/ThemePicker.css');
 @import url('../../islands/SearchBox.css');