home page strapi integration

src/components/Card/index.tsx

@@ -2,7 +2,6 @@ import s from './styles.module.css'
 
 import cx from 'classnames'
 import Link from 'next/link'
-import { Image } from '../Image'
 
 const layoutClass = {
     simple: s.simple,
@@ -13,11 +12,7 @@ export type CardLayout = 'simple' | 'featured'
 export type CardProps = {
     style?: React.CSSProperties
     href: string
-    img: {
-        alt: string
-        src: string
-        srcSet: string
-    }
+    cover: React.ReactNode
     layout: CardLayout
 }
 
@@ -26,11 +21,7 @@ export const Card: React.FC<CardProps> = props => (
         <Link href={props.href}>
             <a>
                 <div className={s.image}>
-                    <Image
-                        alt={props.img.alt}
-                        src={props.img.src}
-                        srcSet={props.img.srcSet}
-                    />
+                    {props.cover}
                 </div>
 
                 <div className={s.body}>

src/components/Card/styles.module.css

@@ -31,18 +31,6 @@
     height: 100%;
 }
 
-.image img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-
-    transition: all 150ms ease-out;
-
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-
 .body {
     background-color: var(--color-back);
     padding: var(--size-m);

src/components/PageGrid/index.tsx

@@ -1,3 +1,4 @@
+import Image from 'next/image'
 import { ImageSize, PageCardData } from 'src/types'
 import { CardGrid } from '../CardGrid'
 import { Card, CardLayout } from '../Card'
@@ -13,75 +14,53 @@ export type PageGridProps = {
 }
 
 export const PageGrid: React.FC<PageGridProps> = props => {
-    const [page, setPage] = useState(1)
-    const i = page * 24
-    const items = props.items.slice(0, i)
-    const onMore = useCallback(() => {
-        setPage(x => x + 1)
-    }, [])
-    const hasMore = i < props.items.length
-
     return (
-        <>
-            <CardGrid
-                style={{
-                    marginBottom: 'var(--size-m)',
-                }}
-            >
-                {items.map((item, i) => {
-                    const gridColumn = item.featured ? 'span 2' : 'auto'
-                    const layout: CardLayout = item.featured ? 'featured' : 'simple'
-                    const cover = item.coverSrc ?? process.env.APP_CARD_DEFAULT_IMAGE
-                    const src = cover
-                    const srcSet = imageSrcSet(src, [ImageSize.large, ImageSize.medium, ImageSize.small])
+        <CardGrid
+            style={{
+                marginBottom: 'var(--size-m)',
+            }}
+        >
+            {props.items.map(item => {
+                const gridColumn = item.featured ? 'span 2' : 'auto'
+                const layout: CardLayout = item.featured ? 'featured' : 'simple'
 
-                    const content = !item.featured
-                        ? (
-                            <Block
-                                direction={'vertical'}
-                            >
-                                {item.title}
-                                <Spacer />
+                const content = !item.featured
+                    ? (
+                        <Block
+                            direction={'vertical'}
+                        >
+                            {item.title}
+                            <Spacer />
+                            {!item.date ? null : (
                                 <Date style={{
                                     marginTop: 'var(--size-m)',
                                 }}>{item.date}</Date>
-                            </Block>
-                        ) : (
-                            item.title
-                        )
-
-                    return (
-                        <Card
-                            key={i}
-                            href={item.url}
-                            img={{
-                                alt: item.title,
-                                src,
-                                srcSet,
-                            }}
-                            layout={layout}
-                            style={{
-                                gridColumn,
-                            }}
-                        >
-                            {content}
-                        </Card>
+                            )}
+                        </Block>
+                    ) : (
+                        item.title
                     )
-                })}
-            </CardGrid>
-            <Block direction={'horizontal'} style={{
-                marginTop: 'var(--size-l)'
-            }}>
-                <Spacer />
-                <Button
-                    disabled={!hasMore}
-                    onClick={onMore}
-                    style={{
-                        flex: 2,
-                    }}
-                >Загрузить ещё</Button>
-                <Spacer />
-            </Block>
-        </>
+
+                return (
+                    <Card
+                        key={item.id}
+                        href={item.url}
+                        cover={(
+                            <Image
+                                layout={'fill'}
+                                objectFit={'cover'}
+                                src={item.cover.src}
+                            />
+                        )}
+                        layout={layout}
+                        style={{
+                            gridColumn,
+                        }}
+                    >
+                        {content}
+                    </Card>
+                )
+            })}
+        </CardGrid>
     )
 }