Skip to content

Commit fba6e02

Browse files
nikohoffrennikohoffren
committed
Add Header.tsx and Footer.tsx
1 parent 1cc3797 commit fba6e02

File tree

15 files changed

+397
-33
lines changed

15 files changed

+397
-33
lines changed

‎components/Coffee.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
function Coffee() {
2+
return (
3+
<a
4+
className="buyButton"
5+
target="_blank"
6+
rel="noopener noreferrer"
7+
href="https://www.buymeacoffee.com/nikohoffren"
8+
>
9+
<img
10+
className="coffeeImage"
11+
src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg"
12+
alt="Buy me a coffee"
13+
/>
14+
15+
</a>
16+
);
17+
}
18+
19+
export default Coffee;

‎components/Footer.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import Link from "next/link";
2+
3+
const Footer = () => {
4+
return (
5+
<footer className="bg-slate-950 text-slate-50 py-6">
6+
<div className="container mx-auto px-6">
7+
<div className="flex justify-between items-center">
8+
<div>
9+
<p className="text-sm">Copyright © 2023 Niko Hoffrén</p>
10+
</div>
11+
<div className="flex space-x-4">
12+
<Link
13+
href="https://github.com/nikohoffren/devgallery.io/blob/main/CONTRIBUTING.md"
14+
className="text-sm text-slate-50 hover:underline"
15+
target="blank"
16+
>
17+
Contributing
18+
</Link>
19+
<Link
20+
href="/privacy-policy"
21+
className="text-sm text-slate-50 hover:underline"
22+
target="blank"
23+
>
24+
Privacy Policy
25+
</Link>
26+
<Link
27+
href="https://github.com/nikohoffren/devgallery.io/blob/main/code_of_conduct.md"
28+
className="text-sm text-slate-50 hover:underline"
29+
target="blank"
30+
>
31+
Code of Conduct
32+
</Link>
33+
<Link
34+
href="/contact"
35+
className="text-sm text-slate-50 hover:underline"
36+
>
37+
Contact
38+
</Link>
39+
</div>
40+
</div>
41+
</div>
42+
</footer>
43+
);
44+
};
45+
46+
export default Footer;

‎components/Header.tsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
/* eslint-disable @next/next/no-sync-scripts */
2+
import Link from "next/link";
3+
import Image from "next/image";
4+
import Coffee from "./Coffee";
5+
import styles from "../styles/Coffee.module.css";
6+
7+
const Header = () => {
8+
return (
9+
<>
10+
<nav className="bg-slate-950 text-slate-50 backdrop-blur">
11+
<div className="container mx-auto px-6 py-3">
12+
<div className="flex items-center justify-between">
13+
<div>
14+
<Link href="/">
15+
<div className="py-2 px-6 block text-sm cursor-pointer hover:scale-105">
16+
<Image
17+
src="/dev-gallery.png"
18+
alt="devgallery.io logo"
19+
width={40}
20+
height={40}
21+
/>
22+
</div>
23+
</Link>
24+
</div>
25+
<nav>
26+
<ul className="md:flex items-center space-x-1">
27+
<li>
28+
<Link href="/getting-started">
29+
<div className="py-2 px-6 block text-sm cursor-pointer hover:underline">
30+
Getting Started
31+
</div>
32+
</Link>
33+
</li>
34+
<li>
35+
<Link href="https://github.com/nikohoffren/devgallery.io" target="blank">
36+
<div className="py-2 px-6 mr-6 block text-sm cursor-pointer hover:underline">
37+
Contribute in GitHub
38+
</div>
39+
</Link>
40+
</li>
41+
<li className={styles.buyButton}>
42+
<Coffee />
43+
</li>
44+
</ul>
45+
</nav>
46+
</div>
47+
</div>
48+
</nav>
49+
<header className="bg-slate-950 text-slate-50 sticky top-0 z-10 opacity-95">
50+
<div className="container mx-auto px-6 py-3 pb-6">
51+
<div className="mt-3 md:flex items-center space-x-1 justify-end">
52+
<Link href="/projects">
53+
<div className="py-2 px-6 block text-sm cursor-pointer hover:underline">
54+
Projects
55+
</div>
56+
</Link>
57+
<Link href="/developers">
58+
<div className="py-2 px-6 block text-sm cursor-pointer hover:underline">
59+
Developers
60+
</div>
61+
</Link>
62+
<Link href="/about">
63+
<div className="py-2 px-6 block text-sm cursor-pointer hover:underline">
64+
About
65+
</div>
66+
</Link>
67+
<Link href="/contact">
68+
<div className="py-2 px-6 block text-sm cursor-pointer hover:underline">
69+
Contact
70+
</div>
71+
</Link>
72+
</div>
73+
</div>
74+
</header>
75+
</>
76+
);
77+
};
78+
79+
export default Header;

