progress on table columns

src/renderer/components/item-list/item-table-list/columns/default-column.tsx

@@ -0,0 +1,25 @@
+import {
+    ItemTableListInnerColumn,
+    TableColumnContainer,
+} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { Skeleton } from '/@/shared/components/skeleton/skeleton';
+
+export const DefaultColumn = (props: ItemTableListInnerColumn) => {
+    const row: any | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
+        props.columns[props.columnIndex].id
+    ];
+
+    if (typeof row === 'string') {
+        return <TableColumnContainer {...props}>{row}</TableColumnContainer>;
+    }
+
+    if (typeof row === 'undefined') {
+        return (
+            <TableColumnContainer {...props}>
+                <Skeleton />
+            </TableColumnContainer>
+        );
+    }
+
+    return null;
+};

src/renderer/components/item-list/item-table-list/columns/duration-column.tsx

@@ -0,0 +1,23 @@
+import formatDuration from 'format-duration';
+
+import {
+    ItemTableListInnerColumn,
+    TableColumnContainer,
+} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { Skeleton } from '/@/shared/components/skeleton/skeleton';
+
+export const DurationColumn = (props: ItemTableListInnerColumn) => {
+    const row: number | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
+        props.columns[props.columnIndex].id
+    ];
+
+    if (typeof row === 'number') {
+        return <TableColumnContainer {...props}>{formatDuration(row)}</TableColumnContainer>;
+    }
+
+    return (
+        <TableColumnContainer {...props}>
+            <Skeleton />
+        </TableColumnContainer>
+    );
+};

src/renderer/components/item-list/item-table-list/columns/genre-column.tsx

@@ -0,0 +1,21 @@
+import {
+    ItemTableListInnerColumn,
+    TableColumnContainer,
+} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { Genre } from '/@/shared/types/domain-types';
+
+export const GenreColumn = (props: ItemTableListInnerColumn) => {
+    const row: Genre[] | undefined = (props.data as (Genre[] | undefined)[])[props.rowIndex]?.[
+        props.columns[props.columnIndex].id
+    ];
+
+    if (Array.isArray(row)) {
+        return (
+            <TableColumnContainer {...props}>
+                {row.map((genre) => genre?.name).join(', ')}
+            </TableColumnContainer>
+        );
+    }
+
+    return null;
+};

src/renderer/components/item-list/item-table-list/columns/image-column.module.css

@@ -0,0 +1,3 @@
+.skeleton {
+    aspect-ratio: 1 / 1;
+}

src/renderer/components/item-list/item-table-list/columns/image-column.tsx

@@ -0,0 +1,28 @@
+import styles from './image-column.module.css';
+
+import {
+    ItemTableListInnerColumn,
+    TableColumnContainer,
+} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { Image } from '/@/shared/components/image/image';
+import { Skeleton } from '/@/shared/components/skeleton/skeleton';
+
+export const ImageColumn = (props: ItemTableListInnerColumn) => {
+    const row: string | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
+        props.columns[props.columnIndex].id
+    ];
+
+    if (typeof row === 'string') {
+        return (
+            <TableColumnContainer {...props}>
+                <Image src={row} />
+            </TableColumnContainer>
+        );
+    }
+
+    return (
+        <TableColumnContainer {...props}>
+            <Skeleton containerClassName={styles.skeleton} />
+        </TableColumnContainer>
+    );
+};

src/renderer/components/item-list/item-table-list/columns/name-column.tsx

@@ -0,0 +1,21 @@
+import {
+    ItemTableListInnerColumn,
+    TableColumnContainer,
+} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { Skeleton } from '/@/shared/components/skeleton/skeleton';
+
+export const NameColumn = (props: ItemTableListInnerColumn) => {
+    const row: string | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
+        props.columns[props.columnIndex].id
+    ];
+
+    if (typeof row === 'string') {
+        return <TableColumnContainer {...props}>{row}</TableColumnContainer>;
+    }
+
+    return (
+        <TableColumnContainer {...props}>
+            <Skeleton />
+        </TableColumnContainer>
+    );
+};

src/renderer/components/item-list/item-table-list/columns/row-index-column.tsx

@@ -0,0 +1,8 @@
+import {
+    ItemTableListInnerColumn,
+    TableColumnContainer,
+} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+
+export const RowIndexColumn = (props: ItemTableListInnerColumn) => {
+    return <TableColumnContainer {...props}>{props.rowIndex + 1}</TableColumnContainer>;
+};