add initial table columns

2026-05-10 04:30:25 +02:00 · 2025-10-03 23:08:34 -07:00
parent c27c05ac5d
commit ae8ca54a07
21 changed files with 511 additions and 28 deletions
@@ -1,21 +1,47 @@
 import {
    ItemTableListInnerColumn,
    TableColumnContainer,
+    TableColumnTextContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { Badge } from '/@/shared/components/badge/badge';
+import { Group } from '/@/shared/components/group/group';
+import { Skeleton } from '/@/shared/components/skeleton/skeleton';
 import { Genre } from '/@/shared/types/domain-types';
+import { stringToColor } from '/@/shared/utils/string-to-color';

 export const GenreColumn = (props: ItemTableListInnerColumn) => {
    const row: Genre[] | undefined = (props.data as (Genre[] | undefined)[])[props.rowIndex]?.[
        props.columns[props.columnIndex].id
    ];

+    const genres = (row || []).map((genre) => {
+        const { color, isLight } = stringToColor(genre.name);
+        return { ...genre, color, isLight };
+    });
+
    if (Array.isArray(row)) {
        return (
            <TableColumnContainer {...props}>
-                {row.map((genre) => genre?.name).join(', ')}
+                <Group gap="xs" wrap="nowrap">
+                    {genres.map((genre) => (
+                        <Badge
+                            key={genre.id}
+                            style={{
+                                backgroundColor: genre.color,
+                                color: genre.isLight ? 'black' : 'white',
+                            }}
+                        >
+                            {genre.name}
+                        </Badge>
+                    ))}
+                </Group>
            </TableColumnContainer>
        );
    }

-    return null;
+    return (
+        <TableColumnTextContainer {...props}>
+            <Skeleton />
+        </TableColumnTextContainer>
+    );
 };