Merge pull request #140 from tmshv/upd/next-image-updates

next/image updates

pages/[...slug].tsx

@@ -10,7 +10,7 @@ import { Youtube } from "@/components/Youtube"
 import { paramsToSlug } from "@/remote/lib"
 import { PageGrid } from "@/components/PageGrid"
 import { useRouter } from "next/router"
-import { FileCard } from "@/components/FIleCard"
+import { FileCard } from "@/components/FileCard"
 import { Picture } from "@/ui/Picture"
 import { tail } from "@/lib/array"
 import { getMenu, getPageBySlug, getUrls } from "@/remote/api"

src/components/CardGrid/index.tsx

@@ -5,10 +5,10 @@ export type CardGridProps = {
     style?: React.CSSProperties
 }
 
-export const CardGrid: React.FC<CardGridProps> = props => {
+export const CardGrid: React.FC<CardGridProps> = ({ children, style }) => {
     return (
-        <section className={s.grid} style={props.style}>
-            {props.children}
+        <section className={s.grid} style={style}>
+            {children}
         </section>
     )
 }

src/components/FileCard/filecard.module.css

@@ -10,6 +10,7 @@
 
 .image {
   box-shadow: var(--shadow);
+  object-fit: contain;
 }
 
 .info {

src/components/FileCard/index.tsx

@@ -37,7 +37,6 @@ export const FileCard: React.FC<FileCardProps> = props => {
                         alt={""}
                         width={100}
                         height={100}
-                        objectFit={"contain"}
                     />
                 </div>
             </a>

src/components/PageGrid/index.tsx

@@ -42,8 +42,10 @@ export const PageGrid: React.FC<PageGridProps> = props => {
                         href={item.url}
                         cover={(
                             <Image
-                                layout={"fill"}
-                                objectFit={"cover"}
+                                fill
+                                style={{
+                                    objectFit: "cover",
+                                }}
                                 src={item.cover.src}
                                 alt={item.cover.alt ?? ""}
                                 placeholder={item.cover.blur ? "blur" : "empty"}

src/components/TagList/index.tsx

@@ -3,7 +3,6 @@ import s from "./styles.module.css"
 import cx from "classnames"
 import { ITag } from "src/types"
 import { Button } from "@/ui/Button"
-import Image from "next/image"
 
 const directionClass = {
     horizontal: "",

src/ui/Picture/index.tsx

@@ -41,7 +41,6 @@ export const Picture: React.FC<PictureProps> = memo(({
                 alt={alt ?? ""}
                 width={width}
                 height={height}
-                layout={"responsive"}
                 blurDataURL={blur}
                 placeholder={blur ? "blur" : "empty"}
             />

src/ui/Picture/picture.module.css

@@ -22,6 +22,9 @@
     /* override nextjs blurred placeholder filter */
     /* need for border radius */
     filter: none !important;
+
+    width: 100%;
+    height: auto;
 }
 
 .pic figcaption {