refactor: ♻️ extract redondant grid template to AutoGrid

components/AutoGrid.css

@@ -0,0 +1,5 @@
+.components__auto_grid {
+    display: 'grid';
+    gap: var(--_gap);
+    margin-block: var(--_gap);
+}

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>
+	)
+}

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
+			<AutoGrid columnWidth='15rem'>
-				style={{
-					display: 'grid',
-					gridTemplateColumns: 'repeat(auto-fit, minmax(15rem, 1fr));',
-					gap: 'var(--_gap)',
-				}}
-			>
 				{blogMock.map(BlogCard)}
-			</section>
+			</AutoGrid>
 		</>
 	)
 }

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'

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
+			<AutoGrid columnWidth='15rem'>
-				style={{
-					display: 'grid',
-					gridTemplateColumns: 'repeat(auto-fit, minmax(15rem, 1fr));',
-					gap: 'var(--_gap)',
-				}}
-			>
 				{machineMock.map(MachineCard)}
-			</section>
+			</AutoGrid>
 		</>
 	)
 }

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
+			<AutoGrid columnWidth='30rem'>
-				style={{
-					display: 'grid',
-					gridTemplateColumns: 'repeat(auto-fit, minmax(30rem, 1fr));',
-					gap: 'var(--_gap)',
-				}}
-			>
 				{projectMock.map(ProjectCard)}
-			</section>
+			</AutoGrid>
 		</>
 	)
 }

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');