Media Between Text Demo

1import useScreenSize from "@/hooks/use-screen-size"
2import MediaBetweenText from "@/components/fancy/blocks/media-between-text"
3 
4export default function Preview() {
5  const screenSize = useScreenSize()
6 
7  return (
8    <div className="w-dvw h-dvh flex flex-col items-center justify-center bg-background">
9      <a
10        href="https://www.instagram.com/p/C3oL4euoc2l/?img_index=1"
11        target="_blank"
12        rel="noreferrer"
13      >
14        <MediaBetweenText
15          firstText="that's a nice ("
16          secondText=") chair!"
17          mediaUrl={
18            "https://cdn.cosmos.so/90e2192e-7bd4-44af-96ae-05cd955c0cfb?format=jpeg"
19          }
20          mediaType="image"
21          triggerType="hover"
22          mediaContainerClassName="w-full h-[30px] sm:h-[100px] overflow-hidden mx-px mt-1 sm:mx-2 sm:mt-4"
23          className="cursor-pointer sm:text-6xl text-2xl text-[#ff5941] lowercase font-light flex flex-row items-center justify-center w-full"
24          animationVariants={{
25            initial: { width: 0 },
26            animate: {
27              width: screenSize.lessThan("sm") ? "30px" : "100px",
28              transition: { duration: 0.4, type: "spring", bounce: 0 },
29            },
30          }}
31        />
32      </a>
33    </div>
34  )
35}