Rearrange header clock to display time vertically below date and weekday
Update the header clock component to a vertical layout, displaying weekday, date, and then time.
This commit is contained in:
@@ -799,23 +799,18 @@ function HeaderClock({ lang, date }: { lang: "ar" | "en"; date: string }) {
|
||||
});
|
||||
return (
|
||||
<div
|
||||
className="flex items-center gap-1.5 sm:gap-3 print:hidden"
|
||||
className="flex flex-col items-end leading-tight print:hidden"
|
||||
data-testid="em-header-clock"
|
||||
aria-live="off"
|
||||
>
|
||||
<div
|
||||
className="text-[#0B1E3F] font-semibold text-sm sm:text-base tabular-nums"
|
||||
data-testid="em-header-time"
|
||||
>
|
||||
{time}
|
||||
<div className="text-[#0B1E3F] font-semibold text-sm sm:text-base" data-testid="em-header-weekday">
|
||||
{formatWeekday(date, lang, "long")}
|
||||
</div>
|
||||
<div className="leading-tight">
|
||||
<div className="text-[#0B1E3F] font-semibold text-sm sm:text-base" data-testid="em-header-weekday">
|
||||
{formatWeekday(date, lang, "long")}
|
||||
</div>
|
||||
<div className="text-xs sm:text-sm text-muted-foreground tabular-nums" data-testid="em-header-date">
|
||||
{formatDate(date, lang)}
|
||||
</div>
|
||||
<div className="text-xs sm:text-sm text-muted-foreground tabular-nums" data-testid="em-header-date">
|
||||
{formatDate(date, lang)}
|
||||
</div>
|
||||
<div className="text-xs sm:text-sm text-[#0B1E3F] font-semibold tabular-nums" data-testid="em-header-time">
|
||||
{time}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user