gavin/Tarokka
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

fancy fonts

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

25
app/layout.tsx
View File

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

11
components/Settings.tsx
View File

@@ -2,12 +2,19 @@
import { useState } from 'react'; import { useState } from 'react';
import { Settings as Gear } from 'lucide-react'; import { Settings as Gear } from 'lucide-react';
import { Cinzel_Decorative } from 'next/font/google';
import CopyButton from '@/components/CopyButton'; import CopyButton from '@/components/CopyButton';
import Scrim from '@/components/Scrim'; import Scrim from '@/components/Scrim';
import Switch from '@/components/Switch'; import Switch from '@/components/Switch';
import { CardStyle, GameUpdate } from '@/types'; import { CardStyle, GameUpdate } from '@/types';
const cinzel = Cinzel_Decorative({
variable: '--font-cinzel',
subsets: ['latin'],
weight: '400',
});
type SettingsProps = { type SettingsProps = {
gameData: GameUpdate; gameData: GameUpdate;
changeAction: (updatedSettings: GameUpdate) => void; changeAction: (updatedSettings: GameUpdate) => void;
@@ -79,13 +86,13 @@ export default function Settings({ gameData, changeAction }: SettingsProps) {
); );
return ( return (
<div className={`fixed top-4 right-4 z-50`}> <div className={`fixed top-4 right-4 z-50 ${cinzel.className}`}>
<Scrim <Scrim
onClick={() => setOpen((prev) => !prev)} onClick={() => setOpen((prev) => !prev)}
className={`transition-all duration-250 ${open ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'}`} className={`transition-all duration-250 ${open ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'}`}
> >
<div <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 <CopyButton
title="Copy DM link" title="Copy DM link"