‎components/ProjectCard.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import Image from "next/image";
2+
3+
interface ProjectCardProps {
4+
projectName: string;
5+
developerName: string;
6+
imageUrl: string;
7+
content: string;
8+
projectLink: string;
9+
}
10+
11+
const ProjectCard: React.FC<ProjectCardProps> = ({
12+
projectName,
13+
developerName,
14+
imageUrl,
15+
content,
16+
projectLink,
17+
}) => {
18+
return (
19+
<div className="border rounded-lg shadow-sm p-6 max-w-md mx-auto">
20+
<Image
21+
src={imageUrl}
22+
alt={`${projectName} Image`}
23+
width={128}
24+
height={128}
25+
/>
26+
<div className="mt-6">
27+
<h2 className="text-2xl font-semibold text-slate-50">{projectName}</h2>
28+
<h3 className="text-lg text-gray-300">{developerName}</h3>
29+
<p className="text-md text-gray-400 mt-4">{content}</p>
30+
</div>
31+
<div className="mt-6">
32+
<a
33+
href={projectLink}
34+
target="_blank"
35+
rel="noopener noreferrer"
36+
className="text-blue-500 hover:underline"
37+
>
38+
View Project
39+
</a>
40+
</div>
41+
</div>
42+
);
43+
};
44+
45+
export default ProjectCard;

‎pages/_app.tsx‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
11
// pages/_app.tsx
2-
import '../styles/tailwind.css'
3-
import type { AppProps } from 'next/app'
2+
import "../styles/tailwind.css";
3+
import type { AppProps } from "next/app";
4+
import Header from "../components/Header";
5+
import Footer from "../components/Footer";
46

57
function MyApp({ Component, pageProps }: AppProps) {
6-
return <Component {...pageProps} />
8+
return (
9+
<>
10+
<Header />
11+
<Component {...pageProps} />
12+
<Footer />
13+
</>
14+
);
715
}
816

9-
export default MyApp
17+
export default MyApp;

‎pages/about.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export default function About() {
2+
return (
3+
<div>
4+
<h1>About</h1>
5+
<p>This is the about page.</p>
6+
</div>
7+
);
8+
}

‎pages/contact.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export default function Contact() {
2+
return (
3+
<div>
4+
<h1>Contact</h1>
5+
<p>This is the contact page.</p>
6+
</div>
7+
);
8+
}

‎pages/developers.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export default function Developers() {
2+
return (
3+
<div>
4+
<h1>Developers</h1>
5+
<p>This is the developers page.</p>
6+
</div>
7+
);
8+
}

‎pages/getting-started.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export default function GettingStarted() {
2+
return (
3+
<div>
4+
<h1>Getting Started</h1>
5+
<p>This is the contact page.</p>
6+
</div>
7+
);
8+
}

‎pages/index.tsx‎

Lines changed: 108 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,113 @@
1+
// pages/index.tsx
12
import Image from "next/image";
3+
import ProjectCard from "../components/ProjectCard";
24

