mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-21 02:37:05 +02:00
1 parent
cf4fa83d44
commit
0537418f6a
4 files changed
+37
-73
No files matched your search
@@ -1,66 +0,0 @@
|
||||
---
|
||||
import { imgur, ImgurSize } from '@blitzkit/core';
|
||||
import { Box, Flex, Heading, Text } from '@radix-ui/themes';
|
||||
import { TOOLS } from '../constants/tools';
|
||||
import RootLayout from './RootLayout.astro';
|
||||
|
||||
const { pathname } = Astro.url;
|
||||
const pathSplit = pathname.split('/');
|
||||
const toolId = pathSplit.at(2);
|
||||
const isToolRoot = pathname === `/tools/${toolId}`;
|
||||
const tool = TOOLS.find((tool) => tool.id === toolId);
|
||||
---
|
||||
|
||||
<RootLayout>
|
||||
{
|
||||
tool && (
|
||||
<>
|
||||
{isToolRoot && (
|
||||
<>
|
||||
<title>{tool.title}</title>
|
||||
<meta property="og:image" content={imgur(tool.image)} />
|
||||
|
||||
{tool.pageDescription !== undefined && (
|
||||
<>
|
||||
<meta name="description" content={tool.pageDescription} />
|
||||
<meta
|
||||
property="og:description"
|
||||
content={tool.pageDescription}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
{
|
||||
pathSplit.length === 3 && (
|
||||
<Box
|
||||
style={{
|
||||
backgroundImage: `url(${imgur(tool!.image, {
|
||||
format: 'jpeg',
|
||||
size: ImgurSize.HugeThumbnail,
|
||||
})})`,
|
||||
backgroundSize: 'cover',
|
||||
}}
|
||||
>
|
||||
<Flex
|
||||
direction="column"
|
||||
align="center"
|
||||
py="6"
|
||||
style={{
|
||||
backdropFilter: 'blur(4rem)',
|
||||
WebkitBackdropFilter: 'blur(4rem)',
|
||||
}}
|
||||
>
|
||||
<Heading size="8">{tool?.title}</Heading>
|
||||
<Text color="gray">{tool?.description}</Text>
|
||||
</Flex>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
<slot />
|
||||
</RootLayout>
|
||||
@@ -0,0 +1,21 @@
|
||||
import { Button, Flex, Popover, Text } from '@radix-ui/themes';
|
||||
import { BlitzKitTheme } from '../components/BlitzKitTheme';
|
||||
|
||||
export function TestComponent() {
|
||||
return (
|
||||
<Popover.Root>
|
||||
<Popover.Trigger>
|
||||
<Button>Radix UI</Button>
|
||||
</Popover.Trigger>
|
||||
|
||||
<BlitzKitTheme>
|
||||
<Popover.Content>
|
||||
<Flex direction="column">
|
||||
<Text>I should be in a dark mode popover</Text>
|
||||
<Button>And I should be yellow and have full border radius!</Button>
|
||||
</Flex>
|
||||
</Popover.Content>
|
||||
</BlitzKitTheme>
|
||||
</Popover.Root>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
---
|
||||
import { BlitzKitTheme } from '../components/BlitzKitTheme';
|
||||
import { TestComponent } from './TestComponent';
|
||||
---
|
||||
|
||||
<style is:global>
|
||||
@import '@radix-ui/themes/styles.css';
|
||||
</style>
|
||||
|
||||
<html>
|
||||
<body>
|
||||
<BlitzKitTheme>
|
||||
<TestComponent client:idle />
|
||||
</BlitzKitTheme>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,7 +0,0 @@
|
||||
---
|
||||
import ToolLayout from '../../../layouts/ToolLayout.astro';
|
||||
---
|
||||
|
||||
<ToolLayout>
|
||||
<slot />
|
||||
</ToolLayout>
|
||||
Reference in new issue
Block a user