Organize TV reception information by country and streaming options
Restructure the `empfang.tsx` page to display TV reception providers categorized by country (Germany, Austria, Switzerland) and include an "Online" section for livestream information. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 41aa54be-8093-4573-98cd-d8a5afad4e24 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/EtK2Sno Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic
parent
13572c5ca8
commit
ebd2591643
@ -1,12 +1,34 @@
|
|||||||
import { Tv, Radio } from "lucide-react";
|
import { Tv, Globe, MapPin } from "lucide-react";
|
||||||
import Header from "@/components/header";
|
import Header from "@/components/header";
|
||||||
import Footer from "@/components/footer";
|
import Footer from "@/components/footer";
|
||||||
|
|
||||||
const PROVIDERS = [
|
const COUNTRIES = [
|
||||||
{ name: "O2", url: "https://www.o2online.de/tv/" },
|
{
|
||||||
{ name: "Magenta", url: "https://www.telekom.de/magenta-tv" },
|
country: "Deutschland",
|
||||||
{ name: "Zattoo", url: "https://zattoo.com/" },
|
flag: "DE",
|
||||||
{ name: "Swisscom", url: "https://www.swisscom.ch/tv" },
|
providers: [
|
||||||
|
{ name: "MagentaTV", detail: "Telekom Deutschland" },
|
||||||
|
{ name: "Zattoo", detail: null },
|
||||||
|
{ name: "O2 TV", detail: null },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
country: "Österreich",
|
||||||
|
flag: "AT",
|
||||||
|
providers: [
|
||||||
|
{ name: "A1 Xplore TV", detail: null },
|
||||||
|
{ name: "Salzburg AG CableLink", detail: null },
|
||||||
|
{ name: "Zattoo", detail: null },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
country: "Schweiz",
|
||||||
|
flag: "CH",
|
||||||
|
providers: [
|
||||||
|
{ name: "Swisscom blue TV", detail: null },
|
||||||
|
{ name: "Zattoo", detail: null },
|
||||||
|
],
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export default function EmpfangPage() {
|
export default function EmpfangPage() {
|
||||||
@ -14,50 +36,67 @@ export default function EmpfangPage() {
|
|||||||
<div className="min-h-screen bg-background">
|
<div className="min-h-screen bg-background">
|
||||||
<Header />
|
<Header />
|
||||||
<main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
<main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||||
<h1 className="text-3xl font-bold text-foreground mb-2" data-testid="text-empfang-title">
|
<div className="flex items-center gap-3 mb-2">
|
||||||
Empfang Folx TV
|
<Tv className="w-7 h-7 text-primary" />
|
||||||
</h1>
|
<h1 className="text-3xl font-bold text-foreground" data-testid="text-empfang-title">
|
||||||
|
Empfang von FOLX TV
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
<p className="text-muted-foreground mb-8" data-testid="text-empfang-subtitle">
|
<p className="text-muted-foreground mb-8" data-testid="text-empfang-subtitle">
|
||||||
So empfangen Sie Folx Music Television
|
So empfangen Sie Folx Music Television in Ihrem Land
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<section className="mb-10" data-testid="section-iptv">
|
<div className="space-y-6 mb-10">
|
||||||
<div className="flex items-center gap-3 mb-4">
|
{COUNTRIES.map((c) => (
|
||||||
<div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
|
<section
|
||||||
<Tv className="w-5 h-5 text-primary" />
|
key={c.country}
|
||||||
</div>
|
className="bg-card rounded-lg border border-card-border overflow-hidden"
|
||||||
<h2 className="text-xl font-bold text-foreground">IPTV & Streaming</h2>
|
data-testid={`section-country-${c.flag.toLowerCase()}`}
|
||||||
</div>
|
>
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
<div className="flex items-center gap-3 px-5 py-4 border-b border-card-border bg-muted/20">
|
||||||
{PROVIDERS.map((provider) => (
|
<MapPin className="w-4 h-4 text-primary" />
|
||||||
<a
|
<h2 className="text-lg font-bold text-card-foreground">{c.country}</h2>
|
||||||
key={provider.name}
|
</div>
|
||||||
href={provider.url}
|
<div className="px-5 py-4">
|
||||||
target="_blank"
|
<div className="flex flex-wrap items-center gap-x-2 gap-y-1">
|
||||||
rel="noopener noreferrer"
|
{c.providers.map((p, i) => (
|
||||||
className="bg-card rounded-lg border border-card-border p-5 hover:border-primary/50 transition-colors group"
|
<span key={p.name} className="flex items-center gap-x-2">
|
||||||
data-testid={`link-provider-${provider.name.toLowerCase()}`}
|
<span className="text-card-foreground font-medium" data-testid={`text-provider-${p.name.toLowerCase().replace(/\s+/g, "-")}`}>
|
||||||
>
|
{p.name}
|
||||||
<h3 className="font-semibold text-card-foreground group-hover:text-primary transition-colors">
|
{p.detail && (
|
||||||
{provider.name}
|
<span className="text-muted-foreground font-normal text-sm ml-1">
|
||||||
</h3>
|
({p.detail})
|
||||||
</a>
|
</span>
|
||||||
))}
|
)}
|
||||||
</div>
|
</span>
|
||||||
</section>
|
{i < c.providers.length - 1 && (
|
||||||
|
<span className="text-muted-foreground/40 select-none" aria-hidden="true">·</span>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
<section data-testid="section-info">
|
<section className="bg-card rounded-lg border border-card-border overflow-hidden" data-testid="section-online">
|
||||||
<div className="flex items-center gap-3 mb-4">
|
<div className="flex items-center gap-3 px-5 py-4 border-b border-card-border bg-muted/20">
|
||||||
<div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
|
<Globe className="w-4 h-4 text-primary" />
|
||||||
<Radio className="w-5 h-5 text-primary" />
|
<h2 className="text-lg font-bold text-card-foreground">Online</h2>
|
||||||
</div>
|
|
||||||
<h2 className="text-xl font-bold text-foreground">Weitere Informationen</h2>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="bg-card rounded-lg border border-card-border p-6">
|
<div className="px-5 py-4">
|
||||||
<p className="text-muted-foreground text-sm leading-relaxed">
|
<p className="text-muted-foreground text-sm leading-relaxed">
|
||||||
Folx Music Television ist über verschiedene IPTV- und Streaming-Anbieter
|
FOLX TV kann auch über den offiziellen Livestream im Internet empfangen werden.
|
||||||
verfügbar. Bei Fragen zum Empfang wenden Sie sich bitte an Ihren
|
Besuchen Sie{" "}
|
||||||
jeweiligen TV-Anbieter.
|
<a
|
||||||
|
href="https://www.folx.tv"
|
||||||
|
className="text-primary hover:underline font-medium"
|
||||||
|
data-testid="link-livestream"
|
||||||
|
>
|
||||||
|
www.folx.tv
|
||||||
|
</a>{" "}
|
||||||
|
für den direkten Zugang.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user