Bugün sizlərlə yeni hazırladığım Kofe.al Widget-ni paylaşmaq istəyirəm. NextJS üçün hazırlanmış bu widget həmdə TypeScript ilə yazıldığına görə type-safe-dir. Bu widgeti istədiyiniz kimi istifadə edə bilərsiz. Əslində bir neçə gündür üzərində işlədiyim öz portofolio web-səhifəm üçün hazırlamışdım. Lakin istərəm ki sizlərdə bu komponent-dən istifadə edə biləsiz
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.
Ə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.