Media Between Text Vertical Demo

1import { useRef, useState } from "react"
2 
3import useScreenSize from "@/hooks/use-screen-size"
4import { Button } from "@/components/ui/button"
5import MediaBetweenText, {
6  MediaBetweenTextRef,
7} from "@/components/fancy/blocks/media-between-text"
8 
9export default function Preview() {
10  const ref = useRef<MediaBetweenTextRef>(null)
11  const [isOpen, setIsOpen] = useState(false)
12  const screenSize = useScreenSize()
13 
14  return (
15    <div className="w-dvw h-dvh flex flex-col items-center justify-center bg-background">
16      <Button
17        onClick={() => {
18          setIsOpen(!isOpen)
19          if (!isOpen) {
20            ref.current?.animate()
21          } else {
22            ref.current?.reset()
23          }
24        }}
25        size={"sm"}
26        variant={"outline"}
27        className="absolute top-4 left-4 h-8"
28      >
29        {isOpen ? "Close" : "Open"}
30      </Button>
31 
32      <MediaBetweenText
33        firstText="Artificial "
34        secondText="Intelligence"
35        mediaUrl={
36          "https://cdn.cosmos.so/47c0223f-c704-4d5a-8b47-c48262ebe301?format=jpeg"
37        }
38        mediaType="image"
39        triggerType="ref"
40        ref={ref}
41        mediaContainerClassName="w-full h-[60px] sm:h-[100px] overflow-hidden pt-1"
42        className="cursor-pointer text-3xl sm:text-7xl font-calendas flex flex-col font-light items-center justify-center"
43        leftTextClassName=""
44        rightTextClassName="italic"
45        animationVariants={{
46          initial: {
47            width: screenSize.lessThan("sm") ? "160px" : "280px",
48            height: 0,
49            transition: { duration: 0.7, ease: [0.944, 0.008, 0.147, 1.002] },
50          },
51          animate: {
52            width: screenSize.lessThan("sm") ? "200px" : "330px",
53            height: screenSize.lessThan("sm") ? "200px" : "300px",
54            transition: { duration: 0.7, ease: [0.944, 0.008, 0.147, 1.002] },
55          },
56        }}
57      />
58    </div>
59  )
60}