refactor: ♻️ extract redondant grid template to AutoGrid

This commit is contained in:
Julien Oculi 2024-02-15 14:02:22 +01:00
parent c57f46500a
commit 3dc9de3c2f
7 changed files with 37 additions and 24 deletions

5
components/AutoGrid.css Normal file
View file

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

21
components/AutoGrid.tsx Normal file
View file

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

View file

@ -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>
</>
)
}

View file

@ -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'

View file

@ -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>
</>
)
}

View file

@ -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>
</>
)
}

View file

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