From 3e72866a0880b6e9007924bd61ec0b31367ac1aa Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Fri, 2 Aug 2024 20:55:01 +0500 Subject: [PATCH] feat: add dark theme --- TODO.md | 2 +- app/App.tsx | 2 +- app/components/Comments/Comments.Main.tsx | 30 +- app/components/Navbar/Navbar.tsx | 291 ++++++++++++------ .../RelatedSection/RelatedSection.tsx | 2 +- .../ReleaseCourusel.module.css | 2 + .../ReleaseCourusel/ReleaseCourusel.tsx | 2 +- .../ReleaseInfo/ReleaseInfo.Basics.tsx | 4 +- .../ReleaseInfo/ReleaseInfo.Info.tsx | 10 +- .../ReleaseInfo/ReleaseInfo.Rating.tsx | 4 +- .../ReleaseInfo/ReleaseInfo.Related.tsx | 2 +- .../ReleaseInfo/ReleaseInfo.UserList.tsx | 5 +- .../ReleaseLink/ReleaseLink.16_9.tsx | 8 +- .../ReleasePlayer/ReleasePlayer.tsx | 27 +- .../ReleaseSection/ReleaseSection.tsx | 2 +- app/layout.tsx | 6 +- app/pages/BookmarksCategory.tsx | 4 +- app/pages/Favorites.tsx | 4 +- app/pages/History.tsx | 2 +- app/pages/Related.tsx | 2 +- app/store/preferences.ts | 36 ++- tailwind.config.js | 29 +- 22 files changed, 314 insertions(+), 162 deletions(-) diff --git a/TODO.md b/TODO.md index aad0a1f..a74038a 100644 --- a/TODO.md +++ b/TODO.md @@ -76,7 +76,7 @@ ## Стиль -- [ ] Тёмная тема +- [X] Тёмная тема - [ ] Больше метаданных для превью ссылки страницы ## Баги diff --git a/app/App.tsx b/app/App.tsx index d122cc3..e908c30 100644 --- a/app/App.tsx +++ b/app/App.tsx @@ -12,7 +12,7 @@ export const App = (props) => { }, []); return ( - + {props.children} diff --git a/app/components/Comments/Comments.Main.tsx b/app/components/Comments/Comments.Main.tsx index 76f7ad7..a38eb79 100644 --- a/app/components/Comments/Comments.Main.tsx +++ b/app/components/Comments/Comments.Main.tsx @@ -19,7 +19,7 @@ export const CommentsMain = (props: { - {props.comments.map((comment: any) => ( - - ))} +
+ {props.comments.map((comment: any) => ( + + ))} +
); diff --git a/app/components/Navbar/Navbar.tsx b/app/components/Navbar/Navbar.tsx index 04e55bb..6ef9b0d 100644 --- a/app/components/Navbar/Navbar.tsx +++ b/app/components/Navbar/Navbar.tsx @@ -2,11 +2,20 @@ import Link from "next/link"; import { usePathname } from "next/navigation"; import { useUserStore } from "#/store/auth"; -import { Dropdown } from "flowbite-react"; +import { usePreferencesStore } from "#/store/preferences"; +import { + Dropdown, + Modal, + Button, + DarkThemeToggle, + useThemeMode, +} from "flowbite-react"; +import { useState } from "react"; export const Navbar = () => { const pathname = usePathname(); const userStore: any = useUserStore((state) => state); + const [isSettingModalOpen, setIsSettingModalOpen] = useState(false); const navLinks = [ { @@ -57,47 +66,125 @@ export const Navbar = () => { ]; return ( -
-
- + {userStore.isAuth ? ( +
+ + + + + + Профиль + + + {navLinks.map((link) => { + return ( + + + + + {link.title} + + + + ); + })} + { + setIsSettingModalOpen(true); + }} + className="flex items-center gap-1 text-sm md:text-base" + > + + Настройки + + { + userStore.logout(); + }} + className="flex items-center gap-1 text-sm md:text-base" + > + + Выйти + + +
+ ) : ( { }} > - + - Профиль + + Войти + - {navLinks.map((link) => { - return ( - - - - - {link.title} - - - - ); - })} { - userStore.logout(); + setIsSettingModalOpen(true); }} - className="text-sm md:text-base" + className="flex items-center gap-1 text-sm md:text-base" > - Выйти + Настройки -
- ) : ( - - - - Войти - - - )} - -
+ )} + + + + + ); +}; + +const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => { + const preferenceStore = usePreferencesStore(); + + const { computedMode, setMode } = useThemeMode(); + + return ( + props.setIsOpen(false)} + > + Настройки + +
+
+

Тема

+ + + + +
+
+ + ); }; diff --git a/app/components/RelatedSection/RelatedSection.tsx b/app/components/RelatedSection/RelatedSection.tsx index e9a75b2..5f504f9 100644 --- a/app/components/RelatedSection/RelatedSection.tsx +++ b/app/components/RelatedSection/RelatedSection.tsx @@ -29,7 +29,7 @@ export const RelatedSection = (props: any) => { {props.release_count} {declension} во франшизе

-
+

Перейти

diff --git a/app/components/ReleaseCourusel/ReleaseCourusel.module.css b/app/components/ReleaseCourusel/ReleaseCourusel.module.css index 157046c..fce52de 100644 --- a/app/components/ReleaseCourusel/ReleaseCourusel.module.css +++ b/app/components/ReleaseCourusel/ReleaseCourusel.module.css @@ -9,5 +9,7 @@ @media (hover: hover) { .section:hover .swiper-button { display: flex !important; + width: 64px; + height: 64px; } } diff --git a/app/components/ReleaseCourusel/ReleaseCourusel.tsx b/app/components/ReleaseCourusel/ReleaseCourusel.tsx index c3b5482..faaa3cb 100644 --- a/app/components/ReleaseCourusel/ReleaseCourusel.tsx +++ b/app/components/ReleaseCourusel/ReleaseCourusel.tsx @@ -39,7 +39,7 @@ export const ReleaseCourusel = (props: { return (
-
+

{props.sectionTitle}

diff --git a/app/components/ReleaseInfo/ReleaseInfo.Basics.tsx b/app/components/ReleaseInfo/ReleaseInfo.Basics.tsx index 53ba3e4..2aa6a14 100644 --- a/app/components/ReleaseInfo/ReleaseInfo.Basics.tsx +++ b/app/components/ReleaseInfo/ReleaseInfo.Basics.tsx @@ -15,10 +15,10 @@ export const ReleaseInfoBasics = (props: { >
-

+

{props.title.ru}

-

+

{props.title.original}

diff --git a/app/components/ReleaseInfo/ReleaseInfo.Info.tsx b/app/components/ReleaseInfo/ReleaseInfo.Info.tsx index 95cf5bc..5856351 100644 --- a/app/components/ReleaseInfo/ReleaseInfo.Info.tsx +++ b/app/components/ReleaseInfo/ReleaseInfo.Info.tsx @@ -53,7 +53,7 @@ export const ReleaseInfoInfo = (props: { - + {props.episodes.released ? props.episodes.released : "?"} @@ -64,7 +64,7 @@ export const ReleaseInfoInfo = (props: { - + {props.category} @@ -76,7 +76,7 @@ export const ReleaseInfoInfo = (props: { - + {props.studio && ( @@ -112,7 +112,7 @@ export const ReleaseInfoInfo = (props: { - + {props.genres && @@ -129,7 +129,7 @@ export const ReleaseInfoInfo = (props: { {props.status.toLowerCase() == "анонс" && ( - + {props.aired_on_date != 0 ? ( diff --git a/app/components/ReleaseInfo/ReleaseInfo.Rating.tsx b/app/components/ReleaseInfo/ReleaseInfo.Rating.tsx index 379b422..dbe1be0 100644 --- a/app/components/ReleaseInfo/ReleaseInfo.Rating.tsx +++ b/app/components/ReleaseInfo/ReleaseInfo.Rating.tsx @@ -46,7 +46,7 @@ export const ReleaseInfoRating = (props: {