NextJS 14 üçün Kofe.al Widget

1"use client";
2import { useState } from "react";
3import { motion } from "framer-motion";
4import { clsx, type ClassValue } from "clsx";
5import { twMerge } from "tailwind-merge";
6import { Poppins } from "next/font/google";
7
8export function cn(...args: ClassValue[]) {
9  return twMerge(clsx(args));
10}
11
12const poppins = Poppins({ subsets: ["latin"], weight: "600" });
13
14export default function KofeAlWidget({
15  username,
16  isActiveOnMobile = false,
17  isHoverable = false,
18}: {
19  username: string;
20  isActiveOnMobile?: boolean;
21  isHoverable?: boolean;
22}) {
23  const [hovered, setHovered] = useState(false);
24
25  return (
26    <div
27      className={cn(
28        "sticky bottom-0 right-0  w-full flex-row justify-end pb-5 pr-5 md:pb-7 md:pr-7",
29        poppins.className,
30        { "hidden md:flex": !isActiveOnMobile, flex: isActiveOnMobile }
31      )}
32    >
33      <motion.a
34        href={`https://kofe.al/@${username}`}
35        target="_blank"
36        rel="noopener noreferrer"
37        initial={{ scale: 0.3, opacity: 0 }}
38        animate={{ scale: 1, opacity: 1 }}
39        transition={{
40          duration: 0.3,
41          delay: 0.3,
42          type: "spring",
43          stiffness: 80,
44        }}
45        className={cn(
46          "flex w-fit cursor-pointer flex-row items-center rounded-full bg-white shadow-[0px_0px_30px_0px_rgba(0,0,0,0.04),0px_30px_60px_0px_rgba(0,0,0,0.12),0px_0px_1px_0px_rgba(0,0,0,0.3)]",
47          { "p-3": !hovered }
48        )}
49        onMouseEnter={() => setHovered(true)}
50        onMouseLeave={() => setHovered(false)}
51      >
52        <div
53          className={cn("transition-all duration-200", {
54            "lg:w-auto lg:px-4 lg:py-2 lg:pl-6": hovered && isHoverable,
55          })}
56        >
57          <p
58            className={cn("hidden text-lg", {
59              "lg:flex": isHoverable && hovered,
60            })}
61          >
62            <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
63              kofe.al
64            </span>
65            /@{username}
66          </p>
67        </div>
68        <motion.div
69          animate={{
70            rotate: [0, -11, 11, -11, 11, 0],
71          }}
72          transition={{
73            y: { duration: 0.5, repeat: Infinity, repeatType: "mirror" },
74            rotate: {
75              repeatDelay: 4.5,
76              duration: 1.2,
77              repeat: Infinity,
78              repeatType: "mirror",
79            },
80          }}
81          className={cn({
82            "rounded-full p-3 shadow-[0px_0px_30px_0px_rgba(0,0,0,0.04),0px_30px_60px_0px_rgba(0,0,0,0.12),0px_0px_1px_0px_rgba(0,0,0,0.3)]":
83              hovered,
84          })}
85        >
86          <img
87            src="https://kofe.al/assets/images/fav/apple-touch-icon.png"
88            width={40}
89            height={40}
90            alt="Kofe al"
91            className="select-none rounded-full"
92          />
93        </motion.div>
94      </motion.a>
95    </div>
96  );
97}
98