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

1. Mühit

Bu component NextJS 15 və üzəri versiyalar üçün hazırlanmışdır. NextJS layihələrində əvvəlcədən olan “next/image” və “next/font” xaricində heç bir əlavə kitabxana yükləmək lazım deyil. Tailwind CSS-i konfiqurasiya etdikdən sonra bizə lazım olan hər şey hazırdır.

2. Qaynaq kodu

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

@/components/kofeal-widget.tsx

1import { Poppins } from "next/font/google";
2import Image from "next/image";
3
4const poppins = Poppins({ subsets: ["latin"], weight: "600" });
5type KofeAlWidgetProps = { isActiveOnMobile?: boolean; isHoverable?: boolean; username: string };
6
7export function KofeAlWidget({ isActiveOnMobile = false, isHoverable = false, username }: KofeAlWidgetProps) {
8  return (
9    <div
10      className={`group ${poppins.className} ${isActiveOnMobile ? "flex" : "hidden md:flex"} pointer-events-none sticky right-0 bottom-0 z-0 w-full cursor-auto flex-row justify-end pr-5 pb-5 md:pr-7 md:pb-7`}
11    >
12      <a
13        className="pointer-events-auto flex w-fit animate-[kofeal-pop_0.3s_ease-out_0.3s_both] 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"
14        href={`https://kofe.al/@${username}`}
15        rel="noopener noreferrer"
16        target="_blank"
17      >
18        <div
19          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"}`}
20        >
21          <p className={`hidden text-lg ${isHoverable ? "group-hover:lg:flex" : ""}`}>
22            <span className="bg-linear-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">kofe.al</span>
23            /@{username}
24          </p>
25        </div>
26        <div
27          className={
28            "animate-[kofeal-wiggle_5.7s_ease-in-out_infinite] 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)]"
29          }
30        >
31          <Image
32            // src="/kofeal.webp" You can also download this image and serve from public folder.
33            src="https://kofe.al/assets/images/fav/apple-touch-icon.png"
34            alt="Kofe al"
35            className="rounded-full select-none"
36            width={40}
37            height={40}
38            quality={100}
39          />
40        </div>
41      </a>
42      <style>{`
43        @keyframes kofeal-pop {
44          from { opacity: 0; transform: scale(0.3); }
45          to { opacity: 1; transform: scale(1); }
46        }
47        @keyframes kofeal-wiggle {
48          0% { transform: rotate(0deg); }
49          4.21% { transform: rotate(-11deg); }
50          8.42% { transform: rotate(11deg); }
51          12.63% { transform: rotate(-11deg); }
52          16.84% { transform: rotate(11deg); }
53          21.05%, 100% { transform: rotate(0deg); }
54        }
55      `}</style>
56    </div>
57  );
58}

3. İstifadə qaydası

Əgər widgetin bütün səhifələrdə görünməsini istəyirsizsə, layout.tsx 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.