diff --git a/src/client/features/home/components/home-page.tsx b/src/client/features/home/components/home-page.tsx
index 87a4037..29419e3 100644
--- a/src/client/features/home/components/home-page.tsx
+++ b/src/client/features/home/components/home-page.tsx
@@ -1,10 +1,15 @@
+import { UpcomingVotes } from "./upcoming-votes"
+
export function HomePage() {
return (
-
-
Willkommen
-
- Verfolge Abstimmungen im Bundestag und deinem Landtag.
-
+
+
+
Willkommen
+
+ Verfolge Abstimmungen im Bundestag und deinem Landtag.
+
+
+
)
}
diff --git a/src/client/features/home/components/upcoming-votes.tsx b/src/client/features/home/components/upcoming-votes.tsx
new file mode 100644
index 0000000..b755b32
--- /dev/null
+++ b/src/client/features/home/components/upcoming-votes.tsx
@@ -0,0 +1,89 @@
+import { useFollows } from "@/shared/hooks/use-follows"
+import { BACKEND_URL } from "@/shared/lib/constants"
+import { Link } from "@tanstack/react-router"
+import { useEffect, useState } from "react"
+
+interface UpcomingLegislation {
+ id: number
+ title: string
+ beratungsstand: string | null
+ summary: string | null
+}
+
+export function UpcomingVotes() {
+ const { follows } = useFollows()
+ const [items, setItems] = useState
([])
+ const [loading, setLoading] = useState(true)
+
+ const hasTopics = follows.some((f) => f.type === "topic")
+
+ useEffect(() => {
+ if (!hasTopics) {
+ setLoading(false)
+ return
+ }
+
+ fetch(`${BACKEND_URL}/legislation/upcoming`)
+ .then((r) => (r.ok ? r.json() : []))
+ .then((data) => setItems(data))
+ .catch(() => setItems([]))
+ .finally(() => setLoading(false))
+ }, [hasTopics])
+
+ if (!hasTopics) {
+ return (
+
+
Anstehende Abstimmungen
+
+ Folge Themen, um anstehende Abstimmungen zu sehen.
+
+
+ )
+ }
+
+ if (loading) {
+ return (
+
+
Anstehende Abstimmungen
+
Laden…
+
+ )
+ }
+
+ if (items.length === 0) {
+ return (
+
+
Anstehende Abstimmungen
+
+ Keine anstehenden Abstimmungen zu deinen Themen.
+
+
+ )
+ }
+
+ return (
+
+
Anstehende Abstimmungen
+
+ {items.map((item) => (
+
+
{item.title}
+ {item.summary && (
+
+ {item.summary}
+
+ )}
+
+ Jetzt abstimmen →
+
+
+ ))}
+
+
+ )
+}