Yusif Aliyev | NextJS üçün Kofe.al Widgeti

1. Mühit

Bu component NextJS 13 və üzəri (15-də daxil) versiyalar üçün hazırlanmışdır. Əvvəlcə aşağıdaki kodu yazaraq terminaldan motion kitabxanasını yükləyin. Ayrıca Tailwind CSS-i konfiqurasiya edin. Artıq bizə lazım olan hər şey hazırdır.

$ pnpm add motion@latest

və ya

$ npm i motion@latest

2. Qaynaq kodu

İndi isə layihənizdə yeni KofeAlWidget.tsx adlı component yaradın. Aşağıdaki qaynaq kodunu kopyalayaraq həmin fayla yapışdırın. CTRL-S edərək yadda saxlayın və widget hazırdır.

@/components/KofeAlWidget.tsx

1import { Poppins } from "next/font/google";
2import Image from "next/image";
3import * as motion from "motion/react-client";
4
5const poppins = Poppins({ subsets: ["latin"], weight: "600" });
6type TKofeAlWidget = { username: string; isActiveOnMobile?: boolean; isHoverable?: boolean };
7
8export default function KofeAlWidget({ username, isActiveOnMobile = false, isHoverable = false }: TKofeAlWidget) {
9  return (
10    <div
11      className={`group ${poppins.className} ${isActiveOnMobile ? "flex" : "hidden md:flex"} pointer-events-none sticky bottom-0 right-0 z-0 w-full cursor-auto flex-row justify-end pb-5 pr-5 md:pb-7 md:pr-7`}
12    >
13      <motion.a
14        href={`https://kofe.al/@${username}`}
15        target="_blank"
16        rel="noopener noreferrer"
17        initial={{ scale: 0.3, opacity: 0 }}
18        animate={{ scale: 1, opacity: 1 }}
19        transition={{ duration: 0.3, delay: 0.3, type: "spring", stiffness: 80 }}
20        className="pointer-events-auto flex w-fit cursor-pointer flex-row items-center rounded-full bg-white 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)] group-hover:p-0"
21      >
22        <div
23          className={`transition-all duration-200 ${isHoverable && "group-hover:lg:w-auto group-hover:lg:px-4 group-hover:lg:py-2 group-hover:lg:pl-6"}`}
24        >
25          <p className={`hidden text-lg dark:text-black ${isHoverable && "group-hover:lg:flex"}`}>
26            <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">kofe.al</span>
27            /@{username}
28          </p>
29        </div>
30        <motion.div
31          animate={{ rotate: [0, -11, 11, -11, 11, 0] }}
32          transition={{
33            y: { duration: 0.5, repeat: Infinity, repeatType: "mirror" },
34            rotate: { repeatDelay: 4.5, duration: 1.2, repeat: Infinity, repeatType: "mirror" },
35          }}
36          className={
37            "group-hover:rounded-full group-hover:p-3 group-hover: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)]"
38          }
39        >
40          <Image
41            // src="/kofeal.webp"
42            src="https://kofe.al/assets/images/fav/apple-touch-icon.png"
43            width={40}
44            height={40}
45            alt="Kofe al"
46            unoptimized
47            className="select-none rounded-full"
48          />
49        </motion.div>
50      </motion.a>
51    </div>
52  );
53}
54

3. İstifadə qaydası

Əgər widgetin bütün səhifələrdə görünməsini istəyirsizsə, layout.js faylınıza aşağıdaki kimi <KofeAlWidget /> -i əlavə edin

Bütün səhifələrə Kofe.al widgetini tətbiq etmək

Yox əgər sadəcə bəzi səhifələrdə görünməsini istəyirsizsə bunu həmin səhifələrdə istifadə edin.

4. Proplar

username prop-unu widgetin düzgün çalışması üçün mütləq şəkildə verməlisiniz. Bu username sizin kofe.al saytında istifadə etdiyiniz istifadəçi adı olmalıdır.

isHoverable propu kursor ilə widgetin üzərinə gəldikdə sola doğru açılan kiçik popover-dir. İçərisində kofe.al/@username şəklində mətn olur.

isActiveOnMobile propu ilə bu widgetin mobil cihazlarda göstərilib-göstərilməyəcəyini seçirsiz.