feat: ✨ move to old variant

by Sivritkin Dmitriy

1@@ -64,7 +64,9 @@ export default function CommitModal({
2           ) : (
3             <>
4               <DialogHeader>
5-                <DialogTitle>{convertEmoji(commit.commit.message)}</DialogTitle>
6+                <DialogTitle>
7+                  {convertEmoji(commit!.commit.message)}
8+                </DialogTitle>
9                 <DialogDescription>
10                   by {commit?.commit.author?.name}
11                 </DialogDescription>@@ -6,7 +6,6 @@ import Link from "next/link";
12 import { Avatar, AvatarImage } from "~/shared/ui/avatar";
13 import { convertEmoji } from "~/shared/lib/convert-emoji";
14 import { RefreshButton } from "~/app/refresh-form";
15-import { Time } from "~/app/time";
16 
17 dayjs.extend(relativeTime);
18 
19@@ -22,7 +21,6 @@ export default async function Home() {
20         <span className="text-blue-700">There are</span> {data.data.length}{" "}
21         commits!
22       </h1>
23-      {dayjs().toString()}
24       <RefreshButton />
25       <div className="mt-10">
26         {data.data.map((commit) => (
27@@ -43,7 +41,7 @@ export default async function Home() {
28                   <span className="text-lg">{commit.commit.author?.name}</span>
29                 </div>
30                 <p className="text-lg">
31-                  <Time date={commit.commit.committer?.date} />
32+                  {dayjs(commit.commit.committer?.date).fromNow()}
33                 </p>
34               </div>
35             </Card>@@ -1,22 +0,0 @@
36-"use client";
37-
38-import { useEffect, useState } from "react";
39-import dayjs from "dayjs";
40-import relativeTime from "dayjs/plugin/relativeTime";
41-
42-dayjs.extend(relativeTime);
43-
44-export const Time = ({ date }: { date: string }) => {
45-  const [relativeTime, setRelativeTime] = useState(dayjs(date).fromNow());
46-
47-  useEffect(() => {
48-    const intervalId = setInterval(() => {
49-      setRelativeTime(dayjs(date).fromNow());
50-    }, 6000);
51-    // }, 60000);
52-
53-    return () => clearInterval(intervalId);
54-  }, []);
55-
56-  return <p>{relativeTime}</p>;
57-};@@ -6,7 +6,7 @@ import { GitGraphIcon } from "lucide-react";
58 
59 export const Header = () => {
60   return (
61-    <header className="sticky top-0 z-50 h-16 border-b bg-background px-4 md:px-6">
62+    <header className="sticky top-0 z-50 h-16 border-b bg-background/60 px-4 backdrop-blur md:px-6">
63       <div className="container flex h-full items-center justify-between gap-4">
64         <nav className="flex flex-row items-center gap-6 text-lg text-xs font-medium md:gap-5 md:text-sm lg:gap-6">
65           <Link