mirror of
https://github.com/discordjs/discord.js.git
synced 2026-03-14 02:23:31 +01:00
74 lines
2.7 KiB
TypeScript
74 lines
2.7 KiB
TypeScript
import Image from 'next/future/image';
|
|
import Link from 'next/link';
|
|
import { forwardRef, MouseEventHandler, Ref } from 'react';
|
|
import codeSample from '../assets/code-sample.png';
|
|
import logo from '../assets/djs_logo_rainbow_400x400.png';
|
|
import vercelLogo from '../assets/powered-by-vercel.svg';
|
|
import text from '../text.json';
|
|
|
|
interface ButtonProps {
|
|
label: string;
|
|
href?: string;
|
|
ref?: Ref<HTMLAnchorElement>;
|
|
onClick?: MouseEventHandler<HTMLAnchorElement>;
|
|
}
|
|
|
|
// eslint-disable-next-line react/display-name
|
|
const LinkButton = forwardRef<HTMLAnchorElement, ButtonProps>(({ label, onClick, href }: ButtonProps, ref) => (
|
|
<a
|
|
href={href}
|
|
onClick={onClick}
|
|
ref={ref}
|
|
className="no-underline max-h-[70px] bg-blurple px-3 py-4 rounded-lg font-semibold text-white"
|
|
>
|
|
{label}
|
|
</a>
|
|
));
|
|
|
|
export default function IndexRoute() {
|
|
return (
|
|
<main className="w-full max-w-full max-h-full h-full flex-col bg-white dark:bg-dark overflow-y-auto">
|
|
<div className="flex h-[65px] sticky top-0 border-b border-gray justify-center px-10 bg-white dark:bg-dark">
|
|
<div className="flex items-center w-full max-w-[1100px] justify-between">
|
|
<div className="h-[50px] w-[50px] rounded-lg overflow-hidden">
|
|
<Image className="h-[50px] w-[50px]" src={logo} />
|
|
</div>
|
|
<div className="flex flex-row space-x-8">
|
|
<Link href="/docs" passHref>
|
|
<a className="no-underline text-blurple font-semibold">Docs</a>
|
|
</Link>
|
|
<a className="text-blurple font-semibold">Guide</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="xl:flex xl:flex-col xl:justify-center w-full max-w-full box-border p-10">
|
|
<div className="flex flex-col xl:flex-row grow max-w-[1100px] pb-10 space-y-10 xl:space-x-20 place-items-center place-self-center">
|
|
<div className="flex flex-col max-w-[800px] lt-xl:items-center">
|
|
<h1 className="font-bold text-6xl text-blurple my-2">{text.heroTitle}</h1>
|
|
<p className="text-xl text-dark-100 dark:text-gray-300">{text.heroDescription}</p>
|
|
<div className="flex flew-row space-x-4">
|
|
<LinkButton label="Read the guide" />
|
|
<Link href="/docs" passHref>
|
|
<LinkButton label="Check out the docs" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className="sm:flex sm:grow sm:shrink h-full xl:items-center hidden">
|
|
<Image src={codeSample} className="max-w-[600px] h-full rounded-xl shadow-md overflow-hidden" />
|
|
</div>
|
|
</div>
|
|
<div className="flex place-content-center">
|
|
<a href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss">
|
|
<Image
|
|
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
|
src={vercelLogo}
|
|
alt="Vercel"
|
|
className="max-w-[250px] shadow-md overflow-hidden"
|
|
/>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|