diff --git a/src/app/tools/embed/[embed]/customize/page.tsx b/src/app/tools/embed/[embed]/customize/page.tsx index 06221862a..85291fa41 100644 --- a/src/app/tools/embed/[embed]/customize/page.tsx +++ b/src/app/tools/embed/[embed]/customize/page.tsx @@ -1,9 +1,17 @@ 'use client'; -import { CopyIcon, ImageIcon } from '@radix-ui/react-icons'; +import { + CodeIcon, + HeightIcon, + ImageIcon, + Link2Icon, + TimerIcon, + WidthIcon, +} from '@radix-ui/react-icons'; import { Box, Button, Flex, Heading, ScrollArea, Text } from '@radix-ui/themes'; import { capitalize, startCase } from 'lodash'; import { ReactNode, useEffect, useRef, useState } from 'react'; +import { CopyButton } from '../../../../../components/CopyButton'; import { NAVBAR_HEIGHT } from '../../../../../components/Navbar'; import PageWrapper from '../../../../../components/PageWrapper'; import { imgur } from '../../../../../core/blitzkit/imgur'; @@ -58,11 +66,11 @@ export default function Page({ style={{ height: '100%', maxWidth: 320 }} > - Customize + Export - - - + + `${embedStateStore.getState().width}`} + > + + Copy width + + `${embedStateStore.getState().height}`} + > + + Copy height + + '`'}> + + Copy framerate + + Customize + {Object.keys(config).map((configKey) => { const item = config[configKey]; let control: ReactNode; @@ -122,21 +146,25 @@ export default function Page({ case EmbedItemType.Radius: { control = ; + oneLiner = true; break; } case EmbedItemType.Size: { control = ; + oneLiner = true; break; } case EmbedItemType.SizeWithout0: { control = ; + oneLiner = true; break; } case EmbedItemType.Slider: { control = ; + oneLiner = true; break; } @@ -152,6 +180,7 @@ export default function Page({ case EmbedItemType.Enum: { control = ; + oneLiner = true; break; } } @@ -165,7 +194,12 @@ export default function Page({ pb={item.pad ? '6' : undefined} > {capitalize(startCase(configKey as string))} - + {control} diff --git a/src/components/CopyButton.tsx b/src/components/CopyButton.tsx new file mode 100644 index 000000000..71074c015 --- /dev/null +++ b/src/components/CopyButton.tsx @@ -0,0 +1,27 @@ +import { Button, ButtonProps, Tooltip } from '@radix-ui/themes'; +import { useState } from 'react'; + +interface CopyButtonProps extends ButtonProps { + copy: () => string | undefined; +} + +export function CopyButton({ copy, ...props }: CopyButtonProps) { + const [tooltipOpen, setTooltipOpen] = useState(false); + + return ( + +