mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-28 04:59:50 +01:00
feat: migrated home page
This commit is contained in:
TrèsAbhi committed
1 parent
fcac6e36fd
commit
292df5f5d9
21 files changed
+457
-288
No files matched your search
@@ -1,128 +0,0 @@
|
||||
import { assertSecret, imgur, ImgurSize } from '@blitzkit/core';
|
||||
import { CaretRightIcon } from '@radix-ui/react-icons';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Code,
|
||||
Flex,
|
||||
FlexProps,
|
||||
Heading,
|
||||
Text,
|
||||
} from '@radix-ui/themes';
|
||||
import { Link } from '../../components/Link';
|
||||
import { Tool } from '../../constants/tools';
|
||||
|
||||
type ToolCardProps = FlexProps & {
|
||||
tool: Tool;
|
||||
};
|
||||
|
||||
export function ToolCard({ tool, style, ...props }: ToolCardProps) {
|
||||
const size = tool.significant
|
||||
? ImgurSize.HugeThumbnail
|
||||
: ImgurSize.LargeThumbnail;
|
||||
const unavailableOnBranch = tool.branches?.every(
|
||||
(branch) => branch !== assertSecret(process.env.NEXT_PUBLIC_ASSET_BRANCH),
|
||||
);
|
||||
|
||||
return (
|
||||
<Flex
|
||||
style={{
|
||||
opacity: unavailableOnBranch ? 0.25 : 1,
|
||||
position: 'relative',
|
||||
borderRadius: 'var(--radius-2)',
|
||||
overflow: 'hidden',
|
||||
backgroundImage: `url(${imgur(tool.image, { format: 'jpeg', size })})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
height: tool.significant ? 'min(320px, 50vh)' : '256px',
|
||||
...style,
|
||||
}}
|
||||
flexGrow={tool.significant ? undefined : '1'}
|
||||
flexBasis={tool.significant ? undefined : { initial: undefined, sm: '0' }}
|
||||
{...props}
|
||||
>
|
||||
<Link
|
||||
disabled={unavailableOnBranch}
|
||||
href={tool.href ?? `/tools/${tool.id}`}
|
||||
target={tool.href ? '_blank' : undefined}
|
||||
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 })})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}}
|
||||
/>
|
||||
|
||||
<Flex
|
||||
px={{ initial: '6', md: tool.significant ? '8' : '6' }}
|
||||
py={{ initial: '4', sm: tool.significant ? '6' : '4' }}
|
||||
gap="4"
|
||||
align="center"
|
||||
justify="between"
|
||||
width="100%"
|
||||
direction={{ initial: 'column', xs: 'row' }}
|
||||
style={{
|
||||
backgroundColor: 'var(--color-panel-translucent)',
|
||||
backdropFilter: 'blur(64px)',
|
||||
WebkitBackdropFilter: 'blur(64px)',
|
||||
}}
|
||||
>
|
||||
<Flex
|
||||
direction="column"
|
||||
justify="center"
|
||||
align={{ initial: 'center', xs: 'start' }}
|
||||
>
|
||||
<Heading
|
||||
align={{ initial: 'center', sm: 'left' }}
|
||||
size={{ initial: '6', sm: tool.significant ? '7' : '5' }}
|
||||
weight="medium"
|
||||
>
|
||||
{tool.title}
|
||||
</Heading>
|
||||
<Text
|
||||
align={{ initial: 'center', sm: 'left' }}
|
||||
size={{ initial: '3', sm: tool.significant ? '4' : '3' }}
|
||||
color="gray"
|
||||
>
|
||||
{unavailableOnBranch ? (
|
||||
<>
|
||||
Unavailable on{' '}
|
||||
<Code>
|
||||
{assertSecret(process.env.NEXT_PUBLIC_ASSET_BRANCH)}
|
||||
</Code>
|
||||
</>
|
||||
) : (
|
||||
tool.description
|
||||
)}
|
||||
</Text>
|
||||
</Flex>
|
||||
|
||||
{!unavailableOnBranch && (
|
||||
<Button
|
||||
highContrast={tool.button.highContrast}
|
||||
size={{
|
||||
initial: undefined,
|
||||
sm: tool.significant ? '3' : undefined,
|
||||
}}
|
||||
color={tool.button.color}
|
||||
style={{ cursor: 'inherit' }}
|
||||
>
|
||||
{tool.button.text}
|
||||
<CaretRightIcon />
|
||||
</Button>
|
||||
)}
|
||||
</Flex>
|
||||
</Link>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
@@ -10,97 +10,97 @@ import {
|
||||
sessionTool,
|
||||
tankopediaTool,
|
||||
tankPerformanceTool,
|
||||
} from '../constants/tools';
|
||||
} from '../../../website/src/constants/tools';
|
||||
import { useAdExempt } from '../hooks/useAdExempt';
|
||||
import { Hero } from './components/Hero';
|
||||
import { Plugs } from './components/Plugs';
|
||||
import { ToolCard } from './components/ToolCard';
|
||||
import { ToolCard } from '../../../website/src/components/ToolCard';
|
||||
|
||||
export default function Page() {
|
||||
const exempt = useAdExempt();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Hero />
|
||||
<Hero />
|
||||
|
||||
<Plugs />
|
||||
<Plugs />
|
||||
|
||||
<Flex p="4" justify="center" gap="4">
|
||||
<Flex maxWidth="1024px" flexGrow="1" gap="4" direction="column">
|
||||
<ToolCard tool={tankopediaTool} />
|
||||
<Flex p="4" justify="center" gap="4">
|
||||
<Flex maxWidth="1024px" flexGrow="1" gap="4" direction="column">
|
||||
<ToolCard tool={tankopediaTool} />
|
||||
|
||||
<Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
|
||||
{/* <ToolCard tool={playerStatsTool} /> */}
|
||||
<ToolCard tool={compareTool} />
|
||||
<ToolCard tool={tankPerformanceTool} />
|
||||
<Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
|
||||
{/* <ToolCard tool={playerStatsTool} /> */}
|
||||
<ToolCard tool={compareTool} />
|
||||
<ToolCard tool={tankPerformanceTool} />
|
||||
</Flex>
|
||||
|
||||
{!exempt && (
|
||||
<Flex justify="center">
|
||||
<AdMidSectionResponsive />
|
||||
</Flex>
|
||||
)}
|
||||
|
||||
{!exempt && (
|
||||
<Flex justify="center">
|
||||
<AdMidSectionResponsive />
|
||||
</Flex>
|
||||
)}
|
||||
<Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
|
||||
<ToolCard tool={sessionTool} />
|
||||
{/* <ToolCard tool={embedTool} /> */}
|
||||
<ToolCard tool={ratingTool} />
|
||||
</Flex>
|
||||
|
||||
<Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
|
||||
<ToolCard tool={sessionTool} />
|
||||
{/* <ToolCard tool={embedTool} /> */}
|
||||
<ToolCard tool={ratingTool} />
|
||||
{!exempt && (
|
||||
<Flex
|
||||
justify="center"
|
||||
display={{
|
||||
initial: 'flex',
|
||||
md: 'none',
|
||||
}}
|
||||
>
|
||||
<AdMidSectionResponsive />
|
||||
</Flex>
|
||||
)}
|
||||
|
||||
{!exempt && (
|
||||
<Flex
|
||||
justify="center"
|
||||
display={{
|
||||
initial: 'flex',
|
||||
md: 'none',
|
||||
}}
|
||||
>
|
||||
<AdMidSectionResponsive />
|
||||
</Flex>
|
||||
)}
|
||||
<Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
|
||||
<ToolCard tool={discordTool} />
|
||||
<ToolCard tool={moreTool} />
|
||||
</Flex>
|
||||
|
||||
<Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
|
||||
<ToolCard tool={discordTool} />
|
||||
<ToolCard tool={moreTool} />
|
||||
</Flex>
|
||||
{!exempt && <AdMidSectionResponsive />}
|
||||
|
||||
{!exempt && <AdMidSectionResponsive />}
|
||||
<Heading>Other cool projects</Heading>
|
||||
|
||||
<Heading>Other cool projects</Heading>
|
||||
|
||||
<Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
|
||||
<ToolCard
|
||||
tool={{
|
||||
button: {
|
||||
text: 'Analyze',
|
||||
color: 'blue',
|
||||
},
|
||||
description: 'Rich historic average stats',
|
||||
id: 'blitz-analysis',
|
||||
image: 'j76YXGl',
|
||||
title: 'BlitzAnalysis[]',
|
||||
href: 'https://blitzanalysiz.com/',
|
||||
}}
|
||||
/>
|
||||
<ToolCard
|
||||
tool={{
|
||||
button: {
|
||||
color: 'purple',
|
||||
text: 'Install',
|
||||
highContrast: true,
|
||||
},
|
||||
image: 'zYrrYbR',
|
||||
description: 'In-game session stats',
|
||||
id: 'blitz-insider',
|
||||
title: 'Blitz Insider',
|
||||
href: 'https://discord.gg/UjWf9eGgtR',
|
||||
}}
|
||||
/>
|
||||
</Flex>
|
||||
<Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
|
||||
<ToolCard
|
||||
tool={{
|
||||
button: {
|
||||
text: 'Analyze',
|
||||
color: 'blue',
|
||||
},
|
||||
description: 'Rich historic average stats',
|
||||
id: 'blitz-analysis',
|
||||
image: 'j76YXGl',
|
||||
title: 'BlitzAnalysis[]',
|
||||
href: 'https://blitzanalysiz.com/',
|
||||
}}
|
||||
/>
|
||||
<ToolCard
|
||||
tool={{
|
||||
button: {
|
||||
color: 'purple',
|
||||
text: 'Install',
|
||||
highContrast: true,
|
||||
},
|
||||
image: 'zYrrYbR',
|
||||
description: 'In-game session stats',
|
||||
id: 'blitz-insider',
|
||||
title: 'Blitz Insider',
|
||||
href: 'https://discord.gg/UjWf9eGgtR',
|
||||
}}
|
||||
/>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
<div style={{ flex: 1 }} />
|
||||
<div style={{ flex: 1 }} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -4,7 +4,7 @@ import { imgur, ImgurSize } from '@blitzkit/core';
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { ReactNode } from 'react';
|
||||
import { TOOLS } from '../../constants/tools';
|
||||
import { TOOLS } from '../../../../website/src/constants/tools';
|
||||
|
||||
export default function Layout({ children }: { children: ReactNode }) {
|
||||
const pathname = usePathname();
|
||||
|
||||
Reference in new issue
Block a user