TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-23 19:49:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: better preview

Browse Source
This commit is contained in:
TrèsAbhi committed 2024-08-06 21:06:53 -05:00
1 parent 1a2f440e11
commit 1b376746a2
1 file changed
+40 -41
Download Patch File Download Diff File Expand all files Collapse all files
src/components/EmbedCustomize.tsx
+40 -41
View File
@@ -8,11 +8,9 @@ import {
import { import {
Box, Box,
Button, Button,
Card,
Flex, Flex,
Heading, Heading,
IconButton, IconButton,
Inset,
ScrollArea, ScrollArea,
Select, Select,
Slider, Slider,
@@ -568,48 +566,49 @@ export function EmbedCustomize<Config extends EmbedConfig>({
top={`${NAVBAR_HEIGHT}px`} top={`${NAVBAR_HEIGHT}px`}
height={`calc(100vh - ${NAVBAR_HEIGHT}px)`} height={`calc(100vh - ${NAVBAR_HEIGHT}px)`}
> >
<Card style={{ height: '100%' }}> <Flex
<Flex direction="column" gap="2" height="100%"> direction="column"
<Inset style={{ borderRadius: 0 }}> height="100%"
<Flex style={{
justify="between" borderRadius: 'var(--radius-3)',
p="2" overflow: 'hidden',
px="3" boxShadow: 'var(--shadow-3)',
style={{ }}
backgroundColor: 'var(--color-panel-translucent)', >
}} <Flex
> justify="between"
<Text color="gray">Example preview</Text> p="2"
px="3"
style={{
backgroundColor: 'var(--color-panel-solid)',
}}
>
<Text color="gray">Example preview</Text>
<Flex align="center" gap="3"> <Flex align="center" gap="3">
<IconButton color="gray" disabled size="1" variant="ghost"> <IconButton color="gray" disabled size="1" variant="ghost">
<BorderSolidIcon /> <BorderSolidIcon />
</IconButton> </IconButton>
<IconButton color="gray" disabled size="1" variant="ghost"> <IconButton color="gray" disabled size="1" variant="ghost">
<SquareIcon /> <SquareIcon />
</IconButton> </IconButton>
<IconButton color="gray" disabled size="1" variant="ghost"> <IconButton color="gray" disabled size="1" variant="ghost">
<Cross1Icon /> <Cross1Icon />
</IconButton> </IconButton>
</Flex>
</Flex>
</Inset>
<Flex
mt="4"
flexGrow="1"
style={{
borderRadius: toRadiusVar('3'),
overflow: 'hidden',
background: `url(${backgroundImage}) center / cover no-repeat`,
}}
align="center"
justify="center"
>
{preview(state)}
</Flex> </Flex>
</Flex> </Flex>
</Card>
<Flex
flexGrow="1"
style={{
background: `url(${backgroundImage}) center / cover no-repeat`,
}}
align="center"
justify="center"
>
{preview(state)}
</Flex>
</Flex>
</Box> </Box>
</Flex> </Flex>
</PageWrapper> </PageWrapper>