🆙 Init V3

src/common/layout/limited-edition/LayoutLimitedEditionCompletePlateView.tsx

@@ -0,0 +1,40 @@
+import { FC, useMemo } from 'react';
+import { LocalizeText } from '../../../api';
+import { Base, BaseProps } from '../../Base';
+import { Column } from '../../Column';
+import { LayoutLimitedEditionStyledNumberView } from './LayoutLimitedEditionStyledNumberView';
+
+interface LayoutLimitedEditionCompletePlateViewProps extends BaseProps<HTMLDivElement>
+{
+    uniqueLimitedItemsLeft: number;
+    uniqueLimitedSeriesSize: number;
+}
+
+export const LayoutLimitedEditionCompletePlateView: FC<LayoutLimitedEditionCompletePlateViewProps> = props =>
+{
+    const { uniqueLimitedItemsLeft = 0, uniqueLimitedSeriesSize = 0, classNames = [], ...rest } = props;
+
+    const getClassNames = useMemo(() =>
+    {
+        const newClassNames: string[] = [ 'unique-complete-plate' ];
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ classNames ]);
+
+    return (
+        <Base classNames={ getClassNames } { ...rest }>
+            <Column className="plate-container" gap={ 0 }>
+                <div className="flex justify-between items-center">
+                    { LocalizeText('unique.items.left') }
+                    <div><LayoutLimitedEditionStyledNumberView value={ uniqueLimitedItemsLeft } /></div>
+                </div>
+                <div className="flex justify-between items-center">
+                    { LocalizeText('unique.items.number.sold') }
+                    <div><LayoutLimitedEditionStyledNumberView value={ uniqueLimitedSeriesSize } /></div>
+                </div>
+            </Column>
+        </Base>
+    );
+};