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

Update blog layout and fix horoscope navigation

Browse Source 
Adjust article display on the homepage to show more content and modify the horoscope widget to navigate to a dedicated page instead of a modal.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 413891e8-d784-4bea-b9f5-91a5a68316b4
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: c8cadc1b-5524-4725-abba-7f1558b33894
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/413891e8-d784-4bea-b9f5-91a5a68316b4/RVXhOPb
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic
2026-02-28 19:27:16 +00:00
parent 0918ffd291
commit 102c6f0046
3 changed files with 40 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/horoscope-widget.tsx
+28 -32
View File
@@ -1,6 +1,6 @@
import { useState, useEffect, useCallback } from "react";
import { useLocation } from "wouter";
import { Star, ChevronLeft, ChevronRight, X } from "lucide-react";
import { Star } from "lucide-react";
const SIGNS = [
{ name: "Widder", symbol: "♈", date: "21.03 – 19.04", element: "Feuer" },
@@ -90,7 +90,7 @@ function HoroscopeModal({ onClose, initialSign }: { onClose: () => void; initial
}
export function HoroscopeWidget() {
const [showModal, setShowModal] = useState(false);
const [, navigate] = useLocation();
const [index, setIndex] = useState(0);
const [paused, setPaused] = useState(false);
@@ -105,37 +105,33 @@ export function HoroscopeWidget() {
const sign = SIGNS[index];
return (
<>
<div
className="bg-card rounded-lg border border-card-border overflow-hidden h-full w-full cursor-pointer group hover:border-primary/50 transition-colors flex flex-col"
onMouseEnter={() => setPaused(true)}
onMouseLeave={() => setPaused(false)}
onClick={() => setShowModal(true)}
data-testid="widget-horoscope"
>
<div className="p-3 flex items-center gap-2 border-b border-card-border flex-shrink-0">
<Star className="w-4 h-4 text-primary" />
<h3 className="font-bold text-card-foreground text-sm">Horoskop</h3>
</div>
<div className="p-5 flex-1 flex flex-col justify-center items-center text-center">
<span className="text-7xl mb-4 transition-all duration-500 block">{sign.symbol}</span>
<p className="font-bold text-card-foreground text-lg">{sign.name}</p>
<p className="text-xs text-muted-foreground mt-1">{sign.date}</p>
<p className="text-sm text-muted-foreground mt-4 leading-relaxed">{getDailyText(index)}</p>
<div className="flex justify-center gap-1 mt-5">
{SIGNS.map((_, i) => (
<button
key={i}
onClick={(e) => { e.stopPropagation(); setIndex(i); }}
className={`w-1.5 h-1.5 rounded-full transition-all ${i === index ? "bg-primary w-3" : "bg-muted-foreground/30 hover:bg-muted-foreground/50"}`}
data-testid={`button-horoscope-dot-${i}`}
/>
))}
</div>
<div
className="bg-card rounded-lg border border-card-border overflow-hidden h-full w-full cursor-pointer group hover:border-primary/50 transition-colors flex flex-col"
onMouseEnter={() => setPaused(true)}
onMouseLeave={() => setPaused(false)}
onClick={() => navigate("/horoskop")}
data-testid="widget-horoscope"
>
<div className="p-3 flex items-center gap-2 border-b border-card-border flex-shrink-0">
<Star className="w-4 h-4 text-primary" />
<h3 className="font-bold text-card-foreground text-sm">Horoskop</h3>
</div>
<div className="p-5 flex-1 flex flex-col justify-center items-center text-center">
<span className="text-7xl mb-4 transition-all duration-500 block">{sign.symbol}</span>
<p className="font-bold text-card-foreground text-lg">{sign.name}</p>
<p className="text-xs text-muted-foreground mt-1">{sign.date}</p>
<p className="text-sm text-muted-foreground mt-4 leading-relaxed">{getDailyText(index)}</p>
<div className="flex justify-center gap-1 mt-5">
{SIGNS.map((_, i) => (
<button
key={i}
onClick={(e) => { e.stopPropagation(); setIndex(i); }}
className={`w-1.5 h-1.5 rounded-full transition-all ${i === index ? "bg-primary w-3" : "bg-muted-foreground/30 hover:bg-muted-foreground/50"}`}
data-testid={`button-horoscope-dot-${i}`}
/>
))}
</div>
</div>
{showModal && <HoroscopeModal initialSign={index} onClose={() => setShowModal(false)} />}
</>
</div>
);
}