35
export default function Home() {
4-
return (
5-
<main className="min-h-screen flex flex-col items-center justify-center p-10 text-center bg-slate-950">
6-
<div className="mb-10">
7-
<Image
8-
className="mx-auto"
9-
src="/dev-gallery.jpg"
10-
alt="Dev Gallery Logo"
11-
width={180}
12-
height={180}
13-
priority
14-
/>
15-
<h1 className="mt-5 text-5xl font-bold text-slate-50">
16-
Welcome to devgallery.io
17-
</h1>
18-
<p className="mt-2 text-lg font-light text-gray-100">
19-
Explore amazing projects developed by talented developers
20-
</p>
21-
</div>
6+
return (
7+
<main className="min-h-screen flex flex-col items-center justify-center p-10 text-center bg-slate-950">
8+
<div className="mb-10">
9+
<Image
10+
className="mx-auto"
11+
src="/dev-gallery.png"
12+
alt="Dev Gallery Logo"
13+
width={180}
14+
height={180}
15+
priority
16+
/>
17+
<h1 className="mt-5 text-5xl font-bold text-slate-50">
18+
Welcome to devgallery.io
19+
</h1>
20+
<p className="mt-2 text-lg font-light text-gray-100">
21+
Explore amazing projects developed by talented developers
22+
</p>
23+
</div>
2224

23-
{/* <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
24-
{projects.map((project) => (
25-
<div key={project.id} className="p-4 border rounded-lg shadow-sm">
26-
<h2 className="mb-2 text-2xl font-semibold">{project.name}</h2>
27-
<p className="text-sm text-gray-600">{project.description}</p>
28-
</div>
29-
))}
30-
</div> */}
31-
</main>
32-
);
25+
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3">
26+
<ProjectCard
27+
projectName="Project 1"
28+
developerName="Developer 1"
29+
imageUrl="/project1.jpg"
30+
content="This is a brief description of the project."
31+
projectLink="https://project1.example.com"
32+
/>
33+
<ProjectCard
34+
projectName="Project 1"
35+
developerName="Developer 1"
36+
imageUrl="/project1.jpg"
37+
content="This is a brief description of the project."
38+
projectLink="https://project1.example.com"
39+
/>
40+
<ProjectCard
41+
projectName="Project 1"
42+
developerName="Developer 1"
43+
imageUrl="/project1.jpg"
44+
content="This is a brief description of the project."
45+
projectLink="https://project1.example.com"
46+
/>
47+
<ProjectCard
48+
projectName="Project 1"
49+
developerName="Developer 1"
50+
imageUrl="/project1.jpg"
51+
content="This is a brief description of the project."
52+
projectLink="https://project1.example.com"
53+
/>
54+
<ProjectCard
55+
projectName="Project 1"
56+
developerName="Developer 1"
57+
imageUrl="/project1.jpg"
58+
content="This is a brief description of the project."
59+
projectLink="https://project1.example.com"
60+
/>
61+
<ProjectCard
62+
projectName="Project 1"
63+
developerName="Developer 1"
64+
imageUrl="/project1.jpg"
65+
content="This is a brief description of the project."
66+
projectLink="https://project1.example.com"
67+
/>
68+
<ProjectCard
69+
projectName="Project 1"
70+
developerName="Developer 1"
71+
imageUrl="/project1.jpg"
72+
content="This is a brief description of the project."
73+
projectLink="https://project1.example.com"
74+
/>
75+
<ProjectCard
76+
projectName="Project 1"
77+
developerName="Developer 1"
78+
imageUrl="/project1.jpg"
79+
content="This is a brief description of the project."
80+
projectLink="https://project1.example.com"
81+
/>
82+
<ProjectCard
83+
projectName="Project 1"
84+
developerName="Developer 1"
85+
imageUrl="/project1.jpg"
86+
content="This is a brief description of the project."
87+
projectLink="https://project1.example.com"
88+
/>
89+
<ProjectCard
90+
projectName="Project 1"
91+
developerName="Developer 1"
92+
imageUrl="/project1.jpg"
93+
content="This is a brief description of the project."
94+
projectLink="https://project1.example.com"
95+
/>
96+
<ProjectCard
97+
projectName="Project 1"
98+
developerName="Developer 1"
99+
imageUrl="/project1.jpg"
100+
content="This is a brief description of the project."
101+
projectLink="https://project1.example.com"
102+
/>
103+
<ProjectCard
104+
projectName="Project 1"
105+
developerName="Developer 1"
106+
imageUrl="/project1.jpg"
107+
content="This is a brief description of the project."
108+
projectLink="https://project1.example.com"
109+
/>
110+
</div>
111+
</main>
112+
);
33113
}

0 commit comments

Comments
 (0)