New components "BlogGrid"

src/components/BlogGrid/BlogGrid.styles.tsx

@@ -0,0 +1,30 @@
+import styled, { css } from 'styled-components'
+
+import CardWrapperAPP from '@/components/CardWrapper'
+
+export const BlogPostWrapper = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(calc(30% - 1rem), 1fr));
+  grid-gap: 1rem;
+  gap: 1rem;
+`
+
+export const BlogGridFooter = styled.footer`
+  padding: 3rem 0 1rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+`
+
+export const CardWrapper = styled(CardWrapperAPP)<{ $loading?: boolean }>`
+    filter: grayscale(0) blur(0px);
+    filter: ${
+      ({ $loading }) => $loading
+        ? css`grayscale(1) blur(5px)`
+        : css`grayscale(0) blur(0px)`
+      };
+    transition: filter ease;
+    transition-duration: .6s;
+`

src/components/BlogGrid/BlogGrid.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import { ReactNode, useEffect, useState } from 'react'
+
+import Section from '@/components/Section'
+import BlogCard, { PostItem } from '@/components/BlogCard'
+
+import { BlogGridFooter, CardWrapper } from './BlogGrid.styles'
+
+interface BlogGridProps {
+  title?: string
+  header?: ReactNode
+  footer?: ReactNode
+  posts?: PostItem[]
+  nbPost?: number
+  isLoading?: boolean
+  isVisible?: boolean
+}
+
+function BlogGrid({ title, header, footer, posts, nbPost, isLoading, isVisible }: BlogGridProps) {
+  const [loading, setLoading] = useState(isLoading ?? true)
+
+  useEffect(() => {
+    if (posts && posts.length) {
+      setLoading(false)
+    }
+  }, [posts])
+
+  return (
+    <Section title={title} isVisible={isVisible}>
+      {header}
+
+      <CardWrapper $loading={isLoading}>
+        {
+          !posts || loading
+            ? 'Chargement en cours...'
+            : posts.slice(0, nbPost).map(post =>
+              <BlogCard key={post.title} post={post} />
+            )
+        }
+      </CardWrapper>
+
+      {footer && (
+        <BlogGridFooter>{footer}</BlogGridFooter>
+      )}
+    </Section>
+  )
+}
+
+export default BlogGrid

src/components/BlogGrid/index.ts

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