sebastjan/folx-tv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add social media links and icons to the website footer

Browse Source 
Integrates social media links (Facebook, Instagram, YouTube, TikTok) into the footer component using react-icons, both as clickable icons and text links.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: f7e766d6-7f9f-47e6-8eb5-63f33a1d5eaa
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/jdAEdU5
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-03-04 15:23:17 +00:00
parent 939c4fde1e
commit ef836d9ddf
1 changed files with 39 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
client/src/components/footer.tsx
View File

@ -1,4 +1,12 @@
import { Link } from "wouter"; import { Link } from "wouter";
import { SiFacebook, SiInstagram, SiYoutube, SiTiktok } from "react-icons/si";
const SOCIAL_LINKS = [
{ href: "https://www.facebook.com/folxtv/", icon: SiFacebook, label: "Facebook", testId: "link-social-facebook" },
{ href: "https://www.instagram.com/folxtv/", icon: SiInstagram, label: "Instagram", testId: "link-social-instagram" },
{ href: "https://www.youtube.com/@folxmtv", icon: SiYoutube, label: "YouTube", testId: "link-social-youtube" },
{ href: "https://www.tiktok.com/@folxtv", icon: SiTiktok, label: "TikTok", testId: "link-social-tiktok" },
];
export default function Footer() { export default function Footer() {
return ( return (
@ -7,10 +15,25 @@ export default function Footer() {
<div className="grid grid-cols-1 md:grid-cols-3 gap-8"> <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div> <div>
<h3 className="font-bold text-card-foreground text-lg mb-3">Folx Music Television</h3> <h3 className="font-bold text-card-foreground text-lg mb-3">Folx Music Television</h3>
<p className="text-muted-foreground text-sm leading-relaxed"> <p className="text-muted-foreground text-sm leading-relaxed mb-4">
Folx Music Television. Aktuelle Nachrichten, Interviews und Folx Music Television. Aktuelle Nachrichten, Interviews und
Hintergrundberichte aus der Welt der Volksmusik und des Schlagers. Hintergrundberichte aus der Welt der Volksmusik und des Schlagers.
</p> </p>
<div className="flex gap-3">
{SOCIAL_LINKS.map((s) => (
<a
key={s.label}
href={s.href}
target="_blank"
rel="noopener noreferrer"
className="text-muted-foreground hover:text-primary transition-colors"
aria-label={s.label}
data-testid={s.testId}
>
<s.icon className="w-5 h-5" />
</a>
))}
</div>
</div> </div>
<div> <div>
<h4 className="font-semibold text-card-foreground mb-3">Kategorien</h4> <h4 className="font-semibold text-card-foreground mb-3">Kategorien</h4>
@ -43,19 +66,22 @@ export default function Footer() {
</ul> </ul>
</div> </div>
<div> <div>
<h4 className="font-semibold text-card-foreground mb-3">Links</h4> <h4 className="font-semibold text-card-foreground mb-3">Folgt uns</h4>
<ul className="space-y-2 text-sm"> <ul className="space-y-2 text-sm">
<li> {SOCIAL_LINKS.map((s) => (
<a <li key={s.label}>
href="https://folx.tv" <a
target="_blank" href={s.href}
rel="noopener noreferrer" target="_blank"
className="text-muted-foreground hover:text-primary transition-colors" rel="noopener noreferrer"
data-testid="link-footer-folxtv" className="text-muted-foreground hover:text-primary transition-colors inline-flex items-center gap-2"
> data-testid={`link-footer-${s.label.toLowerCase()}`}
folx.tv >
</a> <s.icon className="w-4 h-4" />
</li> {s.label}
</a>
</li>
))}
</ul> </ul>
</div> </div>
</div> </div>