TimezoneText.ts

TimezoneText.ts

'use client';

import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { useState } from 'react';

export const TimezoneText = () => {
  const localTime = new Date().toLocaleString('en-US', {
    timeZone: 'Asia/Tbilisi',
    hour: '2-digit',
    minute: '2-digit',
    hour12: false,
  });
  const [open, setOpen] = useState(false);

  return (
    <>
      <Tooltip open={open} onOpenChange={setOpen}>
        <TooltipTrigger asChild>
          <span
            className="text-muted-foreground/45 cursor-default"
            onClick={() => {
              setOpen(true);
              setTimeout(() => {
                setOpen(false);
              }, 2000);
            }}
          >
            (
            <span className="underline underline-offset-4 decoration-muted-foreground/30">
              GMT+4
            </span>
            )
          </span>
        </TooltipTrigger>
        <TooltipContent
          onEscapeKeyDown={() => setOpen(false)}
          onPointerDownOutside={() => setOpen(false)}
          className="p-1 px-2.5"
        >
          <p className=" text-base">
            Time: <span className="">{localTime}</span>
          </p>
        </TooltipContent>
      </Tooltip>
    </>
  );
};