chore: migrate to new flowbite-react

2025-04-29 09:29:41 +05:00 · 2025-04-04 00:29:19 +05:00 · 2025-04-04 00:29:19 +05:00 · 329448c9fc
commit 329448c9fc
parent 8daab3b3c1
32 changed files with 650 additions and 344 deletions
--- a/app/components/Profile/Profile.BlockedUsersModal.tsx
+++ b/app/components/Profile/Profile.BlockedUsersModal.tsx
@ -1,6 +1,6 @@
 import { ENDPOINTS } from "#/api/config";
 import { tryCatchAPI, unixToDate, useSWRfetcher } from "#/api/utils";
-import { Avatar, Button, Modal, useThemeMode } from "flowbite-react";
+import { Avatar, Button, Modal, ModalHeader, useThemeMode } from "flowbite-react";
 import { useCallback, useEffect, useState } from "react";
 import useSWRInfinite from "swr/infinite";
 import { Spinner } from "../Spinner/Spinner";
@ -130,7 +130,7 @@ export const ProfileBlockedUsersModal = (props: {
        onClose={() => props.setIsOpen(false)}
        size={"7xl"}
      >
-        <Modal.Header>Заблокированные пользователи</Modal.Header>
+        <ModalHeader>Заблокированные пользователи</ModalHeader>
        <div
          className="flex flex-col gap-2 p-4 overflow-y-auto"
          onScroll={handleScroll}
--- a/app/components/Profile/Profile.EditLoginModal.tsx
+++ b/app/components/Profile/Profile.EditLoginModal.tsx
@ -1,6 +1,6 @@
 "use client";

-import { Button, Modal, Textarea, useThemeMode } from "flowbite-react";
+import { Button, Modal, ModalBody, ModalFooter, ModalHeader, Textarea, useThemeMode } from "flowbite-react";
 import { ENDPOINTS } from "#/api/config";
 import { useEffect, useState } from "react";
 import { useSWRConfig } from "swr";
@ -138,8 +138,8 @@ export const ProfileEditLoginModal = (props: {
      onClose={() => props.setIsOpen(false)}
      size={"4xl"}
    >
-      <Modal.Header>Изменить никнейм</Modal.Header>
-      <Modal.Body>
+      <ModalHeader>Изменить никнейм</ModalHeader>
+      <ModalBody>
        {loading ?
          <div className="flex items-center justify-center py-8">
            <Spinner />
@ -173,8 +173,8 @@ export const ProfileEditLoginModal = (props: {
            }
          </>
        }
-      </Modal.Body>
-      <Modal.Footer>
+      </ModalBody>
+      <ModalFooter>
        {_loginData.is_change_available && (
          <Button
            color="blue"
@ -191,7 +191,7 @@ export const ProfileEditLoginModal = (props: {
        >
          Отмена
        </Button>
-      </Modal.Footer>
+      </ModalFooter>
    </Modal>
  );
 };
--- a/app/components/Profile/Profile.EditModal.tsx
+++ b/app/components/Profile/Profile.EditModal.tsx
@ -1,6 +1,6 @@
 "use client";

-import { FileInput, Label, Modal, useThemeMode } from "flowbite-react";
+import { FileInput, Label, Modal, ModalBody, ModalHeader, useThemeMode } from "flowbite-react";
 import { Spinner } from "../Spinner/Spinner";
 import useSWR from "swr";
 import { ENDPOINTS } from "#/api/config";
@ -201,8 +201,8 @@ export const ProfileEditModal = (props: {
        onClose={() => props.setIsOpen(false)}
        size={"7xl"}
      >
-        <Modal.Header>Редактирование профиля</Modal.Header>
-        <Modal.Body>
+        <ModalHeader>Редактирование профиля</ModalHeader>
+        <ModalBody>
          {prefLoading ?
            <Spinner />
          : <div className="flex flex-col gap-4">
@ -394,7 +394,7 @@ export const ProfileEditModal = (props: {
              </div>
            </div>
          }
-        </Modal.Body>
+        </ModalBody>
      </Modal>
      {props.token ?
        <>
--- a/app/components/Profile/Profile.EditPrivacyModal.tsx
+++ b/app/components/Profile/Profile.EditPrivacyModal.tsx
@ -1,6 +1,6 @@
 "use client";

-import { Modal, useThemeMode } from "flowbite-react";
+import { Modal, ModalBody, ModalHeader, useThemeMode } from "flowbite-react";
 import { ENDPOINTS } from "#/api/config";
 import { useState } from "react";
 import { toast } from "react-toastify";
@ -98,8 +98,8 @@ export const ProfileEditPrivacyModal = (props: {
      onClose={() => props.setIsOpen(false)}
      size={"4xl"}
    >
-      <Modal.Header>{setting_text[props.setting]}</Modal.Header>
-      <Modal.Body>
+      <ModalHeader>{setting_text[props.setting]}</ModalHeader>
+      <ModalBody>
        {props.setting != "none" ?
          <>
            <div className="flex flex-col gap-2">
@ -202,7 +202,7 @@ export const ProfileEditPrivacyModal = (props: {
            </div>
          </>
        : ""}
-      </Modal.Body>
+      </ModalBody>
    </Modal>
  );
 };
--- a/app/components/Profile/Profile.EditSocialModal.tsx
+++ b/app/components/Profile/Profile.EditSocialModal.tsx
@ -1,6 +1,15 @@
 "use client";

-import { Button, Modal, Label, TextInput, useThemeMode } from "flowbite-react";
+import {
+  Button,
+  Label,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  TextInput,
+  useThemeMode,
+} from "flowbite-react";
 import { Spinner } from "../Spinner/Spinner";
 import { ENDPOINTS } from "#/api/config";
 import { useEffect, useState } from "react";
@ -164,8 +173,8 @@ export const ProfileEditSocialModal = (props: {
      onClose={() => props.setIsOpen(false)}
      size={"4xl"}
    >
-      <Modal.Header>Соц. сети</Modal.Header>
-      <Modal.Body>
+      <ModalHeader>Соц. сети</ModalHeader>
+      <ModalBody>
        <p className="p-2 text-gray-400 border-2 border-gray-200 rounded-md dark:border-gray-500 dark:text-gray-300">
          Укажите ссылки на свои социальные сети, чтобы другие пользователи
          могли с вами связаться
@ -177,7 +186,7 @@ export const ProfileEditSocialModal = (props: {
        : <div className="flex flex-col gap-4 py-4">
            <div>
              <div className="block mb-2">
-                <Label htmlFor="vk-page" value="ВКонтакте" />
+                <Label htmlFor="vk-page">ВКонтакте</Label>
              </div>
              <TextInput
                id="vk-page"
@ -189,7 +198,7 @@ export const ProfileEditSocialModal = (props: {
            </div>
            <div>
              <div className="block mb-2">
-                <Label htmlFor="tg-page" value="Telegram" />
+                <Label htmlFor="tg-page">Telegram</Label>
              </div>
              <TextInput
                id="tg-page"
@ -201,7 +210,7 @@ export const ProfileEditSocialModal = (props: {
            </div>
            <div>
              <div className="block mb-2">
-                <Label htmlFor="discord-page" value="Discord" />
+                <Label htmlFor="discord-page">Discord</Label>
              </div>
              <TextInput
                id="discord-page"
@ -213,7 +222,7 @@ export const ProfileEditSocialModal = (props: {
            </div>
            <div>
              <div className="block mb-2">
-                <Label htmlFor="inst-page" value="Instagram" />
+                <Label htmlFor="inst-page">Instagram</Label>
              </div>
              <TextInput
                id="inst-page"
@ -225,7 +234,7 @@ export const ProfileEditSocialModal = (props: {
            </div>
            <div>
              <div className="block mb-2">
-                <Label htmlFor="tt-page" value="TikTok" />
+                <Label htmlFor="tt-page">TikTok</Label>
              </div>
              <TextInput
                id="tt-page"
@ -237,8 +246,8 @@ export const ProfileEditSocialModal = (props: {
            </div>
          </div>
        }
-      </Modal.Body>
-      <Modal.Footer>
+      </ModalBody>
+      <ModalFooter>
        <Button
          color="blue"
          onClick={() => _setSocialSetting()}
@ -253,7 +262,7 @@ export const ProfileEditSocialModal = (props: {
        >
          Отмена
        </Button>
-      </Modal.Footer>
+      </ModalFooter>
    </Modal>
  );
 };
--- a/app/components/Profile/Profile.EditStatusModal.tsx
+++ b/app/components/Profile/Profile.EditStatusModal.tsx
@ -1,6 +1,6 @@
 "use client";

-import { Button, Modal, Textarea, useThemeMode } from "flowbite-react";
+import { Button, Modal, ModalBody, ModalFooter, ModalHeader, Textarea, useThemeMode } from "flowbite-react";
 import { ENDPOINTS } from "#/api/config";
 import { useEffect, useState } from "react";
 import { useSWRConfig } from "swr";
@ -96,8 +96,8 @@ export const ProfileEditStatusModal = (props: {
      onClose={() => props.setIsOpen(false)}
      size={"4xl"}
    >
-      <Modal.Header>Изменить статус</Modal.Header>
-      <Modal.Body>
+      <ModalHeader>Изменить статус</ModalHeader>
+      <ModalBody>
        <Textarea
          disabled={loading}
          rows={3}
@ -111,8 +111,8 @@ export const ProfileEditStatusModal = (props: {
        <p className="text-sm text-right text-gray-500 dark:text-gray-300">
          {_stringLength}/80
        </p>
-      </Modal.Body>
-      <Modal.Footer>
+      </ModalBody>
+      <ModalFooter>
        <Button
          color="blue"
          onClick={() => _setStatusSetting()}
@ -123,7 +123,7 @@ export const ProfileEditStatusModal = (props: {
        <Button color="red" onClick={() => props.setIsOpen(false)}>
          Отмена
        </Button>
-      </Modal.Footer>
+      </ModalFooter>
    </Modal>
  );
 };
--- a/app/components/Profile/Profile.ReleaseRatings.tsx
+++ b/app/components/Profile/Profile.ReleaseRatings.tsx
@ -1,10 +1,4 @@
-import {
-  Card,
-  RatingStar,
-  Rating,
-  Modal,
-  Button,
-} from "flowbite-react";
+import { Button, Card, Modal, ModalHeader, Rating, RatingStar } from "flowbite-react";

 import { unixToDate, useSWRfetcher } from "#/api/utils";
 import Link from "next/link";
@ -119,7 +113,7 @@ const ProfileReleaseRatingsModal = (props: {
      onClose={() => props.setIsOpen(false)}
      size={"4xl"}
    >
-      <Modal.Header>Оценки</Modal.Header>
+      <ModalHeader>Оценки</ModalHeader>
      <div
        className="flex flex-col gap-2 p-4 overflow-y-auto"
        onScroll={handleScroll}