add large table size

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

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import { memo, useMemo } from 'react';
 import { generatePath, Link } from 'react-router-dom';
 
@@ -9,13 +10,9 @@ import {
     TableColumnTextContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 import { AppRoute } from '/@/renderer/router/routes';
-import { Badge } from '/@/shared/components/badge/badge';
-import { Group } from '/@/shared/components/group/group';
 import { Skeleton } from '/@/shared/components/skeleton/skeleton';
+import { Text } from '/@/shared/components/text/text';
 import { Genre } from '/@/shared/types/domain-types';
-import { stringToColor } from '/@/shared/utils/string-to-color';
-
-const MAX_GENRES = 4;
 
 const GenreColumn = (props: ItemTableListInnerColumn) => {
     const row: Genre[] | undefined = (props.data as (Genre[] | undefined)[])[props.rowIndex]?.[
@@ -25,30 +22,36 @@ const GenreColumn = (props: ItemTableListInnerColumn) => {
     const genres = useMemo(() => {
         if (!row) return [];
         return row.map((genre) => {
-            const { color, isLight } = stringToColor(genre.name);
-            const path = generatePath(AppRoute.LIBRARY_GENRES_ALBUMS, { genreId: genre.id });
-            return { ...genre, color, isLight, path };
+            const path = generatePath(AppRoute.LIBRARY_GENRES_ALBUMS, {
+                genreId: genre.id,
+            });
+            return { ...genre, path };
         });
     }, [row]);
 
     if (Array.isArray(row)) {
         return (
             <TableColumnContainer {...props}>
-                <Group className={styles.group} wrap="wrap">
-                    {genres.slice(0, MAX_GENRES).map((genre) => (
-                        <Badge
+                <div
+                    className={clsx(styles.genresContainer, {
+                        [styles.compact]: props.size === 'compact',
+                        [styles.large]: props.size === 'large',
+                    })}
+                >
+                    {genres.map((genre, index) => (
+                        <Text
                             component={Link}
+                            isLink
+                            isMuted
+                            isNoSelect
                             key={genre.id}
-                            style={{
-                                backgroundColor: genre.color,
-                                color: genre.isLight ? 'black' : 'white',
-                            }}
                             to={genre.path}
                         >
                             {genre.name}
-                        </Badge>
+                            {index < genres.length - 1 && ', '}
+                        </Text>
                     ))}
-                </Group>
+                </div>
             </TableColumnContainer>
         );
     }