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 (
- <body className={`${inter.className} overflow-x-hidden`}>
+ <body className={`${inter.className} overflow-x-hidden dark:bg-[#0d1117] dark:text-white`}>
<Navbar />
{props.children}
</body>
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: {
</div>
<Button
size={"sm"}
- className="text-gray-500 border border-gray-600 rounded-full"
+ className="text-gray-500 border border-gray-600 rounded-full hover:bg-black hover:text-white hover:border-black dark:text-gray-400 dark:border-gray-500"
color="inline"
>
Показать все
@@ -45,19 +45,21 @@ export const CommentsMain = (props: {
Оставить комментарий
</Button>
</form>
- {props.comments.map((comment: any) => (
- <CommentsComment
- key={comment.id}
- profile={comment.profile}
- comment={{
- id: comment.id,
- timestamp: comment.timestamp,
- message: comment.message,
- likes: comment.likes_count,
- reply_count: comment.reply_count,
- }}
- />
- ))}
+ <div className="flex flex-col gap-2">
+ {props.comments.map((comment: any) => (
+ <CommentsComment
+ key={comment.id}
+ profile={comment.profile}
+ comment={{
+ id: comment.id,
+ timestamp: comment.timestamp,
+ message: comment.message,
+ likes: comment.likes_count,
+ reply_count: comment.reply_count,
+ }}
+ />
+ ))}
+ </div>
</div>
</Card>
);
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 (
- <header className="fixed bottom-0 left-0 z-50 w-full text-white bg-black sm:sticky sm:top-0">
- <div className="container flex items-center justify-between px-4 py-4 mx-auto">
- <nav className="flex gap-4">
- {navLinks.map((link) => {
- return (
- <Link
- key={link.id}
- href={link.href}
- className={`flex-col items-center sm:flex-row ${
- link.withAuthOnly && !userStore.isAuth
- ? "hidden"
- : link.mobileMenu
- ? "hidden sm:flex"
- : "flex"
- }`}
- >
- <span
- className={`iconify ${
- pathname == link.href ? link.iconActive : link.icon
- } w-6 h-6`}
- ></span>
- <span
- className={`${
- pathname == link.href ? "font-bold" : ""
- } text-xs sm:text-base`}
+ <>
+ <header className="fixed bottom-0 left-0 z-50 w-full text-white bg-black sm:sticky sm:top-0">
+ <div className="container flex items-center justify-between px-4 py-4 mx-auto">
+ <nav className="flex gap-4">
+ {navLinks.map((link) => {
+ return (
+ <Link
+ key={link.id}
+ href={link.href}
+ className={`flex-col items-center sm:flex-row ${
+ link.withAuthOnly && !userStore.isAuth
+ ? "hidden"
+ : link.mobileMenu
+ ? "hidden sm:flex"
+ : "flex"
+ }`}
>
- {link.title}
- </span>
- </Link>
- );
- })}
- </nav>
- {userStore.isAuth ? (
- <div className="flex flex-col items-center justify-center gap-1 text-xs sm:flex-row sm:text-base">
- <img
- src={userStore.user.avatar}
- alt=""
- className="w-6 h-6 rounded-full"
- />
+ <span
+ className={`iconify ${
+ pathname == link.href ? link.iconActive : link.icon
+ } w-6 h-6`}
+ ></span>
+ <span
+ className={`${
+ pathname == link.href ? "font-bold" : ""
+ } text-xs sm:text-base`}
+ >
+ {link.title}
+ </span>
+ </Link>
+ );
+ })}
+ </nav>
+ {userStore.isAuth ? (
+ <div className="flex flex-col items-center justify-center gap-1 text-xs sm:flex-row sm:text-base">
+ <img
+ src={userStore.user.avatar}
+ alt=""
+ className="w-6 h-6 rounded-full"
+ />
+ <Dropdown
+ label={userStore.user.login}
+ inline={true}
+ dismissOnClick={true}
+ theme={{
+ arrowIcon:
+ "ml-1 w-4 h-4 [transform:rotateX(180deg)] sm:transform-none",
+ }}
+ >
+ <Dropdown.Item className="text-sm md:text-base">
+ <Link
+ href={`/profile/${userStore.user.id}`}
+ className="flex items-center gap-1"
+ >
+ <span
+ className={`iconify ${
+ pathname == `/profile/${userStore.user.id}`
+ ? "font-bold mdi--user"
+ : "mdi--user-outline"
+ } w-4 h-4 sm:w-6 sm:h-6`}
+ ></span>
+ <span>Профиль</span>
+ </Link>
+ </Dropdown.Item>
+ {navLinks.map((link) => {
+ return (
+ <Dropdown.Item
+ key={link.id + "_mobile"}
+ className={`${
+ link.mobileMenu ? "block sm:hidden" : "hidden"
+ } text-sm md:text-base`}
+ >
+ <Link
+ href={link.href}
+ className={`flex items-center gap-1`}
+ >
+ <span
+ className={`iconify ${
+ pathname == link.href ? link.iconActive : link.icon
+ } w-4 h-4 sm:w-6 sm:h-6`}
+ ></span>
+ <span
+ className={`${
+ pathname == link.href ? "font-bold" : ""
+ }`}
+ >
+ {link.title}
+ </span>
+ </Link>
+ </Dropdown.Item>
+ );
+ })}
+ <Dropdown.Item
+ onClick={() => {
+ setIsSettingModalOpen(true);
+ }}
+ className="flex items-center gap-1 text-sm md:text-base"
+ >
+ <span
+ className={`iconify material-symbols--settings-outline-rounded w-4 h-4 sm:w-6 sm:h-6`}
+ ></span>
+ <span>Настройки</span>
+ </Dropdown.Item>
+ <Dropdown.Item
+ onClick={() => {
+ userStore.logout();
+ }}
+ className="flex items-center gap-1 text-sm md:text-base"
+ >
+ <span
+ className={`iconify material-symbols--logout-rounded w-4 h-4 sm:w-6 sm:h-6`}
+ ></span>
+ <span>Выйти</span>
+ </Dropdown.Item>
+ </Dropdown>
+ </div>
+ ) : (
<Dropdown
- label={userStore.user.login}
+ label="Меню"
inline={true}
dismissOnClick={true}
theme={{
@@ -106,76 +193,82 @@ export const Navbar = () => {
}}
>
<Dropdown.Item className="text-sm md:text-base">
- <Link href={`/profile/${userStore.user.id}`} className="flex items-center gap-1">
+ <Link
+ href="/login"
+ className="flex items-center gap-1"
+ >
<span
- className={`iconify ${pathname == `/profile/${userStore.user.id}` ? "font-bold mdi--user" : "mdi--user-outline"} w-4 h-4 sm:w-6 sm:h-6`}
+ className={`w-4 h-4 sm:w-6 sm:h-6 iconify ${
+ pathname == "/login"
+ ? "mdi--user-circle"
+ : "mdi--user-circle-outline"
+ }`}
></span>
- <span>Профиль</span>
+ <span
+ className={`${
+ pathname == "/login" ? "font-bold" : ""
+ } text-xs sm:text-base`}
+ >
+ Войти
+ </span>
</Link>
</Dropdown.Item>
- {navLinks.map((link) => {
- return (
- <Dropdown.Item
- key={link.id + "_mobile"}
- className={`${
- link.mobileMenu ? "block sm:hidden" : "hidden"
- } text-sm md:text-base`}
- >
- <Link
- href={link.href}
- className={`flex items-center gap-1`}
- >
- <span
- className={`iconify ${
- pathname == link.href ? link.iconActive : link.icon
- } w-4 h-4 sm:w-6 sm:h-6`}
- ></span>
- <span
- className={`${
- pathname == link.href ? "font-bold" : ""
- }`}
- >
- {link.title}
- </span>
- </Link>
- </Dropdown.Item>
- );
- })}
<Dropdown.Item
onClick={() => {
- userStore.logout();
+ setIsSettingModalOpen(true);
}}
- className="text-sm md:text-base"
+ className="flex items-center gap-1 text-sm md:text-base"
>
<span
- className={`iconify material-symbols--logout-rounded w-4 h-4 sm:w-6 sm:h-6`}
+ className={`iconify material-symbols--settings-outline-rounded w-4 h-4 sm:w-6 sm:h-6`}
></span>
- <span>Выйти</span>
+ <span>Настройки</span>
</Dropdown.Item>
</Dropdown>
- </div>
- ) : (
- <Link
- href="/login"
- className="flex flex-col items-center justify-center gap-1 sm:flex-row"
- >
- <span
- className={`w-6 h-6 iconify ${
- pathname == "/login"
- ? "mdi--user-circle"
- : "mdi--user-circle-outline"
- }`}
- ></span>
- <span
- className={`${
- pathname == "/login" ? "font-bold" : ""
- } text-xs sm:text-base`}
- >
- Войти
- </span>
- </Link>
- )}
- </div>
- </header>
+ )}
+ </div>
+ </header>
+ <SettingsModal
+ isOpen={isSettingModalOpen}
+ setIsOpen={setIsSettingModalOpen}
+ />
+ </>
+ );
+};
+
+const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
+ const preferenceStore = usePreferencesStore();
+
+ const { computedMode, setMode } = useThemeMode();
+
+ return (
+ <Modal
+ dismissible
+ show={props.isOpen}
+ onClose={() => props.setIsOpen(false)}
+ >
+ <Modal.Header>Настройки</Modal.Header>
+ <Modal.Body>
+ <div className="space-y-6">
+ <div className="flex items-center justify-between">
+ <p className="font-bold dark:text-white">Тема</p>
+ <Button.Group>
+ <Button
+ color={computedMode == "light" ? "blue" : "gray"}
+ onClick={() => setMode("light")}
+ >
+ Светлая
+ </Button>
+ <Button
+ color={computedMode == "dark" ? "blue" : "gray"}
+ onClick={() => setMode("dark")}
+ >
+ Темная
+ </Button>
+ </Button.Group>
+ </div>
+ </div>
+ </Modal.Body>
+ </Modal>
);
};
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} во франшизе
</p>
<Link href={`/related/${props.id}`}>
- <div className="flex items-center px-8 py-2 transition border border-black rounded-full hover:text-white hover:bg-black">
+ <div className="flex items-center px-8 py-2 transition border border-black rounded-full hover:text-white hover:bg-black dark:border-white hover:dark:text-black hover:dark:bg-white">
<p className="text-xl font-bold">Перейти</p>
<span className="w-6 h-6 iconify mdi--arrow-right"></span>
</div>
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 (
<section className={`${Styles.section}`}>
- <div className="flex justify-between px-4 py-2 border-b-2 border-black">
+ <div className="flex justify-between px-4 py-2 border-b-2 border-black dark:border-white">
<h1 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
{props.sectionTitle}
</h1>
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: {
></img>
<div className="flex flex-col max-w-2xl gap-2 text-sm md:text-base">
<div className="flex flex-col gap-1">
- <p className="text-xl font-bold text-black md:text-2xl">
+ <p className="text-xl font-bold text-black md:text-2xl dark:text-white">
{props.title.ru}
</p>
- <p className="text-sm text-gray-500 md:text-base">
+ <p className="text-sm text-gray-500 md:text-base dark:text-gray-400">
{props.title.original}
</p>
</div>
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: {
</Table.Row>
<Table.Row>
<Table.Cell className="py-0">
- <span className="w-8 h-8 iconify-color mdi--animation-play-outline "></span>
+ <span className="w-8 h-8 iconify-color mdi--animation-play-outline dark:invert"></span>
</Table.Cell>
<Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
{props.episodes.released ? props.episodes.released : "?"}
@@ -64,7 +64,7 @@ export const ReleaseInfoInfo = (props: {
</Table.Row>
<Table.Row>
<Table.Cell className="py-0">
- <span className="w-8 h-8 iconify-color mdi--calendar-outline "></span>
+ <span className="w-8 h-8 iconify-color mdi--calendar-outline dark:invert"></span>
</Table.Cell>
<Table.Cell className="font-medium text-gray-900 dark:text-white">
{props.category}
@@ -76,7 +76,7 @@ export const ReleaseInfoInfo = (props: {
</Table.Row>
<Table.Row>
<Table.Cell className="py-0">
- <span className="w-8 h-8 iconify-color mdi--people-group-outline "></span>
+ <span className="w-8 h-8 iconify-color mdi--people-group-outline dark:invert"></span>
</Table.Cell>
<Table.Cell className="font-medium text-gray-900 dark:text-white">
{props.studio && (
@@ -112,7 +112,7 @@ export const ReleaseInfoInfo = (props: {
</Table.Row>
<Table.Row>
<Table.Cell className="py-0">
- <span className="w-8 h-8 iconify-color mdi--tag-outline "></span>
+ <span className="w-8 h-8 iconify-color mdi--tag-outline dark:invert"></span>
</Table.Cell>
<Table.Cell className="font-medium text-gray-900 dark:text-white">
{props.genres &&
@@ -129,7 +129,7 @@ export const ReleaseInfoInfo = (props: {
{props.status.toLowerCase() == "анонс" && (
<Table.Row>
<Table.Cell className="py-0">
- <span className="w-8 h-8 iconify-color mdi--clock-outline "></span>
+ <span className="w-8 h-8 iconify-color mdi--clock-outline dark:invert"></span>
</Table.Cell>
<Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
{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: {
</p>
<Button
size={"xs"}
- className="text-gray-500 border border-gray-600 rounded-full"
+ className="text-gray-500 border border-gray-600 rounded-full hover:bg-black hover:text-white hover:border-black dark:text-gray-400 dark:border-gray-500"
color="inline"
>
изменить
@@ -55,7 +55,7 @@ export const ReleaseInfoRating = (props: {
) : (
<Button
size={"xs"}
- className="text-gray-500 border border-gray-600 rounded-full"
+ className="text-gray-500 border border-gray-600 rounded-full hover:bg-black hover:text-white hover:border-black dark:text-gray-400 dark:border-gray-500"
color="inline"
>
оценить
diff --git a/app/components/ReleaseInfo/ReleaseInfo.Related.tsx b/app/components/ReleaseInfo/ReleaseInfo.Related.tsx
index 85cd3bf..dbd6c40 100644
--- a/app/components/ReleaseInfo/ReleaseInfo.Related.tsx
+++ b/app/components/ReleaseInfo/ReleaseInfo.Related.tsx
@@ -17,7 +17,7 @@ export const ReleaseInfoRelated = (props: {
}) => {
return (
<Card>
- <div className="flex justify-between py-2 border-b-2 border-black">
+ <div className="flex justify-between py-2 border-b-2 border-black dark:border-white">
<h1>Связанные релизы</h1>
{props.related && (
<Link href={`/related/${props.related.id}`}>
diff --git a/app/components/ReleaseInfo/ReleaseInfo.UserList.tsx b/app/components/ReleaseInfo/ReleaseInfo.UserList.tsx
index 5ad4808..6909950 100644
--- a/app/components/ReleaseInfo/ReleaseInfo.UserList.tsx
+++ b/app/components/ReleaseInfo/ReleaseInfo.UserList.tsx
@@ -13,7 +13,7 @@ const lists = [
const DropdownTheme = {
floating: {
target:
- "flex-1 bg-blue-600 enabled:hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800",
+ "flex-1",
},
};
@@ -57,6 +57,7 @@ export const ReleaseInfoUserList = (props: {
label={lists[props.userList].name}
dismissOnClick={true}
theme={DropdownTheme}
+ color="blue"
>
{lists.map((list) => (
<Dropdown.Item
@@ -68,7 +69,7 @@ export const ReleaseInfoUserList = (props: {
))}
</Dropdown>
<Button
- className="bg-blue-600 enabled:hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+ color="blue"
onClick={() => {
_addToFavorite();
}}
diff --git a/app/components/ReleaseLink/ReleaseLink.16_9.tsx b/app/components/ReleaseLink/ReleaseLink.16_9.tsx
index 7e1d34b..ac7dc86 100644
--- a/app/components/ReleaseLink/ReleaseLink.16_9.tsx
+++ b/app/components/ReleaseLink/ReleaseLink.16_9.tsx
@@ -21,12 +21,14 @@ export const ReleaseLink169 = (props: any) => {
return (
<Link href={`/release/${props.id}`}>
<div className="w-full aspect-video group">
- <div className="relative w-full h-full overflow-hidden bg-gradient-to-t from-black to-transparent">
- <img
+ <div className="relative w-full h-full overflow-hidden bg-center bg-no-repeat bg-cover rounded-sm group-hover:animate-bg_zoom animate-bg_zoom_rev group-hover:[background-size:110%] " style={{
+ backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.9) 100%), url(${props.image})`,
+ }}>
+ {/* <img
className="absolute z-0 object-cover w-full h-full transition mix-blend-overlay group-hover:scale-110"
src={props.image}
alt=""
- />
+ /> */}
<div className="absolute flex flex-wrap items-start justify-start gap-0.5 sm:gap-1 left-2 top-2">
<Chip
bg_color={
diff --git a/app/components/ReleasePlayer/ReleasePlayer.tsx b/app/components/ReleasePlayer/ReleasePlayer.tsx
index bd799ce..240e57a 100644
--- a/app/components/ReleasePlayer/ReleasePlayer.tsx
+++ b/app/components/ReleasePlayer/ReleasePlayer.tsx
@@ -8,16 +8,10 @@ import { useState, useEffect } from "react";
const DropdownTheme = {
floating: {
- target:
- "w-full md:min-w-[256px] md:w-fit bg-blue-600 enabled:hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800",
+ target: "w-full md:min-w-[256px] md:w-fit",
},
};
-const ButtonThemeInactive =
- "bg-blue-600 enabled:hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800";
-const ButtonThemeActive =
- "bg-blue-800 dark:bg-blue-600 disabled:opacity-100 dark:disabled:opacity-100";
-
async function _fetch(url: string) {
const data = fetch(url)
.then((res) => {
@@ -103,10 +97,7 @@ export const ReleasePlayer = (props: { id: number }) => {
) : (
<>
<div className="flex flex-wrap gap-2">
- <Dropdown
- label={`Озвучка: ${selectedVoiceover.name}`}
- theme={DropdownTheme}
- >
+ <Dropdown label={`Озвучка: ${selectedVoiceover.name}`} color="blue">
{voiceoverInfo.map((voiceover: any) => (
<Dropdown.Item
key={`voiceover_${voiceover.id}`}
@@ -116,10 +107,7 @@ export const ReleasePlayer = (props: { id: number }) => {
</Dropdown.Item>
))}
</Dropdown>
- <Dropdown
- label={`Плеер: ${selectedSource.name}`}
- theme={DropdownTheme}
- >
+ <Dropdown label={`Плеер: ${selectedSource.name}`} color="blue">
{sourcesInfo.map((source: any) => (
<Dropdown.Item
key={`source_${source.id}`}
@@ -141,11 +129,12 @@ export const ReleasePlayer = (props: { id: number }) => {
<div className="flex gap-2 p-2 overflow-x-auto scrollbar-thin">
{episodeInfo.map((episode: any) => (
<Button
- className={`text-center min-w-fit ${
+ color={
selectedEpisode.position === episode.position
- ? ButtonThemeActive
- : ButtonThemeInactive
- }`}
+ ? "blue"
+ : "light"
+ }
+ theme={{base: "min-w-fit disabled:opacity-100"}}
key={`episode_${episode.position}`}
onClick={() => {
setSelectedEpisode(episode);
diff --git a/app/components/ReleaseSection/ReleaseSection.tsx b/app/components/ReleaseSection/ReleaseSection.tsx
index 083a8f1..a1612dc 100644
--- a/app/components/ReleaseSection/ReleaseSection.tsx
+++ b/app/components/ReleaseSection/ReleaseSection.tsx
@@ -4,7 +4,7 @@ export const ReleaseSection = (props: any) => {
return (
<section>
{props.sectionTitle && (
- <div className="flex justify-between px-4 py-2 border-b-2 border-black">
+ <div className="flex justify-between px-4 py-2 border-b-2 border-black dark:border-white">
<h1 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
{props.sectionTitle}
</h1>
diff --git a/app/layout.tsx b/app/layout.tsx
index a116406..f14b144 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,6 @@
import "./globals.css";
import { App } from "./App";
+import { ThemeModeScript } from "flowbite-react";
export const metadata = {
title: {
@@ -11,7 +12,10 @@ export const metadata = {
export default function RootLayout({ children }) {
return (
- <html lang="en">
+ <html lang="en" suppressHydrationWarning>
+ <head>
+ <ThemeModeScript />
+ </head>
<App>{children}</App>
</html>
);
diff --git a/app/pages/BookmarksCategory.tsx b/app/pages/BookmarksCategory.tsx
index 3cc26e2..9d9d005 100644
--- a/app/pages/BookmarksCategory.tsx
+++ b/app/pages/BookmarksCategory.tsx
@@ -62,13 +62,13 @@ export function BookmarksCategoryPage(props: any) {
const DropdownTheme = {
floating: {
target:
- "w-fit bg-blue-600 enabled:hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800",
+ "w-fit bg-blue-600 enabled:hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 text-center dark:bg-blue-600 dark:enabled:hover:bg-blue-700 dark:focus:ring-blue-800",
},
};
return (
<main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
- <div className="flex items-center justify-between px-4 py-2 border-b-2 border-black">
+ <div className="flex items-center justify-between px-4 py-2 border-b-2 border-black dark:border-white">
<h1 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
{props.SectionTitleMapping[props.slug]}
</h1>
diff --git a/app/pages/Favorites.tsx b/app/pages/Favorites.tsx
index 563b95b..c06fe10 100644
--- a/app/pages/Favorites.tsx
+++ b/app/pages/Favorites.tsx
@@ -61,13 +61,13 @@ export function FavoritesPage() {
const DropdownTheme = {
floating: {
target:
- "w-fit bg-blue-600 enabled:hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800",
+ "w-fit bg-blue-600 enabled:hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 text-center dark:bg-blue-600 dark:enabled:hover:bg-blue-700 dark:focus:ring-blue-800",
},
};
return (
<main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
- <div className="flex items-center justify-between px-4 py-2 border-b-2 border-black">
+ <div className="flex items-center justify-between px-4 py-2 border-b-2 border-black dark:border-white">
<h1 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
Избранное
</h1>
diff --git a/app/pages/History.tsx b/app/pages/History.tsx
index 81c76da..28b9a31 100644
--- a/app/pages/History.tsx
+++ b/app/pages/History.tsx
@@ -57,7 +57,7 @@ export function HistoryPage() {
return (
<main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
- <div className="flex items-center justify-between px-4 py-2 border-b-2 border-black">
+ <div className="flex items-center justify-between px-4 py-2 border-b-2 border-black dark:border-white">
<h1 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
История
</h1>
diff --git a/app/pages/Related.tsx b/app/pages/Related.tsx
index 1f5e340..9908e46 100644
--- a/app/pages/Related.tsx
+++ b/app/pages/Related.tsx
@@ -58,7 +58,7 @@ export function RelatedPage(props: {id: number|string, title: string}) {
return (
<main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
- <div className="flex items-center justify-between px-4 py-2 border-b-2 border-black">
+ <div className="flex items-center justify-between px-4 py-2 border-b-2 border-black dark:border-white">
<h1 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
Франшиза {props.title}
</h1>
diff --git a/app/store/preferences.ts b/app/store/preferences.ts
index fb138c6..d0ec4d8 100644
--- a/app/store/preferences.ts
+++ b/app/store/preferences.ts
@@ -1,10 +1,42 @@
"use client";
import { create } from "zustand";
-import { persist, createJSONStorage } from "zustand/middleware";
+import { persist } from "zustand/middleware";
-export const usePreferencesStore = create(
+interface preferencesState {
+ flags: {
+ // saveSearchHistory: boolean;
+ saveWatchHistory: boolean;
+ // theme: "light" | "dark" | "black" | "system";
+ };
+ params: {
+ isFirstLaunch: boolean;
+ // color: {
+ // primary: string;
+ // secondary: string;
+ // accent: string;
+ // }
+ };
+ setFlags: (flags: preferencesState["flags"]) => void;
+ setParams: (params: preferencesState["params"]) => void;
+}
+
+export const usePreferencesStore = create<preferencesState>()(
persist(
(set, get) => ({
+ flags: {
+ // saveSearchHistory: true,
+ saveWatchHistory: true,
+ // theme: "light",
+ },
+ params: {
+ isFirstLaunch: true,
+ },
+ setFlags(flags) {
+ set({ flags });
+ },
+ setParams(params) {
+ set({ params });
+ },
}),
{
name: "preferences",
diff --git a/tailwind.config.js b/tailwind.config.js
index d8dda9d..2e4702a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,7 +11,34 @@ module.exports = {
],
plugins: [
addIconSelectors(["mdi", "material-symbols", "twemoji", "fa6-brands"]),
- require('tailwind-scrollbar'),
+ require("tailwind-scrollbar"),
flowbite.plugin(),
],
+ darkMode: "selector",
+ theme: {
+ extend: {
+ animation: {
+ bg_zoom: "bg_zoom 150ms linear",
+ bg_zoom_rev: "bg_zoom_rev 150ms linear",
+ },
+ keyframes: {
+ bg_zoom: {
+ "0%": {
+ "background-size": "100% auto",
+ },
+ "100%": {
+ "background-size": "110% auto",
+ },
+ },
+ bg_zoom_rev: {
+ "0%": {
+ "background-size": "110% auto",
+ },
+ "100%": {
+ "background-size": "100% auto",
+ },
+ },
+ },
+ },
+ },
};