starshard/peafowl
starshard/peafowl
Template
1
Fork 0
mirror of https://github.com/starshardstudio/peafowl.git synced 2024-11-21 12:34:20 +00:00
Code Activity

Create single anime page

Browse source
This commit is contained in:
Steffo 2024-11-05 13:25:02 +01:00
parent fd60de034a
commit dca878308d
Signed by: steffo
GPG key ID: 5ADA3868646C3FC0
1 changed files with 112 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

112
_includes/anime.tsx Normal file
View file

@ -0,0 +1,112 @@
import {formatDateIso} from "../_utils/date.ts"
import {AnimeData, AnimeProgress, animeProgressToClassName, animeProgressToIconDef, animeProgressToTitle} from "../_utils/anime.ts"
import {ReviewInfo} from "../_components/ReviewInfo.tsx"
export const layout = "base.tsx"
export default function(data: AnimeData, helpers: Lume.Helpers) {
const dateRow = (
<ReviewInfo.MetadataRow
className={"review-date"}
label={"Last updated"}
>
{formatDateIso(data.date)}
</ReviewInfo.MetadataRow>
)
const dateSeparator = (data.progress || data.hours_played) ? <hr/> : null
const progressRow = data.progress ? (
<ReviewInfo.MetadataRow
className={`anime-progress ${animeProgressToClassName(data.progress)}`}
label={"Progress"}
icon={<i className={`fa-sharp fa-regular ${animeProgressToIconDef(data.progress)} ${data.active ? "fa-beat-fade" : ""}`}/>}
>
<data value={data.progress}>
{animeProgressToTitle(data.progress)}
</data>
{data.active &&
<>
,&nbsp;
<span className={"fa-fade"} style={{animationDelay: '-0.5s'}}>now watching</span>
</>
}
</ReviewInfo.MetadataRow>
) : null
const playedSeparator = (data.started_on || data.completed_on || data.mastered_on) ? <hr/> : null
const purchasedOnValue = formatDateIso(data.purchased_on)
const purchasedOnRow = purchasedOnValue ? (
<ReviewInfo.MetadataRow
className={`anime-purchasedon`}
label={"Purchased on"}
icon={<i className={`fa-sharp fa-regular ${animeProgressToIconDef(AnimeProgress.New)}`}/>}
>
<time dateTime={purchasedOnValue}>
{purchasedOnValue}
</time>
</ReviewInfo.MetadataRow>
) : null
const startedOnValue = formatDateIso(data.started_on)
const startedOnRow = startedOnValue ? (
<ReviewInfo.MetadataRow
className={`anime-startedon`}
label={"Started on"}
icon={<i className={`fa-sharp fa-regular ${animeProgressToIconDef(AnimeProgress.Started)}`}/>}
>
<time dateTime={startedOnValue}>
{startedOnValue}
</time>
</ReviewInfo.MetadataRow>
) : null
const completedOnValue = formatDateIso(data.completed_on)
const completedOnRow = completedOnValue ? (
<ReviewInfo.MetadataRow
className={`anime-completedon`}
label={"Completed on"}
icon={<i className={`fa-sharp fa-regular ${animeProgressToIconDef(AnimeProgress.Completed)}`}/>}
>
<time dateTime={completedOnValue}>
{completedOnValue}
</time>
</ReviewInfo.MetadataRow>
) : null
const masteredOnValue = formatDateIso(data.mastered_on)
const masteredOnRow = masteredOnValue ? (
<ReviewInfo.MetadataRow
className={`anime-masteredon`}
label={"Mastered on"}
icon={<i className={`fa-sharp fa-regular ${animeProgressToIconDef(AnimeProgress.Mastered)}`}/>}
>
<time dateTime={masteredOnValue}>
{masteredOnValue}
</time>
</ReviewInfo.MetadataRow>
) : null
return (
<main id={"anime-main"}>
<ReviewInfo
name={data.name}
rating={data.rating}
metadata={<>
{dateRow}
{dateSeparator}
{progressRow}
{playedSeparator}
{purchasedOnRow}
{startedOnRow}
{completedOnRow}
{masteredOnRow}
</>}
>
{data.children}
</ReviewInfo>
</main>
)
}