diff --git a/apps/website/package.json b/apps/website/package.json index c9ffb0c31..130ff6834 100644 --- a/apps/website/package.json +++ b/apps/website/package.json @@ -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", diff --git a/apps/website/src/app/docs/packages/[package]/page.tsx b/apps/website/src/app/docs/packages/[package]/page.tsx index 2a876902e..19928b6a6 100644 --- a/apps/website/src/app/docs/packages/[package]/page.tsx +++ b/apps/website/src/app/docs/packages/[package]/page.tsx @@ -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 } })
{data.map((version, idx) => ( @@ -45,10 +46,7 @@ export default async function Page({ params }: { params: { package: string } }) )) ?? null}
- + Go back diff --git a/apps/website/src/app/docs/packages/page.tsx b/apps/website/src/app/docs/packages/page.tsx index 0e6c56f2f..ca72a67e6 100644 --- a/apps/website/src/app/docs/packages/page.tsx +++ b/apps/website/src/app/docs/packages/page.tsx @@ -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() { {PACKAGES.map((pkg, idx) => ( @@ -51,10 +52,7 @@ export default function Page() { ))} - +
@@ -66,10 +64,7 @@ export default function Page() {
- + Go back
diff --git a/apps/website/src/app/page.tsx b/apps/website/src/app/page.tsx index f076e3b96..cacd05fbc 100644 --- a/apps/website/src/app/page.tsx +++ b/apps/website/src/app/page.tsx @@ -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() {
-
+

The most popular way to build Discord bots.

{DESCRIPTION}

- + Docs - {/* - Guide - */} { setInteracted(true); copyToClipboard('npm install discord.js'); diff --git a/apps/website/src/styles/Button.tsx b/apps/website/src/styles/Button.tsx new file mode 100644 index 000000000..439a2a073 --- /dev/null +++ b/apps/website/src/styles/Button.tsx @@ -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', + }, + }, +); diff --git a/yarn.lock b/yarn.lock index 80771945a..b2bc7f7b0 100644 --- a/yarn.lock +++ b/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"