Add dedicated home screen
This commit is contained in:
@@ -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";
|
||||
|
||||
21
packages/frontend/src/routes/Home.tsx
Normal file
21
packages/frontend/src/routes/Home.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user