mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-23 19:49:50 +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