mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-22 19:19:52 +02:00
feat: more customizations
This commit is contained in:
TrèsAbhi committed
1 parent
6a18abf17f
commit
38f3ccfbd8
4 files changed
+627
-333
No files matched your search
@@ -1,25 +1,37 @@
|
||||
import * as radixColors from '@radix-ui/colors';
|
||||
import { DragHandleDots2Icon } from '@radix-ui/react-icons';
|
||||
import {
|
||||
DragHandleDots2Icon,
|
||||
EnterFullScreenIcon,
|
||||
ExitFullScreenIcon,
|
||||
ImageIcon,
|
||||
} from '@radix-ui/react-icons';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Flex,
|
||||
IconButton,
|
||||
Inset,
|
||||
ScrollArea,
|
||||
Select,
|
||||
Switch,
|
||||
Text,
|
||||
TextField,
|
||||
} from '@radix-ui/themes';
|
||||
import { produce } from 'immer';
|
||||
import { capitalize, startCase, times } from 'lodash';
|
||||
import { capitalize, clamp, startCase, times } from 'lodash';
|
||||
import {
|
||||
Dispatch,
|
||||
ReactNode,
|
||||
SetStateAction,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import {
|
||||
EmbedConfig,
|
||||
EmbedConfigItemType,
|
||||
EmbedConfigType,
|
||||
ExtractEmbedConfigType,
|
||||
RadixColor,
|
||||
@@ -29,7 +41,10 @@ import {
|
||||
radixGrays,
|
||||
RadixRadius,
|
||||
RadixSize,
|
||||
RadixSizeNo0,
|
||||
RadixTextColor,
|
||||
RadixTextWeight,
|
||||
radixTextWeights,
|
||||
} from '../app/tools/embed/types';
|
||||
import { toColorVar, toRadiusVar } from '../app/tools/embed/utilities';
|
||||
|
||||
@@ -37,13 +52,19 @@ interface EmbedConfigInputsProps {
|
||||
config: EmbedConfig;
|
||||
state: ExtractEmbedConfigType<EmbedConfig>;
|
||||
setState: Dispatch<SetStateAction<ExtractEmbedConfigType<EmbedConfig>>>;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export function EmbedConfigInputs({
|
||||
config,
|
||||
state,
|
||||
setState,
|
||||
children,
|
||||
}: EmbedConfigInputsProps) {
|
||||
const [expanded, setExpanded] = useState(true);
|
||||
const [backgroundImage, setBackgroundImage] = useState(
|
||||
'https://upload.wikimedia.org/wikipedia/commons/f/f6/Swiss_National_Park_131.JPG',
|
||||
);
|
||||
const mutateState = useCallback(
|
||||
(recipe: (draft: ExtractEmbedConfigType<EmbedConfig>) => void) => {
|
||||
setState(produce(recipe));
|
||||
@@ -56,164 +77,133 @@ export function EmbedConfigInputs({
|
||||
|
||||
if (!wrapper.current) return;
|
||||
|
||||
wrapper.current.style.top = `${parseFloat(wrapper.current.style.top) + event.movementY}px`;
|
||||
wrapper.current.style.right = `${parseFloat(wrapper.current.style.right) - event.movementX}px`;
|
||||
wrapper.current.style.top = `${clamp(parseFloat(wrapper.current.style.top) + event.movementY, 32, window.innerHeight - 32 - 32)}px`;
|
||||
wrapper.current.style.right = `${clamp(parseFloat(wrapper.current.style.right) - event.movementX, 32, window.innerWidth - 32 - 320)}px`;
|
||||
}, []);
|
||||
|
||||
const handlePointerUp = useCallback((event: PointerEvent) => {
|
||||
const handlePointerUp = useCallback(() => {
|
||||
window.removeEventListener('pointermove', handlePointerMove);
|
||||
window.removeEventListener('pointerup', handlePointerUp);
|
||||
}, []);
|
||||
const fileInput = useRef<HTMLInputElement>();
|
||||
|
||||
useEffect(() => {
|
||||
fileInput.current = document.createElement('input');
|
||||
fileInput.current.type = 'file';
|
||||
fileInput.current.style.display = 'none';
|
||||
fileInput.current.accept = 'image/*';
|
||||
fileInput.current.onchange = (event) => {
|
||||
const file = (event.target as HTMLInputElement).files?.[0];
|
||||
if (!file) return;
|
||||
setBackgroundImage(URL.createObjectURL(file));
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Card
|
||||
style={{ position: 'fixed', top: 0, right: 0, minWidth: 320 }}
|
||||
ref={wrapper}
|
||||
<Flex
|
||||
width="100vw"
|
||||
height="100vh"
|
||||
align="center"
|
||||
justify="center"
|
||||
overflow="hidden"
|
||||
style={{
|
||||
background: `url(${backgroundImage}) center / cover no-repeat`,
|
||||
}}
|
||||
>
|
||||
<Flex
|
||||
align="center"
|
||||
justify="center"
|
||||
p="2"
|
||||
mb="2"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-panel-translucent)',
|
||||
borderRadius: 'var(--radius-2)',
|
||||
cursor: 'grab',
|
||||
}}
|
||||
onPointerDown={(event) => {
|
||||
window.addEventListener('pointermove', handlePointerMove);
|
||||
window.addEventListener('pointerup', handlePointerUp);
|
||||
}}
|
||||
<Card
|
||||
style={{ position: 'fixed', top: 32, right: 32, minWidth: 320 }}
|
||||
ref={wrapper}
|
||||
>
|
||||
<DragHandleDots2Icon style={{ transform: 'rotate(90deg)' }} />
|
||||
</Flex>
|
||||
<Inset mb="4">
|
||||
<Flex
|
||||
align="center"
|
||||
justify="center"
|
||||
p="2"
|
||||
mb={expanded ? '2' : '0'}
|
||||
position="relative"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-panel-translucent)',
|
||||
cursor: 'grab',
|
||||
}}
|
||||
onPointerDown={(event) => {
|
||||
event.preventDefault();
|
||||
window.addEventListener('pointermove', handlePointerMove);
|
||||
window.addEventListener('pointerup', handlePointerUp);
|
||||
}}
|
||||
>
|
||||
<Text color="gray" trim="end">
|
||||
<DragHandleDots2Icon style={{ transform: 'rotate(90deg)' }} />
|
||||
</Text>
|
||||
|
||||
<ScrollArea
|
||||
scrollbars="vertical"
|
||||
style={{ height: '100%', maxHeight: 640 }}
|
||||
>
|
||||
<Flex direction="column" gap="2">
|
||||
{Object.entries(config).map(([key, setting]) => {
|
||||
let control: ReactNode;
|
||||
<Box
|
||||
position="absolute"
|
||||
right="0"
|
||||
top="50%"
|
||||
pr="2"
|
||||
style={{ transform: 'translateY(-25%)' }}
|
||||
>
|
||||
<IconButton
|
||||
variant="ghost"
|
||||
color="gray"
|
||||
onClick={() => setExpanded((expanded) => !expanded)}
|
||||
>
|
||||
{expanded ? <ExitFullScreenIcon /> : <EnterFullScreenIcon />}
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Inset>
|
||||
|
||||
switch (setting.type) {
|
||||
case EmbedConfigType.Number: {
|
||||
control = (
|
||||
<TextField.Root
|
||||
size="1"
|
||||
style={{ width: 64 }}
|
||||
type="number"
|
||||
value={state[key] as number}
|
||||
onChange={(event) => {
|
||||
mutateState((draft) => {
|
||||
draft[key] = (
|
||||
event.target as HTMLInputElement
|
||||
).valueAsNumber;
|
||||
});
|
||||
}}
|
||||
>
|
||||
{setting.unit && (
|
||||
<TextField.Slot side="right">px</TextField.Slot>
|
||||
)}
|
||||
</TextField.Root>
|
||||
);
|
||||
break;
|
||||
}
|
||||
{expanded && (
|
||||
<ScrollArea
|
||||
scrollbars="vertical"
|
||||
style={{ height: '100%', maxHeight: 640 }}
|
||||
>
|
||||
<Flex direction="column" gap="2">
|
||||
<Button
|
||||
variant="outline"
|
||||
color="gray"
|
||||
mb="6"
|
||||
onClick={() => fileInput.current?.click()}
|
||||
>
|
||||
<ImageIcon /> Upload test background
|
||||
</Button>
|
||||
|
||||
case EmbedConfigType.String: {
|
||||
control = (
|
||||
<TextField.Root
|
||||
placeholder="Empty"
|
||||
size="1"
|
||||
style={{ width: 64 }}
|
||||
value={state[key] as string}
|
||||
onChange={(event) => {
|
||||
mutateState((draft) => {
|
||||
draft[key] = (event.target as HTMLInputElement).value;
|
||||
});
|
||||
}}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
}
|
||||
{Object.entries(config).map(([key, setting]) => {
|
||||
let control: ReactNode;
|
||||
|
||||
case EmbedConfigType.SizeNo0:
|
||||
case EmbedConfigType.Size: {
|
||||
control = (
|
||||
<Select.Root
|
||||
size="1"
|
||||
value={state[key] as RadixSize}
|
||||
onValueChange={(value) => {
|
||||
mutateState((draft) => {
|
||||
draft[key] = value as RadixSize;
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Select.Trigger />
|
||||
<Select.Content>
|
||||
{times(10, (index) =>
|
||||
setting.type === EmbedConfigType.SizeNo0 &&
|
||||
index === 0 ? null : (
|
||||
<Select.Item key={index} value={`${index}`}>
|
||||
{index}
|
||||
</Select.Item>
|
||||
),
|
||||
)}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
);
|
||||
break;
|
||||
}
|
||||
switch (setting.type) {
|
||||
case EmbedConfigType.Boolean: {
|
||||
control = (
|
||||
<Switch
|
||||
checked={state[key] as boolean}
|
||||
onCheckedChange={(checked) =>
|
||||
mutateState((draft) => {
|
||||
draft[key] = checked;
|
||||
})
|
||||
}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
}
|
||||
|
||||
case EmbedConfigType.Radius: {
|
||||
control = (
|
||||
<Select.Root
|
||||
size="1"
|
||||
value={state[key] as RadixRadius}
|
||||
onValueChange={(value) => {
|
||||
mutateState((draft) => {
|
||||
draft[key] = value as RadixRadius;
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Select.Trigger />
|
||||
<Select.Content>
|
||||
{times(5, (index) => (
|
||||
<Select.Item key={index} value={`${index}`}>
|
||||
{index}
|
||||
</Select.Item>
|
||||
))}
|
||||
<Select.Item value="full">Full</Select.Item>
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
);
|
||||
break;
|
||||
}
|
||||
|
||||
case EmbedConfigType.Color: {
|
||||
control = (
|
||||
<>
|
||||
<Select.Root
|
||||
size="1"
|
||||
value={(state[key] as RadixColor).base}
|
||||
onValueChange={(value) => {
|
||||
mutateState((draft) => {
|
||||
(draft[key] as RadixColor).base =
|
||||
value as RadixColorBase;
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Select.Trigger />
|
||||
<Select.Content>
|
||||
{Object.entries(radixColors)
|
||||
.filter(
|
||||
([key]) =>
|
||||
!key.endsWith('A') &&
|
||||
!key.endsWith('P3') &&
|
||||
!key.endsWith('Dark'),
|
||||
)
|
||||
.map(([key]) => (
|
||||
<Select.Item key={key} value={key}>
|
||||
case EmbedConfigType.FullTextControl: {
|
||||
control = (
|
||||
<>
|
||||
<Select.Root
|
||||
size="1"
|
||||
value={`${(state[key] as EmbedConfigItemType<EmbedConfigType.FullTextControl>).color}`}
|
||||
onValueChange={(value) => {
|
||||
mutateState((draft) => {
|
||||
(
|
||||
draft[
|
||||
key
|
||||
] as EmbedConfigItemType<EmbedConfigType.FullTextControl>
|
||||
).color = value as RadixTextColor;
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Select.Trigger />
|
||||
<Select.Content>
|
||||
<Select.Item value="undefined">
|
||||
<Box
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
@@ -221,139 +211,338 @@ export function EmbedConfigInputs({
|
||||
height: '1em',
|
||||
verticalAlign: 'text-top',
|
||||
borderRadius: toRadiusVar('full'),
|
||||
backgroundColor: toColorVar({
|
||||
base: key as RadixColorBase,
|
||||
variant: '9',
|
||||
}),
|
||||
backgroundColor: 'white',
|
||||
}}
|
||||
/>{' '}
|
||||
{capitalize(key)}
|
||||
White
|
||||
</Select.Item>
|
||||
))}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
|
||||
<Select.Root
|
||||
size="1"
|
||||
value={(state[key] as RadixColor).variant}
|
||||
onValueChange={(value) => {
|
||||
mutateState((draft) => {
|
||||
(draft[key] as RadixColor).variant =
|
||||
value as RadixColorVariant;
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Select.Trigger />
|
||||
<Select.Content>
|
||||
{times(12, (index) => {
|
||||
const variant =
|
||||
`${index + 1}` as RadixColorVariantRaw;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Select.Item key={key} value={variant}>
|
||||
<Box
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
width: '1em',
|
||||
height: '1em',
|
||||
verticalAlign: 'text-top',
|
||||
borderRadius: toRadiusVar('full'),
|
||||
backgroundColor: toColorVar({
|
||||
base: (state[key] as RadixColor).base,
|
||||
variant,
|
||||
}),
|
||||
}}
|
||||
/>{' '}
|
||||
{variant}
|
||||
</Select.Item>
|
||||
<Select.Item key={key} value={`a${variant}`}>
|
||||
<Box
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
overflow: 'hidden',
|
||||
width: '1em',
|
||||
height: '1em',
|
||||
verticalAlign: 'text-top',
|
||||
borderRadius: toRadiusVar('full'),
|
||||
backgroundColor: toColorVar({
|
||||
base: (state[key] as RadixColor).base,
|
||||
variant: `a${variant}`,
|
||||
}),
|
||||
}}
|
||||
>
|
||||
<Select.Item value="gray">
|
||||
<Box
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
width: '1em',
|
||||
height: '1em',
|
||||
verticalAlign: 'text-top',
|
||||
borderRadius: toRadiusVar('full'),
|
||||
backgroundColor: 'gray',
|
||||
}}
|
||||
/>{' '}
|
||||
Gray
|
||||
</Select.Item>
|
||||
{Object.entries(radixColors)
|
||||
.filter(
|
||||
([key]) =>
|
||||
!key.endsWith('A') &&
|
||||
!key.endsWith('P3') &&
|
||||
!key.endsWith('Dark') &&
|
||||
!radixGrays.includes(key),
|
||||
)
|
||||
.map(([key]) => (
|
||||
<Select.Item key={key} value={key}>
|
||||
<Box
|
||||
style={{
|
||||
width: '50%',
|
||||
height: '100%',
|
||||
display: 'inline-block',
|
||||
width: '1em',
|
||||
height: '1em',
|
||||
verticalAlign: 'text-top',
|
||||
borderRadius: toRadiusVar('full'),
|
||||
backgroundColor: toColorVar({
|
||||
base: (state[key] as RadixColor).base,
|
||||
variant,
|
||||
base: key as RadixColorBase,
|
||||
variant: '9',
|
||||
}),
|
||||
}}
|
||||
/>
|
||||
</Box>{' '}
|
||||
{variant} translucent
|
||||
/>{' '}
|
||||
{capitalize(key)}
|
||||
</Select.Item>
|
||||
))}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
<Select.Root
|
||||
size="1"
|
||||
value={
|
||||
(
|
||||
state[
|
||||
key
|
||||
] as EmbedConfigItemType<EmbedConfigType.FullTextControl>
|
||||
).size
|
||||
}
|
||||
onValueChange={(value) => {
|
||||
mutateState((draft) => {
|
||||
(
|
||||
draft[
|
||||
key
|
||||
] as EmbedConfigItemType<EmbedConfigType.FullTextControl>
|
||||
).size = value as RadixSizeNo0;
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Select.Trigger />
|
||||
<Select.Content>
|
||||
{times(9, (index) => (
|
||||
<Select.Item key={index} value={`${index + 1}`}>
|
||||
Size {index + 1}
|
||||
</Select.Item>
|
||||
</>
|
||||
);
|
||||
})}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
</>
|
||||
);
|
||||
break;
|
||||
}
|
||||
))}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
<Select.Root
|
||||
size="1"
|
||||
value={
|
||||
(
|
||||
state[
|
||||
key
|
||||
] as EmbedConfigItemType<EmbedConfigType.FullTextControl>
|
||||
).weight
|
||||
}
|
||||
onValueChange={(value) => {
|
||||
mutateState((draft) => {
|
||||
(
|
||||
draft[
|
||||
key
|
||||
] as EmbedConfigItemType<EmbedConfigType.FullTextControl>
|
||||
).weight = value as RadixTextWeight;
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Select.Trigger />
|
||||
<Select.Content>
|
||||
{radixTextWeights.map((weight) => (
|
||||
<Select.Item key={weight} value={weight}>
|
||||
{startCase(weight)}
|
||||
</Select.Item>
|
||||
))}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
</>
|
||||
);
|
||||
break;
|
||||
}
|
||||
|
||||
case EmbedConfigType.TextColor: {
|
||||
control = (
|
||||
<Select.Root
|
||||
size="1"
|
||||
value={`${state[key]}`}
|
||||
onValueChange={(value) => {
|
||||
mutateState((draft) => {
|
||||
draft[key] = value as RadixTextColor;
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Select.Trigger />
|
||||
<Select.Content>
|
||||
<Select.Item value="undefined">
|
||||
<Box
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
width: '1em',
|
||||
height: '1em',
|
||||
verticalAlign: 'text-top',
|
||||
borderRadius: toRadiusVar('full'),
|
||||
backgroundColor: 'white',
|
||||
case EmbedConfigType.Number: {
|
||||
control = (
|
||||
<TextField.Root
|
||||
size="1"
|
||||
style={{ width: 64 }}
|
||||
type="number"
|
||||
value={state[key] as number}
|
||||
onChange={(event) => {
|
||||
mutateState((draft) => {
|
||||
draft[key] = (
|
||||
event.target as HTMLInputElement
|
||||
).valueAsNumber;
|
||||
});
|
||||
}}
|
||||
>
|
||||
{setting.unit && (
|
||||
<TextField.Slot side="right">px</TextField.Slot>
|
||||
)}
|
||||
</TextField.Root>
|
||||
);
|
||||
break;
|
||||
}
|
||||
|
||||
case EmbedConfigType.String: {
|
||||
control = (
|
||||
<TextField.Root
|
||||
placeholder="Empty"
|
||||
size="1"
|
||||
style={{ width: 64 }}
|
||||
value={state[key] as string}
|
||||
onChange={(event) => {
|
||||
mutateState((draft) => {
|
||||
draft[key] = (
|
||||
event.target as HTMLInputElement
|
||||
).value;
|
||||
});
|
||||
}}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
}
|
||||
|
||||
case EmbedConfigType.SizeNo0:
|
||||
case EmbedConfigType.Size: {
|
||||
control = (
|
||||
<Select.Root
|
||||
size="1"
|
||||
value={state[key] as RadixSize}
|
||||
onValueChange={(value) => {
|
||||
mutateState((draft) => {
|
||||
draft[key] = value as RadixSize;
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Select.Trigger />
|
||||
<Select.Content>
|
||||
{times(10, (index) =>
|
||||
setting.type === EmbedConfigType.SizeNo0 &&
|
||||
index === 0 ? null : (
|
||||
<Select.Item key={index} value={`${index}`}>
|
||||
{index}
|
||||
</Select.Item>
|
||||
),
|
||||
)}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
);
|
||||
break;
|
||||
}
|
||||
|
||||
case EmbedConfigType.Radius: {
|
||||
control = (
|
||||
<Select.Root
|
||||
size="1"
|
||||
value={state[key] as RadixRadius}
|
||||
onValueChange={(value) => {
|
||||
mutateState((draft) => {
|
||||
draft[key] = value as RadixRadius;
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Select.Trigger />
|
||||
<Select.Content>
|
||||
{times(5, (index) => (
|
||||
<Select.Item key={index} value={`${index}`}>
|
||||
{index}
|
||||
</Select.Item>
|
||||
))}
|
||||
<Select.Item value="full">Full</Select.Item>
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
);
|
||||
break;
|
||||
}
|
||||
|
||||
case EmbedConfigType.Color: {
|
||||
control = (
|
||||
<>
|
||||
<Select.Root
|
||||
size="1"
|
||||
value={(state[key] as RadixColor).base}
|
||||
onValueChange={(value) => {
|
||||
mutateState((draft) => {
|
||||
(draft[key] as RadixColor).base =
|
||||
value as RadixColorBase;
|
||||
});
|
||||
}}
|
||||
/>{' '}
|
||||
White
|
||||
</Select.Item>
|
||||
<Select.Item value="gray">
|
||||
<Box
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
width: '1em',
|
||||
height: '1em',
|
||||
verticalAlign: 'text-top',
|
||||
borderRadius: toRadiusVar('full'),
|
||||
backgroundColor: 'gray',
|
||||
>
|
||||
<Select.Trigger />
|
||||
<Select.Content>
|
||||
{Object.entries(radixColors)
|
||||
.filter(
|
||||
([key]) =>
|
||||
!key.endsWith('A') &&
|
||||
!key.endsWith('P3') &&
|
||||
!key.endsWith('Dark'),
|
||||
)
|
||||
.map(([key]) => (
|
||||
<Select.Item key={key} value={key}>
|
||||
<Box
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
width: '1em',
|
||||
height: '1em',
|
||||
verticalAlign: 'text-top',
|
||||
borderRadius: toRadiusVar('full'),
|
||||
backgroundColor: toColorVar({
|
||||
base: key as RadixColorBase,
|
||||
variant: '9',
|
||||
}),
|
||||
}}
|
||||
/>{' '}
|
||||
{capitalize(key)}
|
||||
</Select.Item>
|
||||
))}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
|
||||
<Select.Root
|
||||
size="1"
|
||||
value={(state[key] as RadixColor).variant}
|
||||
onValueChange={(value) => {
|
||||
mutateState((draft) => {
|
||||
(draft[key] as RadixColor).variant =
|
||||
value as RadixColorVariant;
|
||||
});
|
||||
}}
|
||||
/>{' '}
|
||||
Gray
|
||||
</Select.Item>
|
||||
{Object.entries(radixColors)
|
||||
.filter(
|
||||
([key]) =>
|
||||
!key.endsWith('A') &&
|
||||
!key.endsWith('P3') &&
|
||||
!key.endsWith('Dark') &&
|
||||
!radixGrays.includes(key),
|
||||
)
|
||||
.map(([key]) => (
|
||||
<Select.Item key={key} value={key}>
|
||||
>
|
||||
<Select.Trigger />
|
||||
<Select.Content>
|
||||
{times(12, (index) => {
|
||||
const variant =
|
||||
`${index + 1}` as RadixColorVariantRaw;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Select.Item key={key} value={variant}>
|
||||
<Box
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
width: '1em',
|
||||
height: '1em',
|
||||
verticalAlign: 'text-top',
|
||||
borderRadius: toRadiusVar('full'),
|
||||
backgroundColor: toColorVar({
|
||||
base: (state[key] as RadixColor).base,
|
||||
variant,
|
||||
}),
|
||||
}}
|
||||
/>{' '}
|
||||
{variant}
|
||||
</Select.Item>
|
||||
<Select.Item key={key} value={`a${variant}`}>
|
||||
<Box
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
overflow: 'hidden',
|
||||
width: '1em',
|
||||
height: '1em',
|
||||
verticalAlign: 'text-top',
|
||||
borderRadius: toRadiusVar('full'),
|
||||
backgroundColor: toColorVar({
|
||||
base: (state[key] as RadixColor).base,
|
||||
variant: `a${variant}`,
|
||||
}),
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
style={{
|
||||
width: '50%',
|
||||
height: '100%',
|
||||
backgroundColor: toColorVar({
|
||||
base: (state[key] as RadixColor)
|
||||
.base,
|
||||
variant,
|
||||
}),
|
||||
}}
|
||||
/>
|
||||
</Box>{' '}
|
||||
{variant} translucent
|
||||
</Select.Item>
|
||||
</>
|
||||
);
|
||||
})}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
</>
|
||||
);
|
||||
break;
|
||||
}
|
||||
|
||||
case EmbedConfigType.TextColor: {
|
||||
control = (
|
||||
<Select.Root
|
||||
size="1"
|
||||
value={`${state[key]}`}
|
||||
onValueChange={(value) => {
|
||||
mutateState((draft) => {
|
||||
draft[key] = value as RadixTextColor;
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Select.Trigger />
|
||||
<Select.Content>
|
||||
<Select.Item value="undefined">
|
||||
<Box
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
@@ -361,43 +550,90 @@ export function EmbedConfigInputs({
|
||||
height: '1em',
|
||||
verticalAlign: 'text-top',
|
||||
borderRadius: toRadiusVar('full'),
|
||||
backgroundColor: toColorVar({
|
||||
base: key as RadixColorBase,
|
||||
variant: '9',
|
||||
}),
|
||||
backgroundColor: 'white',
|
||||
}}
|
||||
/>{' '}
|
||||
{capitalize(key)}
|
||||
White
|
||||
</Select.Item>
|
||||
))}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
);
|
||||
break;
|
||||
}
|
||||
}
|
||||
<Select.Item value="gray">
|
||||
<Box
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
width: '1em',
|
||||
height: '1em',
|
||||
verticalAlign: 'text-top',
|
||||
borderRadius: toRadiusVar('full'),
|
||||
backgroundColor: 'gray',
|
||||
}}
|
||||
/>{' '}
|
||||
Gray
|
||||
</Select.Item>
|
||||
{Object.entries(radixColors)
|
||||
.filter(
|
||||
([key]) =>
|
||||
!key.endsWith('A') &&
|
||||
!key.endsWith('P3') &&
|
||||
!key.endsWith('Dark') &&
|
||||
!radixGrays.includes(key),
|
||||
)
|
||||
.map(([key]) => (
|
||||
<Select.Item key={key} value={key}>
|
||||
<Box
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
width: '1em',
|
||||
height: '1em',
|
||||
verticalAlign: 'text-top',
|
||||
borderRadius: toRadiusVar('full'),
|
||||
backgroundColor: toColorVar({
|
||||
base: key as RadixColorBase,
|
||||
variant: '9',
|
||||
}),
|
||||
}}
|
||||
/>{' '}
|
||||
{capitalize(key)}
|
||||
</Select.Item>
|
||||
))}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Flex
|
||||
direction="column"
|
||||
gap="1"
|
||||
mb="1"
|
||||
pb={setting.pad ? '6' : undefined}
|
||||
>
|
||||
<Text color="gray" size="2">
|
||||
{capitalize(startCase(key))}
|
||||
</Text>
|
||||
{control && <Flex gap="1">{control}</Flex>}
|
||||
{!control && (
|
||||
<Text color="red" size="1">
|
||||
Immutable
|
||||
</Text>
|
||||
)}
|
||||
</Flex>
|
||||
);
|
||||
})}
|
||||
</Flex>
|
||||
</ScrollArea>
|
||||
</Card>
|
||||
return (
|
||||
<Flex
|
||||
direction="column"
|
||||
gap="1"
|
||||
mb="1"
|
||||
pb={setting.pad ? '6' : undefined}
|
||||
>
|
||||
<Text color="gray" size="2">
|
||||
{capitalize(startCase(key))}
|
||||
</Text>
|
||||
{control && <Flex gap="1">{control}</Flex>}
|
||||
{!control && (
|
||||
<Text color="red" size="1">
|
||||
Immutable
|
||||
</Text>
|
||||
)}
|
||||
</Flex>
|
||||
);
|
||||
})}
|
||||
</Flex>
|
||||
</ScrollArea>
|
||||
)}
|
||||
|
||||
{!expanded && (
|
||||
<Flex justify="center">
|
||||
<Text size="2" color="gray">
|
||||
Expand to configure
|
||||
</Text>
|
||||
</Flex>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{children}
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
@@ -8,6 +8,10 @@ import {
|
||||
toWidthVar,
|
||||
} from '../app/tools/embed/utilities';
|
||||
import { TankDefinition } from '../core/blitzkit/tankDefinitions';
|
||||
import { ClassHeavy } from './ClassIcon/components/ClassHeavy';
|
||||
import { ClassLight } from './ClassIcon/components/ClassLight';
|
||||
import { ClassMedium } from './ClassIcon/components/ClassMedium';
|
||||
import { ClassTankDestroyer } from './ClassIcon/components/ClassTankDestroyer';
|
||||
|
||||
interface TanksEmbedWrapperProps {
|
||||
children: ReactNode;
|
||||
@@ -27,11 +31,12 @@ export function TanksEmbedWrapper({ children, state }: TanksEmbedWrapperProps) {
|
||||
}
|
||||
|
||||
interface TanksEmbedCardProps {
|
||||
tank: TankDefinition;
|
||||
tank: TankDefinition | null;
|
||||
state: TanksEmbedState;
|
||||
}
|
||||
|
||||
export function TanksEmbedCard({ tank, state }: TanksEmbedCardProps) {
|
||||
const { color: cardTitleColor, ...restCardTitleProps } = state.cardTitle;
|
||||
return (
|
||||
<Flex
|
||||
direction="column"
|
||||
@@ -48,7 +53,40 @@ export function TanksEmbedCard({ tank, state }: TanksEmbedCardProps) {
|
||||
}}
|
||||
p={state.cardHeaderPadding}
|
||||
>
|
||||
{tank.name}
|
||||
<Text
|
||||
color={
|
||||
state.cardTitleAutoColor
|
||||
? tank === null
|
||||
? cardTitleColor
|
||||
: tank.treeType === 'collector'
|
||||
? 'blue'
|
||||
: tank.treeType === 'premium'
|
||||
? 'amber'
|
||||
: cardTitleColor
|
||||
: cardTitleColor
|
||||
}
|
||||
{...restCardTitleProps}
|
||||
>
|
||||
<Flex align="center" gap="1">
|
||||
{tank !== null && state.cardTitleAutoIcon && (
|
||||
<>
|
||||
{tank.class === 'lightTank' && (
|
||||
<ClassLight width="1em" height="1em" />
|
||||
)}
|
||||
{tank.class === 'mediumTank' && (
|
||||
<ClassMedium width="1em" height="1em" />
|
||||
)}
|
||||
{tank.class === 'heavyTank' && (
|
||||
<ClassHeavy width="1em" height="1em" />
|
||||
)}
|
||||
{tank.class === 'AT-SPG' && (
|
||||
<ClassTankDestroyer width="1em" height="1em" />
|
||||
)}
|
||||
</>
|
||||
)}{' '}
|
||||
{tank === null ? 'Total' : tank.name}
|
||||
</Flex>
|
||||
</Text>
|
||||
</Flex>
|
||||
|
||||
<Flex p={state.cardBodyPadding}>
|
||||
@@ -62,10 +100,10 @@ export function TanksEmbedCard({ tank, state }: TanksEmbedCardProps) {
|
||||
gap={state.columnGap}
|
||||
flexGrow="1"
|
||||
>
|
||||
<Text size={state.columnValueSize} color={state.columnValueColor}>
|
||||
<Text {...state.columnValue}>
|
||||
70{state[`column${column}Unit`]}
|
||||
</Text>
|
||||
<Text size={state.columnLabelSize} color={state.columnLabelColor}>
|
||||
<Text {...state.columnLabel}>
|
||||
{state[`column${column}Label`]}
|
||||
</Text>
|
||||
</Flex>
|
||||
|
||||
Reference in new issue
Block a user