Skip to content

Commit 139f457

Browse files
Rowee13Rowee13
committed
initial main layout with header and footer
1 parent 8c5530c commit 139f457

File tree

11 files changed

+128
-18
lines changed

11 files changed

+128
-18
lines changed

Diff for: ‎app/(root)/components/page.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
const ComponentsPage = () => {
2+
return (
3+
<section>
4+
<div className='max-w-7xl mx-auto px-4 py-8 flex flex-col justify-center items-center'>
5+
<h2>Components page</h2>
6+
</div>
7+
</section>
8+
)
9+
}
10+
11+
export default ComponentsPage

Diff for: ‎app/(root)/layout.tsx

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import MainFooter from '@/components/footer/main-footer'
2+
import MainHeader from '@/components/header/main-header'
3+
4+
export default function HomeLayout({
5+
children,
6+
}: {
7+
children: React.ReactNode
8+
}) {
9+
return (
10+
<div className='min-h-screen h-screen overflow-auto flex flex-col font-[family-name:var(--font-outfit)]'>
11+
<MainHeader />
12+
<main className='flex-grow'>{children}</main>
13+
<MainFooter />
14+
</div>
15+
)
16+
}

Diff for: ‎app/(root)/page.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export default function Home() {
2+
return (
3+
<section>
4+
<div className='max-w-7xl mx-auto px-4 py-8 flex flex-col justify-center items-center'>
5+
<h2>Home page</h2>
6+
</div>
7+
</section>
8+
)
9+
}

Diff for: ‎app/layout.tsx

+15-8
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,28 @@
11
import type { Metadata } from 'next'
2-
import { Geist, Geist_Mono } from 'next/font/google'
2+
import { Outfit, Rubik_Vinyl } from 'next/font/google'
3+
4+
import { siteConfig } from '@/constant/config'
35

46
import './globals.css'
57

6-
const geistSans = Geist({
7-
variable: '--font-geist-sans',
8+
const rubikVinyl = Rubik_Vinyl({
9+
variable: '--font-rubik-vinyl',
10+
weight: '400',
811
subsets: ['latin'],
912
})
1013

11-
const geistMono = Geist_Mono({
12-
variable: '--font-geist-mono',
14+
const outfit = Outfit({
15+
variable: '--font-outfit',
16+
weight: '400',
1317
subsets: ['latin'],
1418
})
1519

1620
export const metadata: Metadata = {
17-
title: 'Create Next App',
18-
description: 'Generated by create next app',
21+
title: {
22+
default: siteConfig.title,
23+
template: `%s | ${siteConfig.title}`,
24+
},
25+
description: siteConfig.description,
1926
}
2027

2128
export default function RootLayout({
@@ -26,7 +33,7 @@ export default function RootLayout({
2633
return (
2734
<html lang='en'>
2835
<body
29-
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
36+
className={`${rubikVinyl.variable} ${outfit.variable} antialiased`}
3037
>
3138
{children}
3239
</body>

Diff for: ‎app/page.tsx

-8
This file was deleted.

Diff for: ‎components/footer/main-footer.tsx

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import Link from 'next/link'
2+
3+
import { FaGithub } from 'react-icons/fa'
4+
5+
const MainFooter = () => {
6+
return (
7+
<footer>
8+
<div className='max-w-7xl mx-auto px-4 py-8 border-t border-zinc-800'>
9+
<div className='flex flex-row justify-between items-center'>
10+
<p>PHS NextJS Starter - {new Date().getFullYear()}</p>
11+
<div>
12+
<Link
13+
href='https://github.com/Rowee13/phs-nextjs-starter/tree/master'
14+
passHref
15+
target='_blank'
16+
rel='noopener noreferrer'
17+
>
18+
<FaGithub className='w-5 h-5 hover:text-cyan-500' />
19+
</Link>
20+
</div>
21+
</div>
22+
</div>
23+
</footer>
24+
)
25+
}
26+
27+
export default MainFooter

Diff for: ‎components/header/main-header.tsx

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import Link from 'next/link'
2+
3+
const MainHeader = () => {
4+
return (
5+
<header>
6+
<div className='flex flex-row justify-between items-center max-w-7xl mx-auto px-4 py-8'>
7+
<div>
8+
<h1 className='text-2xl font-[family-name:var(--font-rubik-vinyl)]'>
9+
PHS NextJS Starter
10+
</h1>
11+
</div>
12+
<nav>
13+
<ul className='flex flex-row space-x-6'>
14+
<li className='px-2 py-1'>
15+
<Link href='/'>Home</Link>
16+
</li>
17+
<li className='px-2 py-1'>
18+
<Link href='/components'>Components</Link>
19+
</li>
20+
</ul>
21+
</nav>
22+
</div>
23+
</header>
24+
)
25+
}
26+
27+
export default MainHeader

Diff for: ‎constant/config.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export const siteConfig = {
2+
title: 'PHS NextJS Starter',
3+
description:
4+
'A NextJS starter template created for Parrow Horrizon Studio.',
5+
url: 'https://phs-next-starter.parrowhorrizonstudio.com',
6+
}

Diff for: ‎package-lock.json

+11-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@
1212
"dependencies": {
1313
"next": "15.1.0",
1414
"react": "^19.0.0",
15-
"react-dom": "^19.0.0"
15+
"react-dom": "^19.0.0",
16+
"react-icons": "^5.4.0"
1617
},
1718
"devDependencies": {
1819
"@eslint/eslintrc": "^3",

Diff for: ‎tailwind.config.ts

+4
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ export default {
1212
background: 'var(--background)',
1313
foreground: 'var(--foreground)',
1414
},
15+
maxWidth: {
16+
'8xl': '90rem', // 1440px
17+
'9xl': '105rem', // 1680px
18+
},
1519
},
1620
},
1721
plugins: [],

0 commit comments

Comments
 (0)