personal website (jaspermayone.com)
jaspermayone.com
1"use client";
2
3import * as TooltipPrimitive from "@radix-ui/react-tooltip";
4import { formatDistanceToNow } from "date-fns";
5
6interface CommitHashProps {
7 color?: string;
8}
9
10export default function CommitHash({ color }: CommitHashProps) {
11 const commitDate = new Date(process.env.COMMIT_DATE!);
12 const formattedCommitDate = formatDistanceToNow(commitDate, {
13 addSuffix: true,
14 });
15
16 const textColor = color || "#4a5565";
17 const linkColor = color === "#ffffff" ? "#61b8ff" : "#56ba8e";
18
19 return (
20 <div>
21 <span className="hidden text-xs sm:block" style={{ color: textColor }}>
22 <TooltipPrimitive.Provider>
23 <TooltipPrimitive.Root>
24 <TooltipPrimitive.Trigger asChild>
25 <a
26 className="hover:text-blur underline decoration-wavy transition-colors duration-300"
27 style={{
28 color: linkColor,
29 textDecorationColor: linkColor,
30 }}
31 href={`https://github.com/jaspermayone/website/tree/${process.env.COMMIT_HASH}?utm_source=jaspermayone.com&utm_medium=referral`}
32 >
33 {process.env.COMMIT_HASH}
34 </a>
35 </TooltipPrimitive.Trigger>
36 <TooltipPrimitive.Portal>
37 <TooltipPrimitive.Content
38 className="z-50 rounded-xl border border-slate-200 bg-white p-3 font-mono text-sm text-slate-800 shadow-xl backdrop-blur-sm dark:border-slate-600 dark:bg-slate-800 dark:text-slate-200"
39 sideOffset={5}
40 >
41 {process.env.FULL_COMMIT_HASH}
42 <TooltipPrimitive.Arrow className="fill-white dark:fill-slate-800" />
43 </TooltipPrimitive.Content>
44 </TooltipPrimitive.Portal>
45 </TooltipPrimitive.Root>
46 </TooltipPrimitive.Provider>
47 from {formattedCommitDate}.
48 </span>
49 </div>
50 );
51}