fancy fonts

This commit is contained in:
Gavin McDonald
2025-04-24 14:20:07 -04:00
parent 1a4789af4c
commit 969d9f5028
2 changed files with 27 additions and 9 deletions

View File

@@ -1,15 +1,23 @@
import type { Metadata } from 'next';
import { Geist, Geist_Mono } from 'next/font/google';
import { Pirata_One, Eagle_Lake, Cinzel_Decorative } from 'next/font/google';
import './globals.css';
const geistSans = Geist({
variable: '--font-geist-sans',
const pirataOne = Pirata_One({
variable: '--font-pirata',
subsets: ['latin'],
weight: '400',
});
const geistMono = Geist_Mono({
variable: '--font-geist-mono',
const eagleLake = Eagle_Lake({
variable: '--font-eagle-lake',
subsets: ['latin'],
weight: '400',
});
const cinzel = Cinzel_Decorative({
variable: '--font-cinzel',
subsets: ['latin'],
weight: '400',
});
export const metadata: Metadata = {
@@ -23,8 +31,11 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>{children}</body>
<html
lang="en"
className={`${pirataOne.variable} ${eagleLake.variable} ${cinzel.variable} antialiased`}
>
<body className={`${eagleLake.className} antialiased`}>{children}</body>
</html>
);
}

View File

@@ -2,12 +2,19 @@
import { useState } from 'react';
import { Settings as Gear } from 'lucide-react';
import { Cinzel_Decorative } from 'next/font/google';
import CopyButton from '@/components/CopyButton';
import Scrim from '@/components/Scrim';
import Switch from '@/components/Switch';
import { CardStyle, GameUpdate } from '@/types';
const cinzel = Cinzel_Decorative({
variable: '--font-cinzel',
subsets: ['latin'],
weight: '400',
});
type SettingsProps = {
gameData: GameUpdate;
changeAction: (updatedSettings: GameUpdate) => void;
@@ -79,13 +86,13 @@ export default function Settings({ gameData, changeAction }: SettingsProps) {
);
return (
<div className={`fixed top-4 right-4 z-50`}>
<div className={`fixed top-4 right-4 z-50 ${cinzel.className}`}>
<Scrim
onClick={() => setOpen((prev) => !prev)}
className={`transition-all duration-250 ${open ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'}`}
>
<div
className={`fixed top-4 right-4 flex flex-col items-center justify-center text-gray-100 bg-gray-800 shadow-lg rounded-lg border border-gray-500 p-6 space-y-2 transition-all duration-250 ${open ? 'opacity-100 w-[300px] h-[300px]' : 'opacity-0 w-0 h-0'}`}
className={`fixed top-4 right-4 flex flex-col items-center justify-center text-gray-100 bg-gray-800 shadow-lg rounded-lg border border-gray-500 p-6 space-y-2 transition-all duration-250 ${open ? 'opacity-100 w-[350px] h-[300px]' : 'opacity-0 w-0 h-0'}`}
>
<CopyButton
title="Copy DM link"