From 12812f47f0f31d02b29fdeffa7ff595cdbeacfd1 Mon Sep 17 00:00:00 2001
From: Mystery <chibueze8141@gmail.com>
Date: Tue, 16 Jun 2026 15:50:34 +0000
Subject: [PATCH] feat: add DateGroupHeader UI component

Introduces a reusable DateGroupHeader component for grouping lists of
items (e.g. transactions) under date labels with a visual divider.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 p2p-safe-swap/app/page.tsx                         | 11 +++++++++++
 .../frontend/components/ui/date-group-header.tsx   | 14 ++++++++++++++
 2 files changed, 25 insertions(+)
 create mode 100644 p2p-safe-swap/frontend/components/ui/date-group-header.tsx

diff --git a/p2p-safe-swap/app/page.tsx b/p2p-safe-swap/app/page.tsx
index 3f36f7c..c84d120 100644
--- a/p2p-safe-swap/app/page.tsx
+++ b/p2p-safe-swap/app/page.tsx
@@ -1,9 +1,20 @@
 import Image from "next/image";
+import { DateGroupHeader } from "@/frontend/components/ui/date-group-header";
 
 export default function Home() {
   return (
     <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
       <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
+        {/* DateGroupHeader verification */}
+        <div className="w-full mb-8 border rounded-lg overflow-hidden">
+          <DateGroupHeader label="TODAY" />
+          <div className="px-4 py-3 text-sm text-zinc-600">Transaction A · $50.00</div>
+          <div className="px-4 py-3 text-sm text-zinc-600">Transaction B · $20.00</div>
+          <DateGroupHeader label="YESTERDAY" />
+          <div className="px-4 py-3 text-sm text-zinc-600">Transaction C · $75.00</div>
+          <DateGroupHeader label="JUNE" />
+          <div className="px-4 py-3 text-sm text-zinc-600">Transaction D · $10.00</div>
+        </div>
         <Image
           className="dark:invert"
           src="/next.svg"
diff --git a/p2p-safe-swap/frontend/components/ui/date-group-header.tsx b/p2p-safe-swap/frontend/components/ui/date-group-header.tsx
new file mode 100644
index 0000000..8123fe7
--- /dev/null
+++ b/p2p-safe-swap/frontend/components/ui/date-group-header.tsx
@@ -0,0 +1,14 @@
+interface DateGroupHeaderProps {
+  label: string;
+}
+
+export function DateGroupHeader({ label }: DateGroupHeaderProps) {
+  return (
+    <div className="flex items-center gap-3 px-4 py-2">
+      <span className="text-xs font-semibold uppercase tracking-widest text-muted-foreground">
+        {label}
+      </span>
+      <div className="h-px flex-1 bg-border" />
+    </div>
+  );
+}