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

feat(ReleaseOverview): add ability to change view modes for releases pages

Browse source
This commit is contained in:
Kentai Radiquum 2024-05-11 07:53:20 +05:00
parent 10397b2b6a
commit e079fa3a93
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
5 changed files with 97 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

56
frontend/app/components/ReleasesOverview/ReleasesOverview.jsx
View file

@ -1,30 +1,54 @@
import { CardList } from "@/app/components/CardList/CardList";
import { useState } from "react";
export default function ReleasesOverview(props) {
const [view, setView] = useState("grid");
return (
<>
{props.chips && (
<div style={{ display: "flex", justifyContent: "space-between" }}>
{props.chips && (
<div>
{props.chips.map((item) => {
return (
<button
key={item.list}
className={`chip ${props.list == item.list ? "fill" : ""}`}
onClick={() => {
props.setList(item.list);
}}
>
<span>{item.title}</span>
</button>
);
})}
</div>
)}
<div>
{props.chips.map((item) => {
return (
<button
key={item.list}
className={`chip ${props.list == item.list ? "fill" : ""}`}
onClick={() => {
props.setList(item.list);
}}
>
<span>{item.title}</span>
</button>
);
})}
<button
className="circle transparent"
onClick={() => {
setView("list");
}}
>
<i className={view == "list" ? "fill" : ""}>view_agenda</i>
</button>
<button
className="circle transparent"
onClick={() => {
setView("grid");
}}
>
<i className={view == "grid" ? "fill" : ""}>cards</i>
</button>
</div>
)}
</div>
{props.releases ? (
<>
<div className="grid">
<CardList data={props.releases} />
<CardList data={props.releases} view={view} />
</div>
{props.isNextPage && (