mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-24 20:19:49 +02:00
feat: no push content
This commit is contained in:
TrèsAbhi committed
1 parent
9d36ad6dab
commit
8f54b8a576
2 files changed
+305
-272
No files matched your search
@@ -23,13 +23,22 @@ export const tools = style({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const navbarBase = style({
|
export const navbar = style({
|
||||||
// 1px overlap with content to bleed color
|
height: HEIGHT,
|
||||||
marginBottom: -1,
|
marginBottom: -1, // 1px overlap with content to bleed color
|
||||||
|
position: 'sticky',
|
||||||
|
top: 0,
|
||||||
|
zIndex: 1,
|
||||||
|
});
|
||||||
|
|
||||||
|
const navbarExpanderBase = style({
|
||||||
|
transitionDuration: '250ms',
|
||||||
|
height: '1000px',
|
||||||
|
width: '100%',
|
||||||
|
overflow: 'hidden',
|
||||||
|
|
||||||
backdropFilter: 'blur(4rem) brightness(0.75)',
|
backdropFilter: 'blur(4rem) brightness(0.75)',
|
||||||
WebkitBackdropFilter: 'blur(4rem) brightness(0.75)',
|
WebkitBackdropFilter: 'blur(4rem) brightness(0.75)',
|
||||||
zIndex: 1,
|
|
||||||
transitionDuration: '250ms',
|
|
||||||
|
|
||||||
'@media': {
|
'@media': {
|
||||||
[`screen and (min-width: ${MIN_WIDTH}px)`]: {
|
[`screen and (min-width: ${MIN_WIDTH}px)`]: {
|
||||||
@@ -38,17 +47,22 @@ const navbarBase = style({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
export const navbar = styleVariants({
|
export const navbarExpander = styleVariants({
|
||||||
false: [
|
false: [
|
||||||
navbarBase,
|
navbarExpanderBase,
|
||||||
{
|
{
|
||||||
maxHeight: HEIGHT,
|
maxHeight: HEIGHT,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
true: [
|
true: [
|
||||||
navbarBase,
|
navbarExpanderBase,
|
||||||
{
|
{
|
||||||
maxHeight: '100vh',
|
maxHeight: '100vh',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
|
|
||||||
|
export const navbarContent = style({
|
||||||
|
width: '100%',
|
||||||
|
maxHeight: '100vh',
|
||||||
|
});
|
||||||
+283
-264
@@ -42,280 +42,299 @@ export default function Navbar() {
|
|||||||
const tools = [homeTool, ...TOOLS];
|
const tools = [homeTool, ...TOOLS];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Flex
|
<Flex className={styles.navbar}>
|
||||||
direction="column"
|
<Flex
|
||||||
position="sticky"
|
className={styles.navbarExpander[`${showHamburgerMenu}`]}
|
||||||
top="0"
|
align="start"
|
||||||
className={styles.navbar[`${showHamburgerMenu}`]}
|
onClick={() => setShowHamburgerMenu((state) => !state)}
|
||||||
overflow="hidden"
|
>
|
||||||
>
|
<Flex
|
||||||
<Flex justify="center">
|
className={styles.navbarContent}
|
||||||
<Flex flexGrow="1" maxWidth="1024px" p="3" align="center">
|
direction="column"
|
||||||
<Flex gap="3" align="center">
|
onClick={(event) => event.stopPropagation()}
|
||||||
<IconButton
|
>
|
||||||
variant="ghost"
|
<Flex justify="center">
|
||||||
color="gray"
|
<Flex flexGrow="1" maxWidth="1024px" p="3" align="center">
|
||||||
className={styles.hamburger}
|
<Flex gap="3" align="center">
|
||||||
onClick={() => setShowHamburgerMenu((state) => !state)}
|
<IconButton
|
||||||
onBlur={() => setShowHamburgerMenu(false)}
|
variant="ghost"
|
||||||
>
|
color="gray"
|
||||||
{showHamburgerMenu ? <Cross1Icon /> : <HamburgerMenuIcon />}
|
className={styles.hamburger}
|
||||||
</IconButton>
|
onClick={(event) => {
|
||||||
|
event.stopPropagation();
|
||||||
<Link
|
setShowHamburgerMenu((state) => !state);
|
||||||
color="gray"
|
|
||||||
highContrast
|
|
||||||
href="/"
|
|
||||||
underline="hover"
|
|
||||||
weight="bold"
|
|
||||||
onClick={() => setShowHamburgerMenu(false)}
|
|
||||||
>
|
|
||||||
BlitzKit
|
|
||||||
</Link>
|
|
||||||
</Flex>
|
|
||||||
|
|
||||||
<Box flexGrow="1" />
|
|
||||||
|
|
||||||
<Flex
|
|
||||||
align="center"
|
|
||||||
gap="2"
|
|
||||||
justify="center"
|
|
||||||
className={styles.tools}
|
|
||||||
>
|
|
||||||
{TOOLS.map((tool, index) => {
|
|
||||||
const selected = pathname.startsWith(`/tools/${tool.id}`);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{index > 0 && <Separator orientation="vertical" size="1" />}
|
|
||||||
<Link
|
|
||||||
color="gray"
|
|
||||||
highContrast={selected}
|
|
||||||
size="2"
|
|
||||||
href={`tools/${tool.id}`}
|
|
||||||
key={tool.title}
|
|
||||||
underline={selected ? 'always' : 'hover'}
|
|
||||||
>
|
|
||||||
{tool.title}
|
|
||||||
</Link>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</Flex>
|
|
||||||
|
|
||||||
<Box flexGrow="1" />
|
|
||||||
|
|
||||||
<Flex align="center" gap="3">
|
|
||||||
<Link
|
|
||||||
style={{ display: 'flex', alignContent: 'center' }}
|
|
||||||
color="gray"
|
|
||||||
href="https://discord.gg/nDt7AjGJQH"
|
|
||||||
underline="none"
|
|
||||||
target="_blank"
|
|
||||||
onClick={() => setShowHamburgerMenu(false)}
|
|
||||||
>
|
|
||||||
<DiscordLogoIcon />
|
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
style={{ display: 'flex', alignContent: 'center' }}
|
|
||||||
color="gray"
|
|
||||||
href="https://discord.gg/nDt7AjGJQH"
|
|
||||||
underline="none"
|
|
||||||
target="_blank"
|
|
||||||
onClick={() => setShowHamburgerMenu(false)}
|
|
||||||
>
|
|
||||||
<PatreonIcon width="0.75em" height="0.75em" />
|
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
style={{ display: 'flex', alignContent: 'center' }}
|
|
||||||
color="gray"
|
|
||||||
href="/settings"
|
|
||||||
underline="none"
|
|
||||||
target="_blank"
|
|
||||||
onClick={() => setShowHamburgerMenu(false)}
|
|
||||||
>
|
|
||||||
<GearIcon />
|
|
||||||
</Link>
|
|
||||||
<Popover.Root>
|
|
||||||
<Popover.Trigger>
|
|
||||||
<IconButton variant="ghost" color="gray">
|
|
||||||
<PersonIcon />
|
|
||||||
</IconButton>
|
|
||||||
</Popover.Trigger>
|
|
||||||
|
|
||||||
<Popover.Content
|
|
||||||
align="end"
|
|
||||||
width="320px"
|
|
||||||
onOpenAutoFocus={(event) => event.preventDefault()}
|
|
||||||
>
|
|
||||||
{(logins.patreon || logins.wargaming) && (
|
|
||||||
<Flex direction="column" gap="2">
|
|
||||||
<Text align="center" color="gray">
|
|
||||||
Logged in accounts
|
|
||||||
</Text>
|
|
||||||
|
|
||||||
{logins.patreon && (
|
|
||||||
<Flex align="center" gap="2" justify="center">
|
|
||||||
<PatreonIcon width={15} height={15} />
|
|
||||||
<Text>Patreon</Text>
|
|
||||||
<Button
|
|
||||||
color="red"
|
|
||||||
variant="ghost"
|
|
||||||
onClick={() =>
|
|
||||||
mutateApp((draft) => {
|
|
||||||
draft.logins.patreon = undefined;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
>
|
|
||||||
Logout
|
|
||||||
</Button>
|
|
||||||
</Flex>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{logins.wargaming && (
|
|
||||||
<Flex align="center" gap="2" justify="center">
|
|
||||||
<WargamingIcon width={15} height={15} />
|
|
||||||
<Text>Wargaming</Text>
|
|
||||||
<Button
|
|
||||||
color="red"
|
|
||||||
variant="ghost"
|
|
||||||
onClick={() =>
|
|
||||||
mutateApp((draft) => {
|
|
||||||
draft.logins.wargaming = undefined;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
>
|
|
||||||
Logout
|
|
||||||
</Button>
|
|
||||||
</Flex>
|
|
||||||
)}
|
|
||||||
</Flex>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{!logins.patreon !== !logins.wargaming && (
|
|
||||||
<Inset side="x">
|
|
||||||
<Separator my="4" size="4" />
|
|
||||||
</Inset>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{(!logins.patreon || !logins.wargaming) && (
|
|
||||||
<Flex direction="column" gap="2">
|
|
||||||
<Text align="center" color="gray">
|
|
||||||
Log in with...
|
|
||||||
</Text>
|
|
||||||
|
|
||||||
{!logins.patreon && (
|
|
||||||
<Link style={{ width: '100%' }} href={patreonLoginUrl()}>
|
|
||||||
<Button style={{ width: '100%' }} color="tomato">
|
|
||||||
<PatreonIcon width={15} height={15} /> Patreon
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{!logins.wargaming && (
|
|
||||||
<Dialog.Root>
|
|
||||||
<Dialog.Trigger>
|
|
||||||
<Button color="red">
|
|
||||||
<WargamingIcon width={15} height={15} /> Wargaming
|
|
||||||
</Button>
|
|
||||||
</Dialog.Trigger>
|
|
||||||
|
|
||||||
<Dialog.Content width="fit-content">
|
|
||||||
<Flex direction="column" gap="4" align="center">
|
|
||||||
<Text color="gray">Choose your region</Text>
|
|
||||||
|
|
||||||
<Flex gap="2" wrap="wrap">
|
|
||||||
{REGIONS.map((region) => (
|
|
||||||
<Dialog.Close key={region}>
|
|
||||||
<Link
|
|
||||||
href={
|
|
||||||
typeof window !== 'undefined'
|
|
||||||
? `https://api.worldoftanks.${region}/wot/auth/login/?application_id=${WARGAMING_APPLICATION_ID}&redirect_uri=${encodeURIComponent(
|
|
||||||
`${location.origin}/auth/wargaming?return=${location.origin}${location.pathname}`,
|
|
||||||
)}`
|
|
||||||
: undefined
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Button color="red">
|
|
||||||
{strings.common.regions.normal[region]}
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
</Dialog.Close>
|
|
||||||
))}
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
</Dialog.Content>
|
|
||||||
</Dialog.Root>
|
|
||||||
)}
|
|
||||||
</Flex>
|
|
||||||
)}
|
|
||||||
</Popover.Content>
|
|
||||||
</Popover.Root>
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
|
|
||||||
<ScrollArea>
|
|
||||||
<Flex justify="center">
|
|
||||||
<Grid
|
|
||||||
columns="repeat(auto-fill, minmax(192px, 1fr))"
|
|
||||||
flow="dense"
|
|
||||||
gap="2"
|
|
||||||
width="100%"
|
|
||||||
p="3"
|
|
||||||
pt="0"
|
|
||||||
>
|
|
||||||
{tools.map((tool) => (
|
|
||||||
<Flex
|
|
||||||
style={{
|
|
||||||
position: 'relative',
|
|
||||||
borderRadius: 'var(--radius-2)',
|
|
||||||
overflow: 'hidden',
|
|
||||||
backgroundImage: `url(${imgur(tool.image, { format: 'jpeg', size: ImgurSize.MediumThumbnail })})`,
|
|
||||||
backgroundSize: 'cover',
|
|
||||||
backgroundPosition: 'center',
|
|
||||||
aspectRatio: '2 / 1',
|
|
||||||
}}
|
|
||||||
onClick={() => setShowHamburgerMenu(false)}
|
|
||||||
>
|
|
||||||
<Link
|
|
||||||
href={tool.id.length === 0 ? '/' : `/tools/${tool.id}`}
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
width: '100%',
|
|
||||||
height: '100%',
|
|
||||||
flexDirection: 'column',
|
|
||||||
textDecoration: 'none',
|
|
||||||
color: 'inherit',
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Box
|
{showHamburgerMenu ? <Cross1Icon /> : <HamburgerMenuIcon />}
|
||||||
flexGrow="1"
|
</IconButton>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
color="gray"
|
||||||
|
highContrast
|
||||||
|
href="/"
|
||||||
|
underline="hover"
|
||||||
|
weight="bold"
|
||||||
|
onClick={() => setShowHamburgerMenu(false)}
|
||||||
|
>
|
||||||
|
BlitzKit
|
||||||
|
</Link>
|
||||||
|
</Flex>
|
||||||
|
|
||||||
|
<Box flexGrow="1" />
|
||||||
|
|
||||||
|
<Flex
|
||||||
|
align="center"
|
||||||
|
gap="2"
|
||||||
|
justify="center"
|
||||||
|
className={styles.tools}
|
||||||
|
>
|
||||||
|
{TOOLS.map((tool, index) => {
|
||||||
|
const selected = pathname.startsWith(`/tools/${tool.id}`);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{index > 0 && (
|
||||||
|
<Separator orientation="vertical" size="1" />
|
||||||
|
)}
|
||||||
|
<Link
|
||||||
|
onClick={() => setShowHamburgerMenu(false)}
|
||||||
|
color="gray"
|
||||||
|
highContrast={selected}
|
||||||
|
size="2"
|
||||||
|
href={`tools/${tool.id}`}
|
||||||
|
key={tool.title}
|
||||||
|
underline={selected ? 'always' : 'hover'}
|
||||||
|
>
|
||||||
|
{tool.title}
|
||||||
|
</Link>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Flex>
|
||||||
|
|
||||||
|
<Box flexGrow="1" />
|
||||||
|
|
||||||
|
<Flex align="center" gap="3">
|
||||||
|
<Link
|
||||||
|
style={{ display: 'flex', alignContent: 'center' }}
|
||||||
|
color="gray"
|
||||||
|
href="https://discord.gg/nDt7AjGJQH"
|
||||||
|
underline="none"
|
||||||
|
target="_blank"
|
||||||
|
onClick={() => setShowHamburgerMenu(false)}
|
||||||
|
>
|
||||||
|
<DiscordLogoIcon />
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
style={{ display: 'flex', alignContent: 'center' }}
|
||||||
|
color="gray"
|
||||||
|
href="https://discord.gg/nDt7AjGJQH"
|
||||||
|
underline="none"
|
||||||
|
target="_blank"
|
||||||
|
onClick={() => setShowHamburgerMenu(false)}
|
||||||
|
>
|
||||||
|
<PatreonIcon width="0.75em" height="0.75em" />
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
style={{ display: 'flex', alignContent: 'center' }}
|
||||||
|
color="gray"
|
||||||
|
href="/settings"
|
||||||
|
underline="none"
|
||||||
|
target="_blank"
|
||||||
|
onClick={() => setShowHamburgerMenu(false)}
|
||||||
|
>
|
||||||
|
<GearIcon />
|
||||||
|
</Link>
|
||||||
|
<Popover.Root>
|
||||||
|
<Popover.Trigger>
|
||||||
|
<IconButton variant="ghost" color="gray">
|
||||||
|
<PersonIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Popover.Trigger>
|
||||||
|
|
||||||
|
<Popover.Content
|
||||||
|
align="end"
|
||||||
|
width="320px"
|
||||||
|
onOpenAutoFocus={(event) => event.preventDefault()}
|
||||||
|
>
|
||||||
|
{(logins.patreon || logins.wargaming) && (
|
||||||
|
<Flex direction="column" gap="2">
|
||||||
|
<Text align="center" color="gray">
|
||||||
|
Logged in accounts
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
{logins.patreon && (
|
||||||
|
<Flex align="center" gap="2" justify="center">
|
||||||
|
<PatreonIcon width={15} height={15} />
|
||||||
|
<Text>Patreon</Text>
|
||||||
|
<Button
|
||||||
|
color="red"
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() =>
|
||||||
|
mutateApp((draft) => {
|
||||||
|
draft.logins.patreon = undefined;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Logout
|
||||||
|
</Button>
|
||||||
|
</Flex>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{logins.wargaming && (
|
||||||
|
<Flex align="center" gap="2" justify="center">
|
||||||
|
<WargamingIcon width={15} height={15} />
|
||||||
|
<Text>Wargaming</Text>
|
||||||
|
<Button
|
||||||
|
color="red"
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() =>
|
||||||
|
mutateApp((draft) => {
|
||||||
|
draft.logins.wargaming = undefined;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Logout
|
||||||
|
</Button>
|
||||||
|
</Flex>
|
||||||
|
)}
|
||||||
|
</Flex>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!logins.patreon !== !logins.wargaming && (
|
||||||
|
<Inset side="x">
|
||||||
|
<Separator my="4" size="4" />
|
||||||
|
</Inset>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{(!logins.patreon || !logins.wargaming) && (
|
||||||
|
<Flex direction="column" gap="2">
|
||||||
|
<Text align="center" color="gray">
|
||||||
|
Log in with...
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
{!logins.patreon && (
|
||||||
|
<Link
|
||||||
|
style={{ width: '100%' }}
|
||||||
|
href={patreonLoginUrl()}
|
||||||
|
>
|
||||||
|
<Button style={{ width: '100%' }} color="tomato">
|
||||||
|
<PatreonIcon width={15} height={15} /> Patreon
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!logins.wargaming && (
|
||||||
|
<Dialog.Root>
|
||||||
|
<Dialog.Trigger>
|
||||||
|
<Button color="red">
|
||||||
|
<WargamingIcon width={15} height={15} />{' '}
|
||||||
|
Wargaming
|
||||||
|
</Button>
|
||||||
|
</Dialog.Trigger>
|
||||||
|
|
||||||
|
<Dialog.Content width="fit-content">
|
||||||
|
<Flex direction="column" gap="4" align="center">
|
||||||
|
<Text color="gray">Choose your region</Text>
|
||||||
|
|
||||||
|
<Flex gap="2" wrap="wrap">
|
||||||
|
{REGIONS.map((region) => (
|
||||||
|
<Dialog.Close key={region}>
|
||||||
|
<Link
|
||||||
|
href={
|
||||||
|
typeof window !== 'undefined'
|
||||||
|
? `https://api.worldoftanks.${region}/wot/auth/login/?application_id=${WARGAMING_APPLICATION_ID}&redirect_uri=${encodeURIComponent(
|
||||||
|
`${location.origin}/auth/wargaming?return=${location.origin}${location.pathname}`,
|
||||||
|
)}`
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Button color="red">
|
||||||
|
{
|
||||||
|
strings.common.regions.normal[
|
||||||
|
region
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</Dialog.Close>
|
||||||
|
))}
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
</Dialog.Content>
|
||||||
|
</Dialog.Root>
|
||||||
|
)}
|
||||||
|
</Flex>
|
||||||
|
)}
|
||||||
|
</Popover.Content>
|
||||||
|
</Popover.Root>
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
|
||||||
|
<ScrollArea>
|
||||||
|
<Flex justify="center">
|
||||||
|
<Grid
|
||||||
|
columns="repeat(auto-fill, minmax(192px, 1fr))"
|
||||||
|
flow="dense"
|
||||||
|
gap="2"
|
||||||
|
width="100%"
|
||||||
|
p="3"
|
||||||
|
pt="0"
|
||||||
|
>
|
||||||
|
{tools.map((tool) => (
|
||||||
|
<Flex
|
||||||
|
onClick={() => setShowHamburgerMenu(false)}
|
||||||
style={{
|
style={{
|
||||||
|
position: 'relative',
|
||||||
|
borderRadius: 'var(--radius-2)',
|
||||||
|
overflow: 'hidden',
|
||||||
backgroundImage: `url(${imgur(tool.image, { format: 'jpeg', size: ImgurSize.MediumThumbnail })})`,
|
backgroundImage: `url(${imgur(tool.image, { format: 'jpeg', size: ImgurSize.MediumThumbnail })})`,
|
||||||
backgroundSize: 'cover',
|
backgroundSize: 'cover',
|
||||||
backgroundPosition: 'center',
|
backgroundPosition: 'center',
|
||||||
}}
|
aspectRatio: '2 / 1',
|
||||||
/>
|
|
||||||
|
|
||||||
<Flex
|
|
||||||
p="2"
|
|
||||||
align="center"
|
|
||||||
width="100%"
|
|
||||||
style={{
|
|
||||||
backgroundColor: 'var(--color-panel-translucent)',
|
|
||||||
backdropFilter: 'blur(4rem)',
|
|
||||||
WebkitBackdropFilter: 'blur(4rem)',
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Text weight="medium">{tool.title}</Text>
|
<Link
|
||||||
|
href={tool.id.length === 0 ? '/' : `/tools/${tool.id}`}
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
flexDirection: 'column',
|
||||||
|
textDecoration: 'none',
|
||||||
|
color: 'inherit',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
flexGrow="1"
|
||||||
|
style={{
|
||||||
|
backgroundImage: `url(${imgur(tool.image, { format: 'jpeg', size: ImgurSize.MediumThumbnail })})`,
|
||||||
|
backgroundSize: 'cover',
|
||||||
|
backgroundPosition: 'center',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Flex
|
||||||
|
p="2"
|
||||||
|
align="center"
|
||||||
|
width="100%"
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'var(--color-panel-translucent)',
|
||||||
|
backdropFilter: 'blur(4rem)',
|
||||||
|
WebkitBackdropFilter: 'blur(4rem)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text weight="medium">{tool.title}</Text>
|
||||||
|
</Flex>
|
||||||
|
</Link>
|
||||||
</Flex>
|
</Flex>
|
||||||
</Link>
|
))}
|
||||||
</Flex>
|
</Grid>
|
||||||
))}
|
</Flex>
|
||||||
</Grid>
|
</ScrollArea>
|
||||||
</Flex>
|
</Flex>
|
||||||
</ScrollArea>
|
</Flex>
|
||||||
</Flex>
|
</Flex>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Reference in new issue
Block a user