Announcement

1'use client';
2import React, { useState, useRef, useEffect, useCallback } from 'react';
3import { createPortal } from 'react-dom';
4import type { ComponentProps, HTMLAttributes, ReactNode } from 'react';
5import { Badge } from '@/components/ui/badge';
6import { cn } from '@/lib/utils';
7import {
8  motion,
9  AnimatePresence,
10  useAnimationFrame,
11  useMotionTemplate,
12  useMotionValue,
13  useTransform,
14} from 'motion/react';
15import { ChevronDown } from 'lucide-react';
16import LustreText from '@/components/ui/lustretext';
17 
18const EXPANDABLE_CONTENT_SYMBOL = Symbol.for('AnnouncementExpandedContent');
19 
20const MovingBorder = ({
21  children,
22  duration = 3000,
23  rx,
24  ry,
25  ...otherProps
26}: {
27  children: React.ReactNode;
28  duration?: number;
29  rx?: string;
30  ry?: string;
31} & React.SVGProps<SVGSVGElement>) => {
32  const pathRef = useRef<SVGRectElement | null>(null);
33  const progress = useMotionValue(0);
34 
35  useAnimationFrame((time) => {
36    const length = pathRef.current?.getTotalLength?.();
37    if (length) {
38      const pxPerMillisecond = length / duration;
39      progress.set((time * pxPerMillisecond) % length);
40    }
41  });
42 
43  const x = useTransform(
44    progress,
45    (val) => pathRef.current?.getPointAtLength(val).x ?? 0,
46  );
47  const y = useTransform(
48    progress,
49    (val) => pathRef.current?.getPointAtLength(val).y ?? 0,
50  );
51  const transform = useMotionTemplate`translateX(${x}px) translateY(${y}px) translateX(-50%) translateY(-50%)`;
52 
53  return (
54    <>
55      <svg
56        xmlns='http://www.w3.org/2000/svg'
57        preserveAspectRatio='none'
58        className='absolute h-full w-full'
59        width='100%'
60        height='100%'
61        {...otherProps}
62      >
63        <rect
64          fill='none'
65          width='100%'
66          height='100%'
67          rx={rx}
68          ry={ry}
69          ref={pathRef}
70        />
71      </svg>
72      <motion.div
73        style={{
74          position: 'absolute',
75          top: 0,
76          left: 0,
77          display: 'inline-block',
78          transform,
79        }}
80      >
81        {children}
82      </motion.div>
83    </>
84  );
85};
86 
87export type AnnouncementProps = Omit<ComponentProps<typeof Badge>, 'ref'> & {
88  styled?: boolean;
89  animation?: 'fade';
90  icon?: ReactNode;
91  iconPosition?: 'left' | 'right';
92  shiny?: boolean;
93  movingBorder?: boolean;
94  movingBorderDuration?: number;
95  movingBorderClassName?: string;
96};
97 
98function AnnouncementComponent({
99  variant = 'outline',
100  styled = false,
101  animation = 'fade',
102  icon,
103  iconPosition = 'left',
104// … truncated