jknetl/nextjs-dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Chapter 3 - add fonts

Browse Source
This commit is contained in:
Jakub Knetl
2023-12-27 13:04:51 +01:00
parent 982169d4b0
commit 961cd66754
3 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/layout.tsx
View File

@@ -1,4 +1,5 @@
import '@/app/ui/global.css'; import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';
export default function RootLayout({ export default function RootLayout({
children, children,
@@ -7,7 +8,7 @@ export default function RootLayout({
}) { }) {
return ( return (
<html lang="en"> <html lang="en">
<body>{children}</body> <body className={`${inter.className} antialiased`}>{children}</body>
</html> </html>
); );
} }

5
app/page.tsx
View File

@@ -2,18 +2,19 @@ import styles from '@/app/ui/home.module.css';
import AcmeLogo from '@/app/ui/acme-logo'; import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline'; import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link'; import Link from 'next/link';
import {lusitana} from "@/app/ui/fonts";
export default function Page() { export default function Page() {
return ( return (
<main className="flex min-h-screen flex-col p-6"> <main className="flex min-h-screen flex-col p-6">
<div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52"> <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
{/* <AcmeLogo /> */} <AcmeLogo />
</div> </div>
<div className="mt-4 flex grow flex-col gap-4 md:flex-row"> <div className="mt-4 flex grow flex-col gap-4 md:flex-row">
<div className="flex flex-col justify-center gap-6 rounded-lg bg-gray-50 px-6 py-10 md:w-2/5 md:px-20"> <div className="flex flex-col justify-center gap-6 rounded-lg bg-gray-50 px-6 py-10 md:w-2/5 md:px-20">
<div className="h-0 w-0 border-b-[30px] border-l-[20px] border-r-[20px] border-b-black border-l-transparent border-r-transparent"/> <div className="h-0 w-0 border-b-[30px] border-l-[20px] border-r-[20px] border-b-black border-l-transparent border-r-transparent"/>
<div className={styles.shape}></div> <div className={styles.shape}></div>
<p className={`text-xl text-gray-800 md:text-3xl md:leading-normal`}> <p className={`${lusitana.className} text-xl text-gray-800 md:text-3xl md:leading-normal`}>
<strong>Welcome to Acme.</strong> This is the example for the{' '} <strong>Welcome to Acme.</strong> This is the example for the{' '}
<a href="https://nextjs.org/learn/" className="text-blue-500"> <a href="https://nextjs.org/learn/" className="text-blue-500">
Next.js Learn Course Next.js Learn Course

5
app/ui/fonts.ts Normal file
View File

@@ -0,0 +1,5 @@
import { Inter, Lusitana } from 'next/font/google';
export const inter = Inter({ subsets: ['latin'] });
export const lusitana = Lusitana({weight: "400", subsets: ['latin']});