Add dedicated home screen

This commit is contained in:
2024-12-28 21:27:10 +01:00
parent 2241b101aa
commit bf4361d207
3 changed files with 25 additions and 3 deletions

View File

@@ -1,6 +1,7 @@
import { Home, Pieces } from "@/routes/Pieces";
import { Home } from "@/routes/Home";
import { Login } from "@/routes/Login";
import { Piece } from "@/routes/Piece";
import { Pieces } from "@/routes/Pieces";
import { Repertoire } from "@/routes/Repertoire";
import { Repertoires } from "@/routes/Repertoires";
import { Root } from "@/routes/Root";

View File

@@ -0,0 +1,21 @@
import { ListMusic, Music3 } from "lucide-react";
import { Link } from "react-router-dom";
export function Home() {
return (
<div className="p-4 overflow-y-auto flex flex-wrap items-start justify-center gap-4">
<Link to="piece">
<div className="w-64 h-64 p-4 flex flex-col items-center justify-center gap-4 rounded-md text-lg font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stone-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-stone-950 dark:focus-visible:ring-stone-300 border border-stone-200 bg-white hover:bg-stone-100 hover:text-stone-900 dark:border-stone-800 dark:bg-stone-950 dark:hover:bg-stone-800 dark:hover:text-stone-50">
<Music3 size={32} absoluteStrokeWidth />
<div>Utwory</div>
</div>
</Link>
<Link to="repertoire">
<div className="w-64 h-64 p-4 flex flex-col items-center justify-center gap-4 rounded-md text-lg font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stone-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-stone-950 dark:focus-visible:ring-stone-300 border border-stone-200 bg-white hover:bg-stone-100 hover:text-stone-900 dark:border-stone-800 dark:bg-stone-950 dark:hover:bg-stone-800 dark:hover:text-stone-50">
<ListMusic size={32} absoluteStrokeWidth />
<div>Repertuary</div>
</div>
</Link>
</div>
);
}

View File

@@ -130,7 +130,7 @@ function PieceRow(props: PieceRow.Props) {
return (
<TableRow>
<TableCell>
<Link className="underline" to={`piece/${piece.pieceId}`}>{piece.name}</Link>
<Link className="underline" to={piece.pieceId}>{piece.name}</Link>
</TableCell>
<TableCell>
{...composerParts.flatMap((x, i, a) => i < a.length - 1 ? [x, <br />] : [x])}
@@ -183,7 +183,7 @@ function AddPieceDialogContent() {
return;
}
navigate(`piece/${data.pieceId}`);
navigate(data.pieceId);
} finally {
setIsLoading(false);
}