🆙 Init V3

src/components/avatar-editor/palette-set/AvatarEditorPaletteSetItemView.tsx

@@ -0,0 +1,25 @@
+import { ColorConverter, IPartColor } from '@nitrots/nitro-renderer';
+import { FC } from 'react';
+import { GetConfigurationValue } from '../../../api';
+import { LayoutCurrencyIcon, LayoutGridItemProps } from '../../../common';
+import { InfiniteGrid } from '../../../layout';
+
+export const AvatarEditorPaletteSetItem: FC<{
+    setType: string;
+    partColor: IPartColor;
+    isSelected: boolean;
+    width?: string;
+} & LayoutGridItemProps> = props =>
+{
+    const { setType = null, partColor = null, isSelected = false, width = '100%', ...rest } = props;
+
+    if(!partColor) return null;
+
+    const isHC = !GetConfigurationValue<boolean>('hc.disabled', false) && (partColor.clubLevel > 0);
+
+    return (
+        <InfiniteGrid.Item itemHighlight className="clear-bg" itemActive={ isSelected } itemColor={ ColorConverter.int2rgb(partColor.rgb) } { ...rest }>
+            { isHC && <LayoutCurrencyIcon className="absolute end-1 bottom-1" type="hc" /> }
+        </InfiniteGrid.Item>
+    );
+};

src/components/avatar-editor/palette-set/AvatarEditorPaletteSetView.tsx

@@ -0,0 +1,36 @@
+import { IPartColor } from '@nitrots/nitro-renderer';
+import { FC } from 'react';
+import { IAvatarEditorCategory } from '../../../api';
+import { useAvatarEditor } from '../../../hooks';
+import { InfiniteGrid } from '../../../layout';
+import { AvatarEditorPaletteSetItem } from './AvatarEditorPaletteSetItemView';
+
+export const AvatarEditorPaletteSetView: FC<{
+    category: IAvatarEditorCategory;
+    paletteIndex: number;
+    columnCount: number;
+}> = props =>
+{
+    const { category = null, paletteIndex = -1, columnCount = 3 } = props;
+    const { selectedColorParts = null, selectEditorColor = null } = useAvatarEditor();
+
+    const isPartColorSelected = (partColor: IPartColor) =>
+    {
+        if(!category || !category.setType || !selectedColorParts || !selectedColorParts[category.setType] || !selectedColorParts[category.setType][paletteIndex]) return false;
+
+        const selectedColorPart = selectedColorParts[category.setType][paletteIndex];
+
+        return (selectedColorPart.id === partColor.id);
+    };
+
+    return (
+        <InfiniteGrid<IPartColor> columnCount={ columnCount } itemRender={ (item: IPartColor) =>
+        {
+            if(!item) return null;
+
+            return (
+                <AvatarEditorPaletteSetItem isSelected={ isPartColorSelected(item) } partColor={ item } setType={ category.setType } width={ `calc(100% / ${ columnCount }` } onClick={ event => selectEditorColor(category.setType, paletteIndex, item.id) } />
+            );
+        } } items={ category.colorItems[paletteIndex] } overscan={ columnCount } />
+    );
+};

src/components/avatar-editor/palette-set/index.ts

@@ -0,0 +1,2 @@
+export * from './AvatarEditorPaletteSetItemView';
+export * from './AvatarEditorPaletteSetView';