mirror of
https://github.com/discordjs/discord.js.git
synced 2024-08-21 01:24:41 +12:00
refactor(website): consolidate styling for buttons (#9466)
This commit is contained in:
Suneet Tipirneni
GitHub
parent
217e5d8100
commit
988f8c7546
7 changed files with 54 additions and 28 deletions
|
|
@ -59,6 +59,7 @@
|
|||
"@vscode/codicons": "^0.0.32",
|
||||
"ariakit": "^2.0.0-next.44",
|
||||
"bright": "^0.7.2",
|
||||
"class-variance-authority": "^0.6.0",
|
||||
"cmdk": "^0.2.0",
|
||||
"meilisearch": "^0.32.3",
|
||||
"next": "^13.3.1",
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { VscArrowRight } from '@react-icons/all-files/vsc/VscArrowRight';
|
|||
import { VscVersions } from '@react-icons/all-files/vsc/VscVersions';
|
||||
import Link from 'next/link';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { buttonVariants } from '~/styles/Button';
|
||||
import { PACKAGES } from '~/util/constants';
|
||||
|
||||
export const runtime = 'edge';
|
||||
|
|
@ -31,7 +32,7 @@ export default async function Page({ params }: { params: { package: string } })
|
|||
<div className="flex flex-col gap-4">
|
||||
{data.map((version, idx) => (
|
||||
<Link
|
||||
className="h-11 flex flex-col transform-gpu cursor-pointer select-none appearance-none place-content-center border border-neutral-300 rounded bg-white p-4 text-base font-semibold leading-none text-black outline-none active:translate-y-px dark:border-dark-100 active:bg-neutral-200 dark:bg-dark-400 hover:bg-neutral-100 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
|
||||
className={buttonVariants({ variant: 'secondary' })}
|
||||
href={`/docs/packages/${params.package}/${version}`}
|
||||
key={`${version}-${idx}`}
|
||||
>
|
||||
|
|
@ -45,10 +46,7 @@ export default async function Page({ params }: { params: { package: string } })
|
|||
</Link>
|
||||
)) ?? null}
|
||||
</div>
|
||||
<Link
|
||||
className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center place-self-center gap-2 border-0 rounded bg-blurple px-4 text-base font-semibold leading-none text-white no-underline outline-none active:translate-y-px focus:ring focus:ring-width-2 focus:ring-white"
|
||||
href="/docs/packages"
|
||||
>
|
||||
<Link className={buttonVariants({ className: 'place-self-center' })} href="/docs/packages">
|
||||
<VscArrowLeft size={20} /> Go back
|
||||
</Link>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { VscArrowLeft } from '@react-icons/all-files/vsc/VscArrowLeft';
|
|||
import { VscArrowRight } from '@react-icons/all-files/vsc/VscArrowRight';
|
||||
import { VscPackage } from '@react-icons/all-files/vsc/VscPackage';
|
||||
import Link from 'next/link';
|
||||
import { buttonVariants } from '~/styles/Button';
|
||||
import { PACKAGES } from '~/util/constants';
|
||||
|
||||
export const runtime = 'edge';
|
||||
|
|
@ -28,7 +29,7 @@ export default function Page() {
|
|||
</a>
|
||||
{PACKAGES.map((pkg, idx) => (
|
||||
<Link
|
||||
className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-content-between border border-neutral-300 rounded bg-white p-4 text-base font-semibold leading-none text-black outline-none active:translate-y-px dark:border-dark-100 active:bg-neutral-200 dark:bg-dark-400 hover:bg-neutral-100 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
|
||||
className={buttonVariants({ variant: 'secondary' })}
|
||||
href={`/docs/packages/${pkg}`}
|
||||
key={`${pkg}-${idx}`}
|
||||
>
|
||||
|
|
@ -51,10 +52,7 @@ export default function Page() {
|
|||
</div>
|
||||
</Link>
|
||||
))}
|
||||
<a
|
||||
className="h-11 flex transform-gpu cursor-pointer select-none appearance-none place-content-between border border-neutral-300 rounded bg-white p-4 text-base font-semibold leading-none text-black outline-none active:translate-y-px dark:border-dark-100 active:bg-neutral-200 dark:bg-dark-400 hover:bg-neutral-100 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
|
||||
href="https://discord-api-types.dev/"
|
||||
>
|
||||
<a className={buttonVariants({ variant: 'secondary' })} href="https://discord-api-types.dev/">
|
||||
<div className="flex grow flex-row place-content-between place-items-center gap-4">
|
||||
<div className="flex grow flex-row place-content-between place-items-center gap-4">
|
||||
<div className="flex flex-row place-content-between place-items-center gap-4">
|
||||
|
|
@ -66,10 +64,7 @@ export default function Page() {
|
|||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<Link
|
||||
className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center place-self-center gap-2 border-0 rounded bg-blurple px-4 text-base font-semibold leading-none text-white no-underline outline-none active:translate-y-px focus:ring focus:ring-width-2 focus:ring-white"
|
||||
href="/"
|
||||
>
|
||||
<Link className={buttonVariants({ className: 'place-self-center' })} href="/">
|
||||
<VscArrowLeft size={20} /> Go back
|
||||
</Link>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import Link from 'next/link';
|
|||
import vercelLogo from '~/assets/powered-by-vercel.svg';
|
||||
import { Banner } from '~/components/Banner';
|
||||
import { InstallButton } from '~/components/InstallButton';
|
||||
import { buttonVariants } from '~/styles/Button';
|
||||
import { DESCRIPTION } from '~/util/constants';
|
||||
|
||||
export default function Page() {
|
||||
|
|
@ -12,27 +13,18 @@ export default function Page() {
|
|||
<Banner />
|
||||
<div className="mx-auto max-w-6xl flex flex-col place-items-center gap-24 px-8 pb-16 pt-12 lg:min-h-[calc(100vh_-_40px)] lg:place-content-center lg:py-10">
|
||||
<div className="flex flex-col place-items-center gap-10 lg:flex-row lg:gap-6">
|
||||
<div className="flex flex-col place-items-center gap-8 text-center">
|
||||
<div className="flex flex-col place-items-center gap-10 text-center">
|
||||
<h1 className="text-3xl font-black leading-tight sm:text-7xl sm:leading-tight">
|
||||
The <span className="relative rounded bg-blurple px-3 py-1 text-white">most popular</span> way to build
|
||||
Discord bots.
|
||||
</h1>
|
||||
<p className="my-6 leading-normal text-neutral-700 dark:text-neutral-300">{DESCRIPTION}</p>
|
||||
<div className="flex flex-row gap-4">
|
||||
<Link
|
||||
className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-blurple px-6 text-base font-semibold leading-none text-white no-underline outline-none active:translate-y-px focus:ring focus:ring-width-2 focus:ring-white"
|
||||
href="/docs"
|
||||
>
|
||||
<Link className={buttonVariants()} href="/docs">
|
||||
Docs
|
||||
</Link>
|
||||
{/* <Link
|
||||
className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-blurple px-6 text-base font-semibold leading-none text-white no-underline outline-none active:translate-y-px focus:ring focus:ring-width-2 focus:ring-white"
|
||||
href="/guide"
|
||||
>
|
||||
Guide
|
||||
</Link> */}
|
||||
<a
|
||||
className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center gap-2 border border-light-900 rounded bg-white px-4 text-base font-semibold leading-none text-black no-underline outline-none transition duration-200 active:translate-y-px dark:border-dark-100 hover:border-black active:bg-light-300 dark:bg-dark-400 hover:bg-light-200 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
|
||||
className={buttonVariants({ variant: 'secondary' })}
|
||||
href="https://discordjs.guide"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
|
|
@ -40,7 +32,7 @@ export default function Page() {
|
|||
Guide <FiExternalLink />
|
||||
</a>
|
||||
<a
|
||||
className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none appearance-none place-items-center gap-2 border border-light-900 rounded bg-white px-4 text-base font-semibold leading-none text-black no-underline outline-none transition duration-200 active:translate-y-px dark:border-dark-100 hover:border-black active:bg-light-300 dark:bg-dark-400 hover:bg-light-200 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
|
||||
className={buttonVariants({ variant: 'secondary' })}
|
||||
href="https://github.com/discordjs/discord.js"
|
||||
rel="external noopener noreferrer"
|
||||
target="_blank"
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { FiCheck } from '@react-icons/all-files/fi/FiCheck';
|
|||
import { FiCopy } from '@react-icons/all-files/fi/FiCopy';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useCopyToClipboard } from 'react-use';
|
||||
import { buttonVariants } from '~/styles/Button';
|
||||
|
||||
export function InstallButton() {
|
||||
const [interacted, setInteracted] = useState(false);
|
||||
|
|
@ -16,7 +17,7 @@ export function InstallButton() {
|
|||
|
||||
return (
|
||||
<button
|
||||
className="cursor-copy select-none bg-transparent px-4 py-2 text-sm text-dark-50 dark:text-light-900"
|
||||
className={buttonVariants({ variant: 'secondary', className: 'cursor-copy font-mono' })}
|
||||
onClick={() => {
|
||||
setInteracted(true);
|
||||
copyToClipboard('npm install discord.js');
|
||||
|
|
|
|||
17
apps/website/src/styles/Button.tsx
Normal file
17
apps/website/src/styles/Button.tsx
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import { cva } from 'class-variance-authority';
|
||||
|
||||
export const buttonVariants = cva(
|
||||
'h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center rounded px-6 text-base font-semibold leading-none text-white no-underline outline-none active:translate-y-px focus:ring focus:ring-width-2 focus:ring-white gap-2',
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
primary: 'bg-blurple text-white border-0',
|
||||
secondary:
|
||||
'bg-white text-gray-800 border-gray-400 border border-light-900 text-black transition duration-200 active:translate-y-px dark:border-dark-100 hover:border-black active:bg-light-300 dark:bg-dark-400 hover:bg-light-200 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: 'primary',
|
||||
},
|
||||
},
|
||||
);
|
||||
22
yarn.lock
22
yarn.lock
|
|
@ -2486,6 +2486,7 @@ __metadata:
|
|||
"@vscode/codicons": ^0.0.32
|
||||
ariakit: ^2.0.0-next.44
|
||||
bright: ^0.7.2
|
||||
class-variance-authority: ^0.6.0
|
||||
cmdk: ^0.2.0
|
||||
concurrently: ^8.0.1
|
||||
cpy-cli: ^4.2.0
|
||||
|
|
@ -9679,6 +9680,20 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"class-variance-authority@npm:^0.6.0":
|
||||
version: 0.6.0
|
||||
resolution: "class-variance-authority@npm:0.6.0"
|
||||
dependencies:
|
||||
clsx: 1.2.1
|
||||
peerDependencies:
|
||||
typescript: ">= 4.5.5 < 6"
|
||||
peerDependenciesMeta:
|
||||
typescript:
|
||||
optional: true
|
||||
checksum: c86fe9d208b33afbd82e3349739f8be9bfceb17e78f2ee689039029de016c5547883b41ac8ab69630f433cf4d4c9159a3c82072e9d8b7225f63cd31c01d6c9b8
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"clean-regexp@npm:^1.0.0":
|
||||
version: 1.0.0
|
||||
resolution: "clean-regexp@npm:1.0.0"
|
||||
|
|
@ -9852,6 +9867,13 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"clsx@npm:1.2.1":
|
||||
version: 1.2.1
|
||||
resolution: "clsx@npm:1.2.1"
|
||||
checksum: 30befca8019b2eb7dbad38cff6266cf543091dae2825c856a62a8ccf2c3ab9c2907c4d12b288b73101196767f66812365400a227581484a05f968b0307cfaf12
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"cluster-key-slot@npm:^1.1.0":
|
||||
version: 1.1.2
|
||||
resolution: "cluster-key-slot@npm:1.1.2"
|
||||
|
|
|
|||
Loading…
Reference in a new issue