feat: add dark theme

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

View file

@ -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);