glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-05-22 14:13:02 +02:00
Code Issues Packages Projects Releases Wiki Activity

Move the Start-Search Card to MangaList.tsx

Browse Source
This commit is contained in:
glax 2025-05-19 19:33:39 +02:00
parent 6d8d0ec636
commit 5fe3ead54d
2 changed files with 24 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
tranga-website/src/App.tsx
View File

@ -2,12 +2,11 @@ import Sheet from '@mui/joy/Sheet';
import './App.css' import './App.css'
import Settings from "./Settings.tsx"; import Settings from "./Settings.tsx";
import Header from "./Header.tsx"; import Header from "./Header.tsx";
import {Badge, Box, Button, Card, CardContent, CardCover, Typography} from "@mui/joy"; import {Badge, Button} from "@mui/joy";
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
import {ApiUriContext} from "./api/fetchApi.tsx"; import {ApiUriContext} from "./api/fetchApi.tsx";
import Search from './Components/Search.tsx'; import Search from './Components/Search.tsx';
import MangaList from "./Components/MangaList.tsx"; import MangaList from "./Components/MangaList.tsx";
import {CardHeight, CardWidth} from "./Components/Manga.tsx";
import {MangaConnectorContext} from "./api/Contexts/MangaConnectorContext.tsx"; import {MangaConnectorContext} from "./api/Contexts/MangaConnectorContext.tsx";
import IMangaConnector from "./api/types/IMangaConnector.ts"; import IMangaConnector from "./api/types/IMangaConnector.ts";
import {GetAllConnectors} from "./api/MangaConnector.tsx"; import {GetAllConnectors} from "./api/MangaConnector.tsx";
@ -45,25 +44,7 @@ export default function App () {
<Settings open={showSettings} setOpen={setShowSettings} setApiUri={setApiUri} setConnected={setApiConnected} /> <Settings open={showSettings} setOpen={setShowSettings} setApiUri={setApiUri} setConnected={setApiConnected} />
<Search open={showSearch} setOpen={setShowSearch} /> <Search open={showSearch} setOpen={setShowSearch} />
<Sheet className={"app-content"}> <Sheet className={"app-content"}>
<MangaList connected={apiConnected}> <MangaList connected={apiConnected} setShowSearch={setShowSearch} />
<Badge invisible sx={{margin: "8px !important"}}>
<Card onClick={() => setShowSearch(true)} sx={{height:"fit-content",width:"fit-content"}}>
<CardCover sx={{margin:"var(--Card-padding)"}}>
<img src={"/blahaj.png"} style={{height: CardHeight + "px", width: CardWidth + 10 + "px"}} />
</CardCover>
<CardCover sx={{
background: 'rgba(234, 119, 246, 0.14)',
backdropFilter: 'blur(6.9px)',
webkitBackdropFilter: 'blur(6.9px)',
}}/>
<CardContent>
<Box style={{height: CardHeight + "px", width: CardWidth + 10 + "px"}} >
<Typography level={"h1"}>Search</Typography>
</Box>
</CardContent>
</Card>
</Badge>
</MangaList>
</Sheet> </Sheet>
</Sheet> </Sheet>
</MangaConnectorContext> </MangaConnectorContext>

28
tranga-website/src/Components/MangaList.tsx
View File

@ -1,14 +1,14 @@
import {Button, Stack} from "@mui/joy"; import {Badge, Box, Button, Card, CardContent, CardCover, Stack, Typography} from "@mui/joy";
import {useCallback, useContext, useEffect, useState} from "react"; import {Dispatch, SetStateAction, useCallback, useContext, useEffect, useState} from "react";
import {ApiUriContext} from "../api/fetchApi.tsx"; import {ApiUriContext} from "../api/fetchApi.tsx";
import {DeleteJob, GetJobsWithType} from "../api/Job.tsx"; import {DeleteJob, GetJobsWithType} from "../api/Job.tsx";
import {JobType} from "../api/types/Jobs/IJob.ts"; import {JobType} from "../api/types/Jobs/IJob.ts";
import IDownloadAvailableChaptersJob from "../api/types/Jobs/IDownloadAvailableChaptersJob.ts"; import IDownloadAvailableChaptersJob from "../api/types/Jobs/IDownloadAvailableChaptersJob.ts";
import {MangaFromId} from "./Manga.tsx"; import {CardHeight, CardWidth, MangaFromId} from "./Manga.tsx";
import { Remove } from "@mui/icons-material"; import {PlayArrow, Remove} from "@mui/icons-material";
import * as React from "react"; import * as React from "react";
export default function MangaList({connected, children}: {connected: boolean, children?: React.ReactNode} ){ export default function MangaList({connected, setShowSearch}: {connected: boolean, setShowSearch: Dispatch<SetStateAction<boolean>>} ) {
const apiUri = useContext(ApiUriContext); const apiUri = useContext(ApiUriContext);
const [jobList, setJobList] = useState<IDownloadAvailableChaptersJob[]>([]); const [jobList, setJobList] = useState<IDownloadAvailableChaptersJob[]>([]);
@ -50,7 +50,23 @@ export default function MangaList({connected, children}: {connected: boolean, ch
return( return(
<Stack direction="row" spacing={1} flexWrap={"wrap"}> <Stack direction="row" spacing={1} flexWrap={"wrap"}>
{children} <Badge invisible sx={{margin: "8px !important"}}>
<Card onClick={() => setShowSearch(true)} sx={{height:"fit-content",width:"fit-content"}}>
<CardCover sx={{margin:"var(--Card-padding)"}}>
<img src={"/blahaj.png"} style={{height: CardHeight + "px", width: CardWidth + 10 + "px"}} />
</CardCover>
<CardCover sx={{
background: 'rgba(234, 119, 246, 0.14)',
backdropFilter: 'blur(6.9px)',
webkitBackdropFilter: 'blur(6.9px)',
}}/>
<CardContent>
<Box style={{height: CardHeight + "px", width: CardWidth + 10 + "px"}} >
<Typography level={"h1"}>Search</Typography>
</Box>
</CardContent>
</Card>
</Badge>
{jobList?.map((job) => ( {jobList?.map((job) => (
<MangaFromId key={job.mangaId} mangaId={job.mangaId}> <MangaFromId key={job.mangaId} mangaId={job.mangaId}>
<Button color={"danger"} endDecorator={<Remove />} onClick={() => deleteJob(job.jobId)}>Delete</Button> <Button color={"danger"} endDecorator={<Remove />} onClick={() => deleteJob(job.jobId)}>Delete</Button>