feat(ui): Adressen, Retoure, Suche und Cookie-Hinweis

- Adressen im Zweierraster, Standardadresse mit Honigrahmen und Wabenmarke,
  neues Adressformular in der Formular-Karte
- Retoure: Positionen als Liste mit Waben, Formular in der Karte
- Suche: Vorschlaege gleiten gestaffelt herein, Suchbegriff hervorgehoben,
  Lupe wird zum Schliessen-Symbol; das Feld legt sich ueber die Navigation
  statt sie zu verschieben (vorher: waagerechter Scrollbalken)
- Cookie-Hinweis als schwebende Karte; "Nur notwendige" und "Alle
  akzeptieren" gleich gewichtet (vorher war Akzeptieren Waldgruen auf
  Waldgruen und kaum als Knopf erkennbar)

Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>
This commit is contained in:
Nick SzaunigandClaude Opus 5.5 committed 2026-09-25 13:24:07 +02:00
1 parent baebf78ee4
commit d4bb6ec1cf
4 files changed
+125 -48

No files matched your search

+20 -12
View File
@@ -1,7 +1,8 @@
import type { Metadata } from "next";
import type { HTMLAttributes } from "react";
import { redirect } from "next/navigation";
import { Container, SectionHeading, Button } from "@/components/ui";
import { Container, SectionHeading, Button, FormPanel } from "@/components/ui";
import { HexMark } from "@/components/honeycomb";
import { BackLink } from "@/components/back-link";
import { AccountEmptyState, AddressIcon } from "@/components/account-ui";
import { getCurrentCustomer } from "@/lib/auth";
@@ -27,21 +28,28 @@ export default async function KontoAdressenPage() {
<SectionHeading eyebrow={t.account.eyebrow} title={t.addressesPage.title} />
<div className="mt-10 space-y-4">
<div className="mt-10 grid gap-4 sm:grid-cols-2">
{addresses.map((address) => (
<div
key={address.id}
className="border border-ink/10 p-6 flex justify-between gap-4 transition-colors hover:border-ink/25"
className={`relative flex flex-col justify-between gap-6 border p-6 transition-[border-color,box-shadow] duration-500 ease-[var(--ease-arrive)] ${
address.isDefault
? "border-honey/60 bg-honey/[0.05] shadow-[0_18px_34px_-26px_rgba(184,138,68,0.5)]"
: "border-ink/10 hover:border-forest/40"
}`}
>
{address.isDefault ? (
<span className="absolute right-4 top-4 inline-flex items-center gap-1.5 text-[11px] tracking-wide-caps text-honey-dark">
<HexMark className="h-2.5 w-2.5" />
{t.addressesPage.standard}
</span>
) : null}
<div className="flex gap-4">
<span className="flex-shrink-0 flex items-center justify-center w-11 h-11 border border-ink/15 text-forest">
<AddressIcon />
</span>
<div>
<p className="text-forest">
{address.label}{" "}
{address.isDefault ? <span className="text-honey-dark text-xs">· {t.addressesPage.standard}</span> : null}
</p>
<p className="font-serif text-xl text-forest">{address.label}</p>
<p className="text-sm text-ink/70 mt-1">
{address.firstName} {address.lastName}
<br />
@@ -51,7 +59,7 @@ export default async function KontoAdressenPage() {
</p>
</div>
</div>
<div className="flex flex-col items-end gap-2 text-sm flex-shrink-0">
<div className="flex items-center gap-5 border-t border-ink/10 pt-4 text-sm">
{!address.isDefault ? (
<form action={setDefaultAddressAction}>
<input type="hidden" name="addressId" value={address.id} />
@@ -78,9 +86,9 @@ export default async function KontoAdressenPage() {
) : null}
</div>
<div className="mt-14 border-t border-ink/10 pt-10">
<h2 className="text-lg text-forest mb-6">{t.addressesPage.addNewHeading}</h2>
<form action={addAddressAction} className="space-y-4 max-w-md">
<FormPanel className="mt-14 max-w-xl">
<h2 className="text-2xl text-forest mb-6">{t.addressesPage.addNewHeading}</h2>
<form action={addAddressAction} className="space-y-4">
<Field
name="label"
label={t.addressesPage.labelField}
@@ -109,7 +117,7 @@ export default async function KontoAdressenPage() {
</label>
<Button type="submit">{t.addressesPage.save}</Button>
</form>
</div>
</FormPanel>
</Container>
</div>
);