Skip to content

Commit b16cbcc

Browse files
DiubiiDiubii
committed
feat: incorporate CardMultipleIcons into footer.tsx; fix: spacings; feat: add FooterAccordion and FooterLink components
1 parent e34046c commit b16cbcc

2 files changed

Lines changed: 108 additions & 68 deletions

File tree

‎src/app/page.tsx‎

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
import Image from "next/image"
2-
import { FiFacebook, FiGithub, FiInstagram, FiLinkedin } from "react-icons/fi"
3-
import discord from "@/assets/icons/discord.svg"
4-
import telegram from "@/assets/icons/telegram.svg"
5-
import { CardMultipleIcons } from "@/components/card-multiple-icons"
61
import { AboutUs } from "@/components/home/about-us"
72
import { Hero } from "@/components/home/hero"
83
import { Materials } from "@/components/home/materials"
@@ -13,18 +8,6 @@ export default function Home() {
138
<Hero />
149
<Materials />
1510
<AboutUs />
16-
<div className="mx-auto w-fit py-12">
17-
<CardMultipleIcons
18-
icons={[
19-
<Image key="telegram" src={telegram} alt="Telegram" />,
20-
<FiInstagram key="instagram" />,
21-
<FiLinkedin key="linkedin" />,
22-
<FiFacebook key="facebook" />,
23-
<Image key="discord" src={discord} alt="Discord" />,
24-
<FiGithub key="github" />,
25-
]}
26-
/>
27-
</div>
2811
</main>
2912
)
3013
}

‎src/components/footer.tsx‎

Lines changed: 108 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,105 @@
1-
import { ChevronDown, Github } from "lucide-react"
1+
import Image from "next/image"
2+
import { FaChevronDown, FaGithub } from "react-icons/fa"
3+
import { FiFacebook, FiGithub, FiInstagram, FiLinkedin } from "react-icons/fi"
4+
import discord from "@/assets/icons/discord.svg"
5+
import telegram from "@/assets/icons/telegram.svg"
6+
import { CardMultipleIcons } from "./card-multiple-icons"
27
import { CardSplit } from "./card-split"
38
import { Button } from "./ui/button"
49
import { ButtonWithIcon } from "./ui/buttonWithIcon"
510

