diff --git a/src/app/tools/embed/[embed]/customize/components/Import.tsx b/src/app/tools/embed/[embed]/customize/components/Import.tsx new file mode 100644 index 000000000..514000978 --- /dev/null +++ b/src/app/tools/embed/[embed]/customize/components/Import.tsx @@ -0,0 +1,80 @@ +import { + AlertDialog, + Button, + Flex, + Heading, + Text, + TextField, + Tooltip, +} from '@radix-ui/themes'; +import { useRef, useState } from 'react'; +import * as EmbedState from '../../../../../../stores/embedState'; + +export function Import() { + const importInput = useRef(null); + const [showInvalidURLPrompt, setShowInvalidURLPrompt] = useState(false); + const [showConfirmation, setConfirmation] = useState(false); + const mutateEmbedState = EmbedState.useMutation(); + + return ( + <> + Import + + Paste your current URL if you have one already to import your settings + + + + + Invalid URL + + Try pasting the URL that BlitzKit previously generated, you silly + goose! + + + + + + + + + + + + + + + + + + ); +} diff --git a/src/app/tools/embed/[embed]/customize/page.tsx b/src/app/tools/embed/[embed]/customize/page.tsx index 85291fa41..03c3019de 100644 --- a/src/app/tools/embed/[embed]/customize/page.tsx +++ b/src/app/tools/embed/[embed]/customize/page.tsx @@ -8,7 +8,16 @@ import { TimerIcon, WidthIcon, } from '@radix-ui/react-icons'; -import { Box, Button, Flex, Heading, ScrollArea, Text } from '@radix-ui/themes'; +import { + AlertDialog, + Box, + Button, + Flex, + Heading, + ScrollArea, + Text, + TextField, +} from '@radix-ui/themes'; import { capitalize, startCase } from 'lodash'; import { ReactNode, useEffect, useRef, useState } from 'react'; import { CopyButton } from '../../../../../components/CopyButton'; @@ -30,6 +39,7 @@ import { Size } from './components/Size'; import { SizeWithout0 } from './components/SizeWithout0'; import { Slider } from './components/Slider'; import { Text as TextController } from './components/Text'; +import { Import } from './components/Import'; export interface EmbedPreviewControllerProps { configKey: string; @@ -66,7 +76,12 @@ export default function Page({ style={{ height: '100%', maxWidth: 320 }} > + + Export + + Copy all properties for you streaming software + Customize + + Bells and whistles of your embed + {Object.keys(config).map((configKey) => { const item = config[configKey]; diff --git a/src/app/tools/embed/configurations/breakdown.tsx b/src/app/tools/embed/configurations/breakdown.tsx index 028bc4c88..2d5598dc2 100644 --- a/src/app/tools/embed/configurations/breakdown.tsx +++ b/src/app/tools/embed/configurations/breakdown.tsx @@ -21,7 +21,7 @@ const compositeStatsKeysOptions = compositeStatsKeys.map((value) => ({ export const breakdownConfig = { width: { type: EmbedItemType.Slider, default: 320, min: 128, max: 640 }, - height: { type: EmbedItemType.Slider, default: 640, min: 128, max: 1024 }, + height: { type: EmbedItemType.Slider, default: 492, min: 128, max: 1024 }, showTotal: { type: EmbedItemType.Boolean, default: true, pad: true }, diff --git a/src/components/TanksEmbed.tsx b/src/components/TanksEmbed.tsx index 60aa500a4..1ed589493 100644 --- a/src/components/TanksEmbed.tsx +++ b/src/components/TanksEmbed.tsx @@ -24,12 +24,7 @@ export function BreakdownEmbedWrapper({ const { useState } = useEmbedStateCurry(); return ( - + {children} ); @@ -45,6 +40,7 @@ export function BreakdownEmbedCard({ tank }: BreakdownEmbedCardProps) { return (