mirror of https://github.com/gabehf/Koito.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
1.4 KiB
42 lines
1.4 KiB
import type { Route } from "./+types/Home";
|
|
import TopTracks from "~/components/TopTracks";
|
|
import LastPlays from "~/components/LastPlays";
|
|
import ActivityGrid from "~/components/ActivityGrid";
|
|
import TopAlbums from "~/components/TopAlbums";
|
|
import TopArtists from "~/components/TopArtists";
|
|
import AllTimeStats from "~/components/AllTimeStats";
|
|
import { useState } from "react";
|
|
import PeriodSelector from "~/components/PeriodSelector";
|
|
import { useAppContext } from "~/providers/AppProvider";
|
|
|
|
export function meta({}: Route.MetaArgs) {
|
|
return [
|
|
{ title: "Koito" },
|
|
{ name: "description", content: "Koito" },
|
|
];
|
|
}
|
|
|
|
export default function Home() {
|
|
const [period, setPeriod] = useState('week')
|
|
|
|
const { homeItems } = useAppContext();
|
|
|
|
return (
|
|
<main className="flex flex-grow justify-center pb-4">
|
|
<div className="flex-1 flex flex-col items-center gap-16 min-h-0 mt-20">
|
|
<div className="flex gap-20">
|
|
<AllTimeStats />
|
|
<ActivityGrid />
|
|
</div>
|
|
<PeriodSelector setter={setPeriod} current={period} />
|
|
<div className="flex flex-wrap 2xl:gap-20 xl:gap-10 justify-between mx-5 gap-5">
|
|
<TopArtists period={period} limit={homeItems} />
|
|
<TopAlbums period={period} limit={homeItems} />
|
|
<TopTracks period={period} limit={homeItems} />
|
|
<LastPlays limit={Math.floor(homeItems * 2.5)} />
|
|
</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|