11+
interface FooterLinkProps {
12+
href: string
13+
children: React.ReactNode
14+
}
15+
16+
function FooterLink({ href, children }: FooterLinkProps) {
17+
return (
18+
<a href={href} className="hover:text-gray-800">
19+
{children}
20+
</a>
21+
)
22+
}
23+
24+
interface FooterAccordionProps {
25+
title: string
26+
links: { label: string; href: string }[]
27+
}
28+
29+
function FooterAccordion({ title, links }: FooterAccordionProps) {
30+
return (
31+
<details className="group">
32+
<summary className="flex cursor-pointer list-none items-center gap-2 [&::-webkit-details-marker]:hidden">
33+
{title}
34+
<FaChevronDown className="h-4 w-4 transition-transform group-open:rotate-180" />
35+
</summary>
36+
<div className="mt-2 flex flex-col gap-2 pl-2 text-gray-500 text-sm">
37+
{links.map((link) => (
38+
<FooterLink key={link.label} href={link.href}>
39+
{link.label}
40+
</FooterLink>
41+
))}
42+
</div>
43+
</details>
44+
)
45+
}
46+
47+
const sitemapSections = [
48+
{
49+
type: "accordion" as const,
50+
title: "Resources",
51+
links: [
52+
{ label: "Materials", href: "/" },
53+
{ label: "Guides", href: "/" },
54+
{ label: "Computer recs", href: "/" },
55+
{ label: "FAQs", href: "/" },
56+
],
57+
},
58+
{ type: "text" as const, label: "Privacy Policy" },
59+
{
60+
type: "accordion" as const,
61+
title: "Community",
62+
links: [
63+
{ label: "Groups", href: "/" },
64+
{ label: "Projects", href: "/" },
65+
{ label: "Freshmen", href: "/" },
66+
{ label: "Associations", href: "/" },
67+
],
68+
},
69+
{ type: "text" as const, label: "Terms & conditions" },
70+
{
71+
type: "accordion" as const,
72+
title: "About",
73+
links: [
74+
{ label: "About us", href: "/" },
75+
{ label: "Join us", href: "/" },
76+
{ label: "Contact us", href: "/" },
77+
],
78+
},
79+
{ type: "text" as const, label: "Cookie policy" },
80+
]
81+
682
export function Footer() {
783
//Icone a riga 11 in futuro per mobile
884
return (
985
<footer className="my-8 w-full px-8">
1086
<h2 className="typo-headline-medium md:typo-display-large mb-8 text-center max-md:bg-linear-to-b max-md:from-blue-secondary max-md:to-blue-primary max-md:bg-clip-text max-md:text-transparent">
1187
Keep in touch!
1288
</h2>
89+
90+
<div className="mx-auto w-fit pb-24">
91+
<CardMultipleIcons
92+
icons={[
93+
<Image key="telegram" src={telegram} alt="Telegram" />,
94+
<FiInstagram key="instagram" />,
95+
<FiLinkedin key="linkedin" />,
96+
<FiFacebook key="facebook" />,
97+
<Image key="discord" src={discord} alt="Discord" />,
98+
<FiGithub key="github" />,
99+
]}
100+
/>
101+
</div>
102+
13103
<div className="flex w-full justify-evenly gap-8 max-md:flex-col max-md:items-center">
14104
<div className="flex w-full flex-col gap-8 md:order-2 md:max-w-sm">
15105
<div id="talkwithus" className="w-full">
@@ -38,7 +128,12 @@ export function Footer() {
38128
<div id="problems" className="flex flex-col gap-4 text-center md:text-left">
39129
<h3 className="typo-label-extralarge md:typo-headline-small">Qualche problema? Segnalalo!</h3>
40130
<div>
41-
<ButtonWithIcon icon={Github} iconPosition="left" variant="tertiary" text="Report a bug"></ButtonWithIcon>
131+
<ButtonWithIcon
132+
icon={FaGithub}
133+
iconPosition="left"
134+
variant="tertiary"
135+
text="Report a bug"
136+
></ButtonWithIcon>
42137
</div>
43138
</div>
44139
</div>
@@ -54,60 +149,22 @@ export function Footer() {
54149
<div id="sitemap" className="flex w-full flex-col gap-4">
55150
<h3 className="typo-label-extralarge md:typo-headline-small">Visita il sito</h3>
56151
<div className="typo-body-large grid grid-cols-2 items-start gap-x-4 gap-y-4 text-gray-600">
57-
<details className="group">
58-
<summary className="flex cursor-pointer list-none items-center justify-between [&::-webkit-details-marker]:hidden">
59-
Resources
60-
<ChevronDown className="h-4 w-4 transition-transform group-open:rotate-180" />
61-
</summary>
62-
<div className="mt-2 flex flex-col gap-2 pl-2 text-gray-500 text-sm">
63-
<a href="/" className="hover:text-gray-800">
64-
Rules
65-
</a>
66-
<a href="/" className="hover:text-gray-800">
67-
Guides
68-
</a>
69-
<a href="/" className="hover:text-gray-800">
70-
FAQ
71-
</a>
72-
</div>
73-
</details>
74-
<p>Privacy Policy</p>
75-
<details className="group">
76-
<summary className="flex cursor-pointer list-none items-center justify-between [&::-webkit-details-marker]:hidden">
77-
Community
78-
<ChevronDown className="h-4 w-4 transition-transform group-open:rotate-180" />
79-
</summary>
80-
<div className="mt-2 flex flex-col gap-2 pl-2 text-gray-500 text-sm">
81-
<a href="/" className="hover:text-gray-800">
82-
Discord
83-
</a>
84-
<a href="/" className="hover:text-gray-800">
85-
Telegram
86-
</a>
87-
</div>
88-
</details>
89-
<p>Terms & conditions</p>
90-
<details className="group">
91-
<summary className="flex cursor-pointer list-none items-center justify-between [&::-webkit-details-marker]:hidden">
92-
About
93-
<ChevronDown className="h-4 w-4 transition-transform group-open:rotate-180" />
94-
</summary>
95-
<div className="mt-2 flex flex-col gap-2 pl-2 text-gray-500 text-sm">
96-
<a href="/" className="hover:text-gray-800">
97-
Team
98-
</a>
99-
<a href="/" className="hover:text-gray-800">
100-
Contatti
101-
</a>
102-
</div>
103-
</details>
104-
<p>Cookie policy</p>
152+
{sitemapSections.map((section) =>
153+
section.type === "accordion" ? (
154+
<FooterAccordion key={section.title} title={section.title} links={section.links} />
155+
) : (
156+
<p key={section.label}>{section.label}</p>
157+
)
158+
)}
105159
</div>
106160
</div>
107161
</div>
108162
</div>
109163

110-
<div id="copyright" className="typo-body-small md:typo-body-large mt-12 text-center text-gray-600 md:text-left">
164+
<div
165+
id="copyright"
166+
className="typo-body-small md:typo-body-large mt-36 mb-12 ml-36 text-center text-text-secondary md:text-left"
167+
>
111168
PoliNetwork 2016-2026 © All rights reserved
112169
</div>
113170
</footer>

0 commit comments

Comments
 (0)