mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-21 18:57:03 +02:00
feat: new homepage
This commit is contained in:
TrèsAbhi committed
1 parent
847d605f08
commit
3d2b443dc7
4 files changed
+164
-40
No files matched your search
+113
-13
@@ -1,24 +1,124 @@
|
||||
import { Heading } from '@radix-ui/themes';
|
||||
import { CaretRightIcon } from '@radix-ui/react-icons';
|
||||
import { Button, Flex, Grid, Heading, Text } from '@radix-ui/themes';
|
||||
import Link from 'next/link';
|
||||
import { TOOLS } from '../constants/tools';
|
||||
import { imgur } from '../core/blitzkit/imgur';
|
||||
|
||||
export default function Page() {
|
||||
const tool = TOOLS[0];
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* <Hero /> */}
|
||||
|
||||
<div
|
||||
style={{
|
||||
background: `url(${imgur(tool.image)})`,
|
||||
height: '50vh',
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
<Grid
|
||||
p="4"
|
||||
gap="4"
|
||||
columns={{
|
||||
initial: undefined,
|
||||
sm: '2',
|
||||
}}
|
||||
flow="row-dense"
|
||||
>
|
||||
<Heading>Tankopedia</Heading>
|
||||
</div>
|
||||
{TOOLS.map((tool) => {
|
||||
return (
|
||||
<Flex
|
||||
key={tool.id}
|
||||
style={{
|
||||
position: 'relative',
|
||||
borderRadius: 'var(--radius-2)',
|
||||
overflow: 'hidden',
|
||||
backgroundImage: `url(${imgur(tool.image)})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
height: tool.significant ? 'min(320px, 50vh)' : '256px',
|
||||
}}
|
||||
gridColumn={{
|
||||
initial: undefined,
|
||||
sm: tool.significant ? '1 / 3' : undefined,
|
||||
}}
|
||||
>
|
||||
<Link
|
||||
href={tool.href ?? `/tools/${tool.id}`}
|
||||
style={{
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
alignItems: 'end',
|
||||
textDecoration: 'none',
|
||||
color: 'inherit',
|
||||
}}
|
||||
>
|
||||
<Flex
|
||||
px={{
|
||||
initial: '6',
|
||||
md: '8',
|
||||
}}
|
||||
py="6"
|
||||
gap="4"
|
||||
align="center"
|
||||
justify="between"
|
||||
width="100%"
|
||||
direction={{
|
||||
initial: 'column',
|
||||
sm: 'row',
|
||||
}}
|
||||
style={{
|
||||
backgroundColor: 'var(--color-panel-translucent)',
|
||||
backdropFilter: 'blur(16px)',
|
||||
}}
|
||||
>
|
||||
<Flex
|
||||
direction="column"
|
||||
justify="center"
|
||||
align={{
|
||||
initial: 'center',
|
||||
sm: 'start',
|
||||
}}
|
||||
>
|
||||
<Heading
|
||||
align={{
|
||||
initial: 'center',
|
||||
sm: 'left',
|
||||
}}
|
||||
size={{
|
||||
initial: '7',
|
||||
sm: tool.significant ? '7' : '5',
|
||||
}}
|
||||
weight="medium"
|
||||
>
|
||||
{tool.title}
|
||||
</Heading>
|
||||
<Text
|
||||
align={{
|
||||
initial: 'center',
|
||||
sm: 'left',
|
||||
}}
|
||||
size={{
|
||||
initial: '4',
|
||||
sm: tool.significant ? '4' : '3',
|
||||
}}
|
||||
color="gray"
|
||||
>
|
||||
{tool.description}
|
||||
</Text>
|
||||
</Flex>
|
||||
|
||||
<Button
|
||||
size={{
|
||||
initial: undefined,
|
||||
sm: tool.significant ? '3' : undefined,
|
||||
}}
|
||||
color={tool.button.color}
|
||||
style={{
|
||||
cursor: 'inherit',
|
||||
}}
|
||||
>
|
||||
{tool.button.text}
|
||||
<CaretRightIcon />
|
||||
</Button>
|
||||
</Flex>
|
||||
</Link>
|
||||
</Flex>
|
||||
);
|
||||
})}
|
||||
</Grid>
|
||||
|
||||
<div style={{ flex: 1 }} />
|
||||
</>
|
||||
|
||||
@@ -25,16 +25,16 @@ import { use, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import PageWrapper from '../../../components/PageWrapper';
|
||||
import { UNLOCALIZED_REGION_NAMES_SHORT } from '../../../constants/regions';
|
||||
import {
|
||||
generateStats,
|
||||
prettifyStats,
|
||||
Stat,
|
||||
STAT_KEYS,
|
||||
STAT_NAMES,
|
||||
Stat,
|
||||
generateStats,
|
||||
prettifyStats,
|
||||
sumStats,
|
||||
} from '../../../core/blitz/generateStats';
|
||||
import {
|
||||
getAccountInfo,
|
||||
IndividualAccountInfo,
|
||||
getAccountInfo,
|
||||
} from '../../../core/blitz/getAccountInfo';
|
||||
import getTankStats from '../../../core/blitz/getTankStats';
|
||||
import { idToRegion } from '../../../core/blitz/idToRegion';
|
||||
@@ -180,7 +180,7 @@ export default function Page({
|
||||
}
|
||||
|
||||
return (
|
||||
<PageWrapper>
|
||||
<PageWrapper color="blue">
|
||||
<AlertDialog.Root
|
||||
open={showCCInaccessibilityPrompt}
|
||||
onOpenChange={setShowCCInaccessibilityPrompt}
|
||||
|
||||
+13
-22
@@ -1,29 +1,20 @@
|
||||
import {
|
||||
Link as RadixLink,
|
||||
LinkProps as RadixLinkProps,
|
||||
} from '@radix-ui/themes';
|
||||
import NextLink from 'next/link';
|
||||
'use client';
|
||||
|
||||
interface LinkProps extends RadixLinkProps {
|
||||
href: string;
|
||||
}
|
||||
import { LinkProps } from '@radix-ui/themes';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
export function Link({ href, onClick, ...props }: LinkProps) {
|
||||
const router = useRouter();
|
||||
|
||||
export function Link({ href, children, target, onClick, ...props }: LinkProps) {
|
||||
return (
|
||||
<RadixLink
|
||||
<Link
|
||||
href={href}
|
||||
onClick={(event) => event.preventDefault()}
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
if (href) router.push(href);
|
||||
onClick?.(event);
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
<NextLink
|
||||
tabIndex={-1}
|
||||
href={href}
|
||||
target={target}
|
||||
onClick={onClick}
|
||||
style={{ all: 'inherit' }}
|
||||
>
|
||||
{children}
|
||||
</NextLink>
|
||||
</RadixLink>
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -1,3 +1,6 @@
|
||||
import { Button } from '@radix-ui/themes';
|
||||
import { ComponentProps } from 'react';
|
||||
|
||||
interface Tool {
|
||||
id: string;
|
||||
image: string;
|
||||
@@ -6,6 +9,11 @@ interface Tool {
|
||||
disabled?: boolean;
|
||||
href?: string;
|
||||
pageDescription?: string;
|
||||
button: {
|
||||
text: string;
|
||||
color: ComponentProps<typeof Button>['color'];
|
||||
};
|
||||
significant?: boolean;
|
||||
}
|
||||
|
||||
export const TOOLS: Tool[] = [
|
||||
@@ -25,6 +33,11 @@ export const TOOLS: Tool[] = [
|
||||
pageDescription:
|
||||
'Statistics, armor, and more for all tanks in World of Tanks Blitz',
|
||||
image: 'D8j6GZx',
|
||||
button: {
|
||||
text: 'Find your tank',
|
||||
color: 'purple',
|
||||
},
|
||||
significant: true,
|
||||
},
|
||||
{
|
||||
id: 'rating',
|
||||
@@ -33,6 +46,10 @@ export const TOOLS: Tool[] = [
|
||||
pageDescription:
|
||||
'Live and archived full rating leaderboard for World of Tanks Blitz',
|
||||
image: 'WEyMZH3',
|
||||
button: {
|
||||
text: 'View leaderboard',
|
||||
color: 'orange',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'compare',
|
||||
@@ -41,6 +58,10 @@ export const TOOLS: Tool[] = [
|
||||
pageDescription:
|
||||
'Compare tanks statistics and loadouts in World of Tanks Blitz',
|
||||
image: 'O6VNl6e',
|
||||
button: {
|
||||
text: 'Compare tanks',
|
||||
color: 'crimson',
|
||||
},
|
||||
},
|
||||
{
|
||||
// TODO: rename to tracker
|
||||
@@ -50,6 +71,10 @@ export const TOOLS: Tool[] = [
|
||||
pageDescription:
|
||||
'Track your stats in real time as you play World of Tanks Blitz',
|
||||
image: 'HdG9sTf',
|
||||
button: {
|
||||
text: 'Start tracking',
|
||||
color: 'blue',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'discord',
|
||||
@@ -57,6 +82,10 @@ export const TOOLS: Tool[] = [
|
||||
description: 'Stats and tools right in Discord',
|
||||
href: 'https://discord.com/application-directory/1097673957865443370',
|
||||
image: '0bWE5hC',
|
||||
button: {
|
||||
text: 'Install now',
|
||||
color: 'indigo',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'more',
|
||||
@@ -64,5 +93,9 @@ export const TOOLS: Tool[] = [
|
||||
description: 'This site is being actively developed',
|
||||
href: 'https://discord.gg/nDt7AjGJQH',
|
||||
image: '1nPm6VI',
|
||||
button: {
|
||||
text: 'Join Discord',
|
||||
color: 'indigo',
|
||||
},
|
||||
},
|
||||
];
|
||||
Reference in new issue
Block a user