Untitled

"use client"

import { useState } from "react"
import { X } from "lucide-react"

export default function AnnouncementBar() {
  const [show, setShow] = useState(true)

  function setHideBanner() {
    setShow(false)
  }

  return (
    <div>
      {show ? (
        <div className="border-b p-2">
          <div className="flex items-center">
            <div className="shrink grow basis-auto">
              <a href="https://bit.ly/47Fs5TT" target="_blank" rel="noopener noreferrer">
                <p className="text-center text-sm font-bold">
                  🚀 Góp ý về phiên bản thichtienganh mới <span className="underline">tại đây</span>
                </p>
              </a>
            </div>
            {show && (
              <div className="cursor-pointer" onClickCapture={() => setHideBanner()}>
                <X />
              </div>
            )}
          </div>
        </div>
      ) : null}
    </div>
  )
}