announcement-1

1"use client";
2 
3import { ArrowRight, X } from "lucide-react";
4import { AnimatePresence, motion } from "motion/react";
5import * as React from "react";
6 
7export const Announcement = () => {
8  const [isVisible, setIsVisible] = React.useState(true);
9 
10  const handleClose = React.useCallback(() => {
11    setIsVisible(false);
12  }, []);
13 
14  const handleKeyDown = React.useCallback(
15    (e: React.KeyboardEvent) => {
16      if (e.key === "Enter" || e.key === " ") {
17        handleClose();
18      }
19    },
20    [handleClose]
21  );
22 
23  if (!isVisible) {
24    return null;
25  }
26 
27  return (
28    <AnimatePresence>
29      {isVisible && (
30        <motion.div
31          animate={{ height: "auto", opacity: 1 }}
32          className="relative w-full overflow-hidden border-border border-b bg-foreground text-background"
33          exit={{ height: 0, opacity: 0 }}
34          initial={{ height: 0, opacity: 0 }}
35          transition={{ duration: 0.3, ease: "easeInOut" }}
36        >
37          <div className="container mx-auto flex h-10 items-center justify-between px-4 sm:px-6">
38            <div className="flex flex-1 items-center justify-center gap-x-3 text-center font-medium text-[13px] leading-none tracking-tight">
39              <span className="hidden items-center rounded-full bg-background/20 px-2 py-0.5 text-[10px] text-background uppercase tracking-wider ring-1 ring-background/30 ring-inset sm:inline-flex">
40                New
41              </span>
42              <p className="flex items-center gap-1.5 opacity-90 transition-opacity hover:opacity-100">
43                <span>Unlock premium components with Freddy UI Pro.</span>
44                <a
45                  className="group inline-flex items-center font-bold text-primary-foreground hover:underline"
46                  href="#"
47                >
48                  Get Started
49                  <ArrowRight className="ml-1 h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
50                </a>
51              </p>
52            </div>
53 
54            <button
55              aria-label="Close announcement"
56              className="ml-auto inline-flex items-center justify-center rounded-md p-1 opacity-50 transition-all hover:bg-background/10 hover:opacity-100 focus:outline-hidden"
57              onClick={handleClose}
58              onKeyDown={handleKeyDown}
59              type="button"
60            >
61              <X className="h-3.5 w-3.5" />
62            </button>
63          </div>
64 
65          {/* Decorative gradient blur */}
66// … truncated