Radiquum/AniX
1
0
Fork 0
mirror of https://github.com/Radiquum/AniX.git synced 2025-04-06 00:04:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add dark theme

Browse source
This commit is contained in:
Kentai Radiquum 2024-08-02 20:55:01 +05:00
parent 1588039542
commit 3e72866a08
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
22 changed files with 314 additions and 162 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
TODO.md
View file

@ -76,7 +76,7 @@
## Стиль ## Стиль
- [ ] Тёмная тема - [X] Тёмная тема
- [ ] Больше метаданных для превью ссылки страницы - [ ] Больше метаданных для превью ссылки страницы
## Баги ## Баги

2
app/App.tsx
View file

@ -12,7 +12,7 @@ export const App = (props) => {
}, []); }, []);
return ( return (
<body className={`${inter.className} overflow-x-hidden`}> <body className={`${inter.className} overflow-x-hidden dark:bg-[#0d1117] dark:text-white`}>
<Navbar /> <Navbar />
{props.children} {props.children}
</body> </body>

30
app/components/Comments/Comments.Main.tsx
View file

@ -19,7 +19,7 @@ export const CommentsMain = (props: {
</div> </div>
<Button <Button
size={"sm"} 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" color="inline"
> >
Показать все Показать все
@ -45,19 +45,21 @@ export const CommentsMain = (props: {
Оставить комментарий Оставить комментарий
</Button> </Button>
</form> </form>
{props.comments.map((comment: any) => ( <div className="flex flex-col gap-2">
<CommentsComment {props.comments.map((comment: any) => (
key={comment.id} <CommentsComment
profile={comment.profile} key={comment.id}
comment={{ profile={comment.profile}
id: comment.id, comment={{
timestamp: comment.timestamp, id: comment.id,
message: comment.message, timestamp: comment.timestamp,
likes: comment.likes_count, message: comment.message,
reply_count: comment.reply_count, likes: comment.likes_count,
}} reply_count: comment.reply_count,
/> }}
))} />
))}
</div>
</div> </div>
</Card> </Card>
); );

291
app/components/Navbar/Navbar.tsx
View file

@ -2,11 +2,20 @@
import Link from "next/link"; import Link from "next/link";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import { useUserStore } from "#/store/auth"; 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 = () => { export const Navbar = () => {
const pathname = usePathname(); const pathname = usePathname();
const userStore: any = useUserStore((state) => state); const userStore: any = useUserStore((state) => state);
const [isSettingModalOpen, setIsSettingModalOpen] = useState(false);
const navLinks = [ const navLinks = [
{ {
@ -57,47 +66,125 @@ export const Navbar = () => {
]; ];
return ( 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"> <header className="fixed bottom-0 left-0 z-50 w-full text-white bg-black sm:sticky sm:top-0">
<nav className="flex gap-4"> <div className="container flex items-center justify-between px-4 py-4 mx-auto">
{navLinks.map((link) => { <nav className="flex gap-4">
return ( {navLinks.map((link) => {
<Link return (
key={link.id} <Link
href={link.href} key={link.id}
className={`flex-col items-center sm:flex-row ${ href={link.href}
link.withAuthOnly && !userStore.isAuth className={`flex-col items-center sm:flex-row ${
? "hidden" link.withAuthOnly && !userStore.isAuth
: link.mobileMenu ? "hidden"
? "hidden sm:flex" : link.mobileMenu
: "flex" ? "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`}
> >
{link.title} <span
</span> className={`iconify ${
</Link> pathname == link.href ? link.iconActive : link.icon
); } w-6 h-6`}
})} ></span>
</nav> <span
{userStore.isAuth ? ( className={`${
<div className="flex flex-col items-center justify-center gap-1 text-xs sm:flex-row sm:text-base"> pathname == link.href ? "font-bold" : ""
<img } text-xs sm:text-base`}
src={userStore.user.avatar} >
alt="" {link.title}
className="w-6 h-6 rounded-full" </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 <Dropdown
label={userStore.user.login} label="Меню"
inline={true} inline={true}
dismissOnClick={true} dismissOnClick={true}
theme={{ theme={{
@ -106,76 +193,82 @@ export const Navbar = () => {
}} }}
> >
<Dropdown.Item className="text-sm md:text-base"> <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 <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> <span
className={`${
pathname == "/login" ? "font-bold" : ""
} text-xs sm:text-base`}
>
Войти
</span>
</Link> </Link>
</Dropdown.Item> </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 <Dropdown.Item
onClick={() => { onClick={() => {
userStore.logout(); setIsSettingModalOpen(true);
}} }}
className="text-sm md:text-base" className="flex items-center gap-1 text-sm md:text-base"
> >
<span <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>Настройки</span>
</Dropdown.Item> </Dropdown.Item>
</Dropdown> </Dropdown>
</div> )}
) : ( </div>
<Link </header>
href="/login" <SettingsModal
className="flex flex-col items-center justify-center gap-1 sm:flex-row" isOpen={isSettingModalOpen}
> setIsOpen={setIsSettingModalOpen}
<span />
className={`w-6 h-6 iconify ${ </>
pathname == "/login" );
? "mdi--user-circle" };
: "mdi--user-circle-outline"
}`} const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
></span> const preferenceStore = usePreferencesStore();
<span
className={`${ const { computedMode, setMode } = useThemeMode();
pathname == "/login" ? "font-bold" : ""
} text-xs sm:text-base`} return (
> <Modal
Войти dismissible
</span> show={props.isOpen}
</Link> onClose={() => props.setIsOpen(false)}
)} >
</div> <Modal.Header>Настройки</Modal.Header>
</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>
); );
}; };

2
app/components/RelatedSection/RelatedSection.tsx
View file

@ -29,7 +29,7 @@ export const RelatedSection = (props: any) => {
{props.release_count} {declension} во франшизе {props.release_count} {declension} во франшизе
</p> </p>
<Link href={`/related/${props.id}`}> <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> <p className="text-xl font-bold">Перейти</p>
<span className="w-6 h-6 iconify mdi--arrow-right"></span> <span className="w-6 h-6 iconify mdi--arrow-right"></span>
</div> </div>

2
app/components/ReleaseCourusel/ReleaseCourusel.module.css
View file

@ -9,5 +9,7 @@
@media (hover: hover) { @media (hover: hover) {
.section:hover .swiper-button { .section:hover .swiper-button {
display: flex !important; display: flex !important;
width: 64px;
height: 64px;
} }
} }

2
app/components/ReleaseCourusel/ReleaseCourusel.tsx
View file

@ -39,7 +39,7 @@ export const ReleaseCourusel = (props: {
return ( return (
<section className={`${Styles.section}`}> <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"> <h1 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
{props.sectionTitle} {props.sectionTitle}
</h1> </h1>

4
app/components/ReleaseInfo/ReleaseInfo.Basics.tsx
View file

@ -15,10 +15,10 @@ export const ReleaseInfoBasics = (props: {
></img> ></img>
<div className="flex flex-col max-w-2xl gap-2 text-sm md:text-base"> <div className="flex flex-col max-w-2xl gap-2 text-sm md:text-base">
<div className="flex flex-col gap-1"> <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} {props.title.ru}
</p> </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} {props.title.original}
</p> </p>
</div> </div>

10
app/components/ReleaseInfo/ReleaseInfo.Info.tsx
View file

@ -53,7 +53,7 @@ export const ReleaseInfoInfo = (props: {
</Table.Row> </Table.Row>
<Table.Row> <Table.Row>
<Table.Cell className="py-0"> <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>
<Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white"> <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
{props.episodes.released ? props.episodes.released : "?"} {props.episodes.released ? props.episodes.released : "?"}
@ -64,7 +64,7 @@ export const ReleaseInfoInfo = (props: {
</Table.Row> </Table.Row>
<Table.Row> <Table.Row>
<Table.Cell className="py-0"> <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>
<Table.Cell className="font-medium text-gray-900 dark:text-white"> <Table.Cell className="font-medium text-gray-900 dark:text-white">
{props.category} {props.category}
@ -76,7 +76,7 @@ export const ReleaseInfoInfo = (props: {
</Table.Row> </Table.Row>
<Table.Row> <Table.Row>
<Table.Cell className="py-0"> <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>
<Table.Cell className="font-medium text-gray-900 dark:text-white"> <Table.Cell className="font-medium text-gray-900 dark:text-white">
{props.studio && ( {props.studio && (
@ -112,7 +112,7 @@ export const ReleaseInfoInfo = (props: {
</Table.Row> </Table.Row>
<Table.Row> <Table.Row>
<Table.Cell className="py-0"> <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>
<Table.Cell className="font-medium text-gray-900 dark:text-white"> <Table.Cell className="font-medium text-gray-900 dark:text-white">
{props.genres && {props.genres &&
@ -129,7 +129,7 @@ export const ReleaseInfoInfo = (props: {
{props.status.toLowerCase() == "анонс" && ( {props.status.toLowerCase() == "анонс" && (
<Table.Row> <Table.Row>
<Table.Cell className="py-0"> <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>
<Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white"> <Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
{props.aired_on_date != 0 ? ( {props.aired_on_date != 0 ? (

4
app/components/ReleaseInfo/ReleaseInfo.Rating.tsx
View file

@ -46,7 +46,7 @@ export const ReleaseInfoRating = (props: {
</p> </p>
<Button <Button
size={"xs"} 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" color="inline"
> >
изменить изменить
@ -55,7 +55,7 @@ export const ReleaseInfoRating = (props: {
) : ( ) : (
<Button <Button
size={"xs"} 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" color="inline"
> >
оценить оценить

2
app/components/ReleaseInfo/ReleaseInfo.Related.tsx
View file

@ -17,7 +17,7 @@ export const ReleaseInfoRelated = (props: {
}) => { }) => {
return ( return (
<Card> <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> <h1>Связанные релизы</h1>
{props.related && ( {props.related && (
<Link href={`/related/${props.related.id}`}> <Link href={`/related/${props.related.id}`}>

5
app/components/ReleaseInfo/ReleaseInfo.UserList.tsx
View file

@ -13,7 +13,7 @@ const lists = [
const DropdownTheme = { const DropdownTheme = {
floating: { floating: {
target: 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} label={lists[props.userList].name}
dismissOnClick={true} dismissOnClick={true}
theme={DropdownTheme} theme={DropdownTheme}
color="blue"
> >
{lists.map((list) => ( {lists.map((list) => (
<Dropdown.Item <Dropdown.Item
@ -68,7 +69,7 @@ export const ReleaseInfoUserList = (props: {
))} ))}
</Dropdown> </Dropdown>
<Button <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={() => { onClick={() => {
_addToFavorite(); _addToFavorite();
}} }}

8
app/components/ReleaseLink/ReleaseLink.16_9.tsx
View file

@ -21,12 +21,14 @@ export const ReleaseLink169 = (props: any) => {
return ( return (
<Link href={`/release/${props.id}`}> <Link href={`/release/${props.id}`}>
<div className="w-full aspect-video group"> <div className="w-full aspect-video group">
<div className="relative w-full h-full overflow-hidden bg-gradient-to-t from-black to-transparent"> <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={{
<img 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" className="absolute z-0 object-cover w-full h-full transition mix-blend-overlay group-hover:scale-110"
src={props.image} src={props.image}
alt="" alt=""
/> /> */}
<div className="absolute flex flex-wrap items-start justify-start gap-0.5 sm:gap-1 left-2 top-2"> <div className="absolute flex flex-wrap items-start justify-start gap-0.5 sm:gap-1 left-2 top-2">
<Chip <Chip
bg_color={ bg_color={

27
app/components/ReleasePlayer/ReleasePlayer.tsx
View file

@ -8,16 +8,10 @@ import { useState, useEffect } from "react";
const DropdownTheme = { const DropdownTheme = {
floating: { floating: {
target: target: "w-full md:min-w-[256px] md:w-fit",
"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",
}, },
}; };
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) { async function _fetch(url: string) {
const data = fetch(url) const data = fetch(url)
.then((res) => { .then((res) => {
@ -103,10 +97,7 @@ export const ReleasePlayer = (props: { id: number }) => {
) : ( ) : (
<> <>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
<Dropdown <Dropdown label={`Озвучка: ${selectedVoiceover.name}`} color="blue">
label={`Озвучка: ${selectedVoiceover.name}`}
theme={DropdownTheme}
>
{voiceoverInfo.map((voiceover: any) => ( {voiceoverInfo.map((voiceover: any) => (
<Dropdown.Item <Dropdown.Item
key={`voiceover_${voiceover.id}`} key={`voiceover_${voiceover.id}`}
@ -116,10 +107,7 @@ export const ReleasePlayer = (props: { id: number }) => {
</Dropdown.Item> </Dropdown.Item>
))} ))}
</Dropdown> </Dropdown>
<Dropdown <Dropdown label={`Плеер: ${selectedSource.name}`} color="blue">
label={`Плеер: ${selectedSource.name}`}
theme={DropdownTheme}
>
{sourcesInfo.map((source: any) => ( {sourcesInfo.map((source: any) => (
<Dropdown.Item <Dropdown.Item
key={`source_${source.id}`} 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"> <div className="flex gap-2 p-2 overflow-x-auto scrollbar-thin">
{episodeInfo.map((episode: any) => ( {episodeInfo.map((episode: any) => (
<Button <Button
className={`text-center min-w-fit ${ color={
selectedEpisode.position === episode.position selectedEpisode.position === episode.position
? ButtonThemeActive ? "blue"
: ButtonThemeInactive : "light"
}`} }
theme={{base: "min-w-fit disabled:opacity-100"}}
key={`episode_${episode.position}`} key={`episode_${episode.position}`}
onClick={() => { onClick={() => {
setSelectedEpisode(episode); setSelectedEpisode(episode);

2
app/components/ReleaseSection/ReleaseSection.tsx
View file

@ -4,7 +4,7 @@ export const ReleaseSection = (props: any) => {
return ( return (
<section> <section>
{props.sectionTitle && ( {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"> <h1 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
{props.sectionTitle} {props.sectionTitle}
</h1> </h1>

6
app/layout.tsx
View file

@ -1,5 +1,6 @@
import "./globals.css"; import "./globals.css";
import { App } from "./App"; import { App } from "./App";
import { ThemeModeScript } from "flowbite-react";
export const metadata = { export const metadata = {
title: { title: {
@ -11,7 +12,10 @@ export const metadata = {
export default function RootLayout({ children }) { export default function RootLayout({ children }) {
return ( return (
<html lang="en"> <html lang="en" suppressHydrationWarning>
<head>
<ThemeModeScript />
</head>
<App>{children}</App> <App>{children}</App>
</html> </html>
); );

4
app/pages/BookmarksCategory.tsx
View file

@ -62,13 +62,13 @@ export function BookmarksCategoryPage(props: any) {
const DropdownTheme = { const DropdownTheme = {
floating: { floating: {
target: 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 ( return (
<main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0"> <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 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
{props.SectionTitleMapping[props.slug]} {props.SectionTitleMapping[props.slug]}
</h1> </h1>

4
app/pages/Favorites.tsx
View file

@ -61,13 +61,13 @@ export function FavoritesPage() {
const DropdownTheme = { const DropdownTheme = {
floating: { floating: {
target: 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 ( return (
<main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0"> <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 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
Избранное Избранное
</h1> </h1>

2
app/pages/History.tsx
View file

@ -57,7 +57,7 @@ export function HistoryPage() {
return ( return (
<main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0"> <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 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
История История
</h1> </h1>

2
app/pages/Related.tsx
View file

@ -58,7 +58,7 @@ export function RelatedPage(props: {id: number|string, title: string}) {
return ( return (
<main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0"> <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 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
Франшиза {props.title} Франшиза {props.title}
</h1> </h1>

36
app/store/preferences.ts
View file

@ -1,10 +1,42 @@
"use client"; "use client";
import { create } from "zustand"; 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( persist(
(set, get) => ({ (set, get) => ({
flags: {
// saveSearchHistory: true,
saveWatchHistory: true,
// theme: "light",
},
params: {
isFirstLaunch: true,
},
setFlags(flags) {
set({ flags });
},
setParams(params) {
set({ params });
},
}), }),
{ {
name: "preferences", name: "preferences",

29
tailwind.config.js
View file

@ -11,7 +11,34 @@ module.exports = {
], ],
plugins: [ plugins: [
addIconSelectors(["mdi", "material-symbols", "twemoji", "fa6-brands"]), addIconSelectors(["mdi", "material-symbols", "twemoji", "fa6-brands"]),
require('tailwind-scrollbar'), require("tailwind-scrollbar"),
flowbite.plugin(), 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",
},
},
},
},
},
}; };