frontend: fix <Image />

2025-04-05 07:44:38 +00:00 · 2024-04-23 22:23:11 +05:00 · 2024-04-23 22:23:11 +05:00 · a03deddbc0
commit a03deddbc0
parent 58ed4007df
6 changed files with 69 additions and 70 deletions
--- a/frontend/app/components/NavigationRail/NavigationRail.jsx
+++ b/frontend/app/components/NavigationRail/NavigationRail.jsx
@ -38,7 +38,13 @@ export const NavigationRail = (props) => {
  return (
    <nav className="left">
      <button className="circle transparent ">
-        <Image className="responsive" src="/favicon.ico" alt="Ваш профиль" />
+        <Image
+          className="responsive"
+          src="/favicon.ico"
+          alt="Ваш профиль"
+          width="64"
+          height="64"
+        />
      </button>

      {items.map((item) => {
--- a/frontend/app/components/ReleaseCard/ReleaseCard.jsx
+++ b/frontend/app/components/ReleaseCard/ReleaseCard.jsx
@ -1,5 +1,3 @@
-"use client";
-
 import Link from "next/link";
 import Image from "next/image";

@ -10,14 +8,21 @@ export const ReleaseCard = (props) => {
        className="no-padding round fill"
        style={{ width: 284, height: 508 }}
      >
-        <Image
-          className="responsive large top-round"
-          src={props.poster}
-          alt=""
-        />
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <div style={{ aspectRatio: "1/1" }}>
+          <Image
+            className="responsive large top-round"
+            layout="fill"
+            objectFit="cover"
+            style={{ width: "100%", height: "100%", aspectRatio: "1/1" }}
+            src={props.poster}
+            alt=""
+            sizes={"100vw"}
+          />
+        </div>
        <div className="padding">
-          <h6>{`${props.title.substring(0, 36)}${
-            [...props.title].length > 36 ? "..." : ""
+          <h6>{`${props.title.substring(0, 30)}${
+            [...props.title].length > 30 ? "..." : ""
          }`}</h6>
          <p>{`${props.description}${
            [...props.description].length > 160 ? "..." : ""
--- a/frontend/app/search/page.js
+++ b/frontend/app/search/page.js
@ -7,10 +7,10 @@ import { usePathname, useRouter } from "next/navigation";
 import { CardList } from "@/app/components/CardList/CardList";
 import { useSearchParams } from "next/navigation";

-export function saveSearches(search) {
+function saveSearches(search) {
  localStorage.setItem("searches", search);
 }
-export function getSearches() {
+function getSearches() {
  return localStorage.getItem("searches");
 }

--- a/frontend/next.config.mjs
+++ b/frontend/next.config.mjs
@ -1,4 +1,13 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "anixstatic.com",
+      },
+    ],
+  },
+};

 export default nextConfig;
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@ -509,18 +509,6 @@
        "balanced-match": "^1.0.0"
      }
    },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
      "version": "9.0.3",
      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
@ -551,12 +539,6 @@
        "node": ">=10"
      }
    },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
-    },
    "node_modules/@typescript-eslint/visitor-keys": {
      "version": "7.2.0",
      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.2.0.tgz",
@ -1059,6 +1041,24 @@
      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
      "dev": true
    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
    "node_modules/concat-map": {
      "version": "0.0.1",
      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@ -1802,26 +1802,6 @@
        "url": "https://github.com/chalk/chalk?sponsor=1"
      }
    },
-    "node_modules/eslint/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/eslint/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true,
-      "peer": true
-    },
    "node_modules/eslint/node_modules/escape-string-regexp": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@ -3010,6 +2990,18 @@
        "loose-envify": "cli.js"
      }
    },
+    "node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
    "node_modules/magic-string": {
      "version": "0.30.10",
      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz",
@ -4503,24 +4495,6 @@
        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
      }
    },
-    "node_modules/wrap-ansi-cjs/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
      "version": "8.0.0",
      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@ -4587,6 +4561,12 @@
      "dev": true,
      "peer": true
    },
+    "node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
+    },
    "node_modules/yocto-queue": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@ -1,6 +1,5 @@
 {
  "name": "frontend",
-  "type": "module",
  "version": "0.1.0",
  "private": true,
  "scripts": {