diff --git a/_components/AnimeRow.tsx b/_components/AnimeRow.tsx
new file mode 100644
index 0000000..64de0ec
--- /dev/null
+++ b/_components/AnimeRow.tsx
@@ -0,0 +1,107 @@
+import {formatDateIso} from "../_utils/date.ts"
+import {AnimeData, AnimeProgress, animeProgressToClassName, animeProgressToIconDef, animeProgressToTitle} from "../_utils/anime.ts"
+import {ratingToClassName} from "../_utils/rating.ts"
+
+
+export type AnimeRowColumnKind = "rating" | "progress" | "name" | "nameoriginal" | "namesort" | "hascontent" | "date"
+export type AnimeRowColumnPriority = undefined | "rating" | "progress" | "mixed"
+
+export const animeRowColumnKindDefault: AnimeRowColumnKind[] = ["rating", "name", "namesort", "hascontent", "date", "progress"]
+
+
+export type AnimeRowProps = {
+ anime: AnimeData,
+ columns?: AnimeRowColumnKind[]
+ priority?: AnimeRowColumnPriority
+}
+
+
+export function AnimeRow({anime, columns = animeRowColumnKindDefault, priority}: AnimeRowProps) {
+ const activeClass: string = anime.active ? "review-active" : ""
+ const activeClassFa: string = anime.active ? "fa-beat-fade" : ""
+
+ const ratingText: string = anime.rating ? `${anime.rating}` : ""
+
+ const ratingClass: string = ratingToClassName(anime.rating)
+
+ const progressClass: string = animeProgressToClassName(anime.progress)
+ const progressIcon: string = animeProgressToIconDef(anime.progress)
+ const progressTitle: string = animeProgressToTitle(anime.progress)
+
+ const priorityClass: string = priority ? `priority-${priority}` : ""
+
+ const columnsElements = columns.map((kind, index) => {
+ switch(kind) {
+ case "rating": {
+ return (
+ |
+
+ {ratingText}
+
+ |
+ )
+ }
+ case "progress": {
+ return (
+
+
+ {progressIcon && }
+
+ |
+ )
+ }
+ case "name": {
+ return (
+
+
+
+ {anime.name}
+
+
+ |
+ )
+ }
+ case "nameoriginal": {
+ return (
+
+
+ {anime.name_original}
+
+ |
+ )
+ }
+ case "namesort": {
+ return (
+
+
+ |
+ )
+ }
+ case "hascontent": {
+ return (
+
+
+ {anime.content && }
+
+ |
+ )
+ }
+ case "date": {
+ const date = formatDateIso(anime.date)
+ return (
+
+
+ |
+ )
+ }
+ }
+ })
+
+ return (
+
+ {columnsElements}
+
+ )
+}
\ No newline at end of file
diff --git a/_components/AnimeTable.tsx b/_components/AnimeTable.tsx
new file mode 100644
index 0000000..8dddf1e
--- /dev/null
+++ b/_components/AnimeTable.tsx
@@ -0,0 +1,101 @@
+import {AnimeData} from "../_utils/anime.ts"
+import {AnimeRow, AnimeRowColumnKind, animeRowColumnKindDefault, AnimeRowColumnPriority} from "./AnimeRow.tsx"
+
+
+export type AnimeTableProps = {
+ id?: string,
+ anime: AnimeData[],
+ columns?: AnimeRowColumnKind[]
+ priority?: AnimeRowColumnPriority
+}
+
+
+export function AnimeTable({id, anime, columns = animeRowColumnKindDefault, priority}: AnimeTableProps) {
+ const colElements = columns.map((column, index) => {
+ switch(column) {
+ case "rating": return (
+
+ )
+ case "progress": return (
+
+ )
+ case "name": return (
+
+ )
+ case "hascontent": return (
+
+ )
+ case "date": return (
+
+ )
+ }
+ })
+
+ const thElements = columns.map((column, index) => {
+ switch(column) {
+ case "rating": return (
+
+
+
+
+ |
+ )
+ case "progress": return (
+
+
+
+
+ |
+ )
+ case "name": return (
+
+
+ Title
+
+ |
+ )
+ case "namesort": return (
+
+
+ Sort by
+
+ |
+ )
+ case "hascontent":
+ return (
+
+
+
+
+ |
+ )
+ case "date": return (
+
+
+ Date
+
+ |
+ )
+ }
+ })
+
+ const trTdElements = anime.map((ani: AnimeData) => (
+
+ ))
+
+ return (
+
+
+ {colElements}
+
+
+
+ {thElements}
+
+
+
+ {trTdElements}
+
+
+ )
+}
\ No newline at end of file
diff --git a/_includes/anime.tsx b/_includes/anime.tsx
index f51125e..f607670 100644
--- a/_includes/anime.tsx
+++ b/_includes/anime.tsx
@@ -17,6 +17,19 @@ export default function(data: AnimeData, helpers: Lume.Helpers) {
const dateSeparator = (data.progress || data.hours_played) ?
: null
+ const nameOriginalRow = (
+
+
+ {data.name_original}
+
+
+ )
+
+ const nameSeparator = (data.name_original) ?
: null
+
const progressRow = data.progress ? (
+ {data.children}
+
+ )
+ : null;
+
+ const anime: AnimeData[] = data.search.pages("anime");
+
+ const animeSection = (
+
+ );
+
+ return (
+
+ {introSection}
+ {animeSection}
+
+
+
+ );
+}