Date Separator

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5import "@/components/ui/whatsapp/styles/whatsapp.css";
6 
7interface DateSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
8  label: string;
9}
10 
11const DateSeparator = React.forwardRef<HTMLDivElement, DateSeparatorProps>(
12  ({ className, label, ...props }, ref) => {
13    return (
14      <div
15        ref={ref}
16        className={cn("flex items-center justify-center py-2", className)}
17        {...props}
18      >
19        <span className="font-wa rounded-full bg-wa-bg px-3 py-1 text-[12.5px] leading-[20px] text-wa-text-secondary shadow-sm">
20          {label}
21        </span>
22      </div>
23    );
24  }
25);
26DateSeparator.displayName = "DateSeparator";
27 
28export { DateSeparator, type DateSeparatorProps };