@fayz-ai/plugin-linkinbio 0.9.1 → 0.10.1

package/src/public/blocks/SocialLinksSection.tsx

@@ -1,125 +0,0 @@
-import { ExternalLink } from 'lucide-react';
-import type { SocialLinksSection as SocialLinksSectionType } from '../../types';
-import { platformColors, platformLabels } from '../utils';
-import { PlatformIcon } from '../components/PlatformIcon';
-
-interface Props {
-  section: SocialLinksSectionType;
-}
-
-export default function SocialLinksSection({ section }: Props) {
-  const layout = section.layout ?? 'buttons';
-
-  return (
-    <section className="py-16 md:py-24 px-6" id={section.id}>
-      <div className="max-w-xl mx-auto">
-        {section.title && (
-          <h2
-            className="text-3xl md:text-4xl font-bold mb-10 text-center"
-            style={{ fontFamily: 'var(--pk-font-heading)', color: 'var(--pk-text)' }}
-          >
-            {section.title}
-          </h2>
-        )}
-
-        {layout === 'icons' && (
-          <div className="flex flex-wrap justify-center gap-5">
-            {section.links.map((link) => {
-              const color = platformColors[link.platform];
-              return (
-                <a
-                  key={link.platform + link.url}
-                  href={link.url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="group flex items-center justify-center w-16 h-16 rounded-full transition-all duration-300 hover:scale-110 hover:shadow-lg"
-                  style={{
-                    backgroundColor: color + '15',
-                    boxShadow: `0 0 0 1px ${color}25`,
-                  }}
-                  title={link.label ?? platformLabels[link.platform]}
-                >
-                  <PlatformIcon platform={link.platform} size={26} style={{ color }} />
-                </a>
-              );
-            })}
-          </div>
-        )}
-
-        {layout === 'buttons' && (
-          <div className="flex flex-col gap-3">
-            {section.links.map((link) => {
-              const color = platformColors[link.platform];
-              return (
-                <a
-                  key={link.platform + link.url}
-                  href={link.url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="group relative flex items-center gap-5 px-6 py-4 font-medium transition-all duration-300 hover:scale-[1.02] overflow-hidden"
-                  style={{
-                    backgroundColor: color + '10',
-                    color: 'var(--pk-text)',
-                    borderRadius: 'var(--pk-radius)',
-                    border: `1px solid ${color}30`,
-                  }}
-                >
-                  {/* Hover glow */}
-                  <div
-                    className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
-                    style={{ background: `linear-gradient(135deg, ${color}18, transparent 60%)` }}
-                  />
-
-                  <div className="relative z-10 flex items-center justify-center w-10 h-10 rounded-full shrink-0"
-                    style={{ backgroundColor: color + '20' }}
-                  >
-                    <PlatformIcon platform={link.platform} size={20} style={{ color }} />
-                  </div>
-
-                  <span className="relative z-10 text-base">{link.label ?? platformLabels[link.platform]}</span>
-
-                  <ExternalLink
-                    size={16}
-                    className="relative z-10 ml-auto opacity-0 group-hover:opacity-50 transition-opacity duration-300"
-                    style={{ color: 'var(--pk-text)' }}
-                  />
-                </a>
-              );
-            })}
-          </div>
-        )}
-
-        {layout === 'list' && (
-          <div className="space-y-1">
-            {section.links.map((link) => {
-              const color = platformColors[link.platform];
-              return (
-                <a
-                  key={link.platform + link.url}
-                  href={link.url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="group flex items-center gap-4 py-4 px-3 transition-all duration-200 hover:bg-white/5 rounded-lg"
-                >
-                  <div className="flex items-center justify-center w-9 h-9 rounded-full shrink-0"
-                    style={{ backgroundColor: color + '18' }}
-                  >
-                    <PlatformIcon platform={link.platform} size={18} style={{ color }} />
-                  </div>
-                  <span className="text-sm font-medium" style={{ color: 'var(--pk-text)' }}>
-                    {link.label ?? platformLabels[link.platform]}
-                  </span>
-                  <ExternalLink
-                    size={14}
-                    className="ml-auto opacity-0 group-hover:opacity-40 transition-opacity"
-                    style={{ color: 'var(--pk-text)' }}
-                  />
-                </a>
-              );
-            })}
-          </div>
-        )}
-      </div>
-    </section>
-  );
-}

package/src/public/blocks/StatsSection.tsx

@@ -1,46 +0,0 @@
-import type { StatsSection as StatsSectionType } from '../../types';
-
-interface Props {
-  section: StatsSectionType;
-}
-
-export default function StatsSection({ section }: Props) {
-  const isGrid = section.layout === 'grid';
-
-  return (
-    <section className="py-16 md:py-24 px-6" id={section.id}>
-      <div className="max-w-4xl mx-auto">
-        {section.title && (
-          <h2
-            className="text-3xl md:text-4xl font-bold mb-8 text-center"
-            style={{ fontFamily: 'var(--pk-font-heading)', color: 'var(--pk-text)' }}
-          >
-            {section.title}
-          </h2>
-        )}
-
-        <div
-          className={
-            isGrid
-              ? 'grid grid-cols-2 md:grid-cols-4 gap-6'
-              : 'flex flex-wrap justify-center gap-8 md:gap-12'
-          }
-        >
-          {section.stats.map((stat, i) => (
-            <div key={i} className="text-center">
-              <div
-                className="text-3xl md:text-4xl font-bold mb-1"
-                style={{ fontFamily: 'var(--pk-font-heading)', color: 'var(--pk-primary)' }}
-              >
-                {stat.value}
-              </div>
-              <div className="text-sm" style={{ color: 'var(--pk-muted)' }}>
-                {stat.label}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}

package/src/public/blocks/TextSection.tsx

@@ -1,29 +0,0 @@
-import type { TextSection as TextSectionType } from '../../types';
-import { renderMarkdown } from '../utils';
-
-interface Props {
-  section: TextSectionType;
-}
-
-export default function TextSection({ section }: Props) {
-  return (
-    <section className="py-16 md:py-24 px-6" id={section.id}>
-      <div className="max-w-3xl mx-auto">
-        {section.title && (
-          <h2
-            className="text-3xl md:text-4xl font-bold mb-8"
-            style={{ fontFamily: 'var(--pk-font-heading)', color: 'var(--pk-text)' }}
-          >
-            {section.title}
-          </h2>
-        )}
-
-        <div
-          className="text-base md:text-lg leading-relaxed [&_p]:mb-4 [&_strong]:font-semibold [&_em]:italic [&_a]:underline [&_a]:decoration-[var(--pk-primary)]"
-          style={{ color: 'var(--pk-muted)' }}
-          dangerouslySetInnerHTML={{ __html: renderMarkdown(section.content) }}
-        />
-      </div>
-    </section>
-  );
-}

package/src/public/blocks/TourDatesBlock.tsx

@@ -1,83 +0,0 @@
-import { MapPin } from 'lucide-react';
-import type { TourDatesSection, TourDateItem } from '../../types';
-
-interface Props {
-  section: TourDatesSection;
-}
-
-const MONTHS_PT = ['JAN', 'FEV', 'MAR', 'ABR', 'MAI', 'JUN', 'JUL', 'AGO', 'SET', 'OUT', 'NOV', 'DEZ'];
-
-function parseDate(date: string): { month: string; day: string; year: string } {
-  const m = date.match(/^(\d{4})-(\d{2})-(\d{2})/);
-  if (m) {
-    const monthIdx = Math.min(11, Math.max(0, parseInt(m[2], 10) - 1));
-    return { month: MONTHS_PT[monthIdx], day: String(parseInt(m[3], 10)), year: m[1] };
-  }
-  return { month: '', day: date, year: '' };
-}
-
-function DateRow({ item, cta }: { item: TourDateItem; cta: string }) {
-  const { month, day, year } = parseDate(item.date);
-  const hasLink = !!item.url;
-  const label = hasLink ? cta : item.soldOut ? 'Esgotado' : 'Em breve';
-  const Tag = hasLink ? 'a' : 'div';
-  return (
-    <Tag
-      {...(hasLink ? { href: item.url, target: '_blank', rel: 'noopener noreferrer' } : {})}
-      className={`flex items-center gap-4 p-3 transition-all duration-200 ${hasLink ? 'hover:scale-[1.01]' : 'cursor-default'}`}
-      style={{
-        backgroundColor: 'rgba(255,255,255,0.04)',
-        border: '1px solid rgba(255,255,255,0.07)',
-        borderRadius: 'var(--pk-radius)',
-      }}
-    >
-      <div
-        className="shrink-0 flex flex-col items-center justify-center w-14 h-16"
-        style={{ backgroundColor: 'rgba(255,255,255,0.05)', borderRadius: 'calc(var(--pk-radius) - 4px)' }}
-      >
-        <span className="text-[10px] font-bold tracking-wider" style={{ color: 'var(--pk-primary)' }}>{month}</span>
-        <span className="text-xl font-bold leading-none" style={{ color: 'var(--pk-text)', fontFamily: 'var(--pk-font-heading)' }}>{day}</span>
-        <span className="text-[10px] opacity-60" style={{ color: 'var(--pk-muted)' }}>{year}</span>
-      </div>
-      <div className="min-w-0 flex-1">
-        <p className="text-sm font-semibold truncate" style={{ color: 'var(--pk-text)' }}>{item.venue}</p>
-        {item.city && (
-          <p className="text-xs truncate flex items-center gap-1 mt-0.5" style={{ color: 'var(--pk-muted)' }}>
-            <MapPin size={11} /> {item.city}
-          </p>
-        )}
-      </div>
-      <span
-        className="shrink-0 px-4 py-1.5 text-xs font-semibold rounded-full"
-        style={
-          hasLink
-            ? { backgroundColor: 'var(--pk-primary)', color: 'var(--pk-bg)' }
-            : { backgroundColor: 'transparent', color: 'var(--pk-muted)', border: '1px solid rgba(255,255,255,0.12)' }
-        }
-      >
-        {label}
-      </span>
-    </Tag>
-  );
-}
-
-export default function TourDatesBlock({ section }: Props) {
-  const cta = section.ctaLabel ?? 'Ingressos';
-  return (
-    <section className="py-6" id={section.id}>
-      {section.title && (
-        <h2
-          className="text-xl md:text-2xl font-bold mb-4 px-1"
-          style={{ fontFamily: 'var(--pk-font-heading)', color: 'var(--pk-text)' }}
-        >
-          {section.title}
-        </h2>
-      )}
-      <div className="flex flex-col gap-3">
-        {section.dates.map((item, i) => (
-          <DateRow key={item.date + item.venue + i} item={item} cta={cta} />
-        ))}
-      </div>
-    </section>
-  );
-}

package/src/public/blocks/VenueListSection.tsx

@@ -1,91 +0,0 @@
-import type { VenueListSection as VenueListSectionType } from '../../types';
-
-interface Props {
-  section: VenueListSectionType;
-}
-
-export default function VenueListSection({ section }: Props) {
-  const layout = section.layout ?? 'grid';
-
-  return (
-    <section className="py-16 md:py-24 px-6" id={section.id}>
-      <div className="max-w-5xl mx-auto">
-        {section.title && (
-          <h2
-            className="text-3xl md:text-4xl font-bold mb-10"
-            style={{ fontFamily: 'var(--pk-font-heading)', color: 'var(--pk-text)' }}
-          >
-            {section.title}
-          </h2>
-        )}
-
-        {layout === 'logo-cloud' ? (
-          <div className="flex flex-wrap justify-center gap-6 md:gap-8">
-            {section.venues.map((venue, i) => (
-              <div key={i} className="flex flex-col items-center gap-2">
-                {venue.logoUrl ? (
-                  <img src={venue.logoUrl} alt={venue.name} className="h-12 w-12 object-contain opacity-70" loading="lazy" />
-                ) : (
-                  <div
-                    className="h-12 w-12 flex items-center justify-center text-lg font-bold opacity-70"
-                    style={{ backgroundColor: 'rgba(255,255,255,0.06)', color: 'var(--pk-text)', borderRadius: 'var(--pk-radius)' }}
-                  >
-                    {venue.name[0]}
-                  </div>
-                )}
-                <span className="text-xs text-center" style={{ color: 'var(--pk-muted)' }}>{venue.name}</span>
-              </div>
-            ))}
-          </div>
-        ) : layout === 'list' ? (
-          <div className="space-y-3">
-            {section.venues.map((venue, i) => (
-              <div
-                key={i}
-                className="flex items-center justify-between py-3 px-4"
-                style={{ backgroundColor: 'rgba(255,255,255,0.04)', borderRadius: 'var(--pk-radius)' }}
-              >
-                <span className="font-medium" style={{ color: 'var(--pk-text)' }}>{venue.name}</span>
-                <span className="text-sm" style={{ color: 'var(--pk-muted)' }}>
-                  {[venue.city, venue.year].filter(Boolean).join(' · ')}
-                </span>
-              </div>
-            ))}
-          </div>
-        ) : (
-          /* Organic flowing tag cloud */
-          <div className="flex flex-wrap gap-3">
-            {section.venues.map((venue, i) => {
-              // Vary sizes based on name length and position for organic feel
-              const isLong = venue.name.length > 12;
-              const isShort = venue.name.length < 6;
-              const sizeClass = isLong ? 'text-base md:text-lg px-6 py-3' : isShort ? 'text-sm px-4 py-2.5' : 'text-sm md:text-base px-5 py-3';
-              // Alternate subtle visual weight
-              const isHighlight = i % 5 === 0 || i % 7 === 0;
-              return (
-                <div
-                  key={i}
-                  className={`inline-flex flex-col items-start transition-all duration-300 hover:scale-105 ${sizeClass}`}
-                  style={{
-                    backgroundColor: isHighlight ? 'rgba(255,255,255,0.08)' : 'rgba(255,255,255,0.03)',
-                    border: isHighlight ? '1px solid rgba(255,255,255,0.12)' : '1px solid rgba(255,255,255,0.06)',
-                    borderRadius: '9999px',
-                  }}
-                >
-                  <span className="font-semibold whitespace-nowrap" style={{ color: 'var(--pk-text)' }}>
-                    {venue.name}
-                    {venue.city && (
-                      <span className="font-normal ml-2 opacity-50" style={{ color: 'var(--pk-muted)', fontSize: '0.8em' }}>
-                        {venue.city}
-                      </span>
-                    )}
-                  </span>
-                </div>
-              );
-            })}
-          </div>
-        )}
-      </div>
-    </section>
-  );
-}

package/src/public/blocks/VideoGridSection.tsx

@@ -1,105 +0,0 @@
-import type { VideoGridSection as VideoGridSectionType } from '../../types';
-
-interface Props {
-  section: VideoGridSectionType;
-}
-
-export default function VideoGridSection({ section }: Props) {
-  const isFeatured = section.layout === 'featured';
-  const isList = section.layout === 'list';
-
-  return (
-    <section className="py-16 md:py-24 px-6" id={section.id}>
-      <div className="max-w-5xl mx-auto">
-        {section.title && (
-          <h2
-            className="text-3xl md:text-4xl font-bold mb-8"
-            style={{ fontFamily: 'var(--pk-font-heading)', color: 'var(--pk-text)' }}
-          >
-            {section.title}
-          </h2>
-        )}
-
-        {isFeatured && section.videos.length > 0 ? (
-          <div className="space-y-6">
-            {/* Featured video */}
-            <div className="aspect-video w-full overflow-hidden" style={{ borderRadius: 'var(--pk-radius)' }}>
-              <iframe
-                src={`https://www.youtube.com/embed/${section.videos[0].videoId}`}
-                title={section.videos[0].title ?? 'Video'}
-                className="h-full w-full"
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                allowFullScreen
-                loading="lazy"
-              />
-            </div>
-            {section.videos[0].title && (
-              <p className="text-sm font-medium" style={{ color: 'var(--pk-muted)' }}>
-                {section.videos[0].title}
-              </p>
-            )}
-            {/* Remaining videos */}
-            {section.videos.length > 1 && (
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                {section.videos.slice(1).map((video, i) => (
-                  <div key={i}>
-                    <div className="aspect-video overflow-hidden" style={{ borderRadius: 'var(--pk-radius)' }}>
-                      <iframe
-                        src={`https://www.youtube.com/embed/${video.videoId}`}
-                        title={video.title ?? 'Video'}
-                        className="h-full w-full"
-                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                        allowFullScreen
-                        loading="lazy"
-                      />
-                    </div>
-                    {video.title && (
-                      <p className="mt-2 text-sm" style={{ color: 'var(--pk-muted)' }}>
-                        {video.title}
-                      </p>
-                    )}
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-        ) : (
-          <div className={`grid gap-4 md:gap-6 ${isList ? 'grid-cols-1' : 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3'}`}>
-            {section.videos.map((video, i) => (
-              <div key={i}>
-                <div className="aspect-video overflow-hidden" style={{ borderRadius: 'var(--pk-radius)' }}>
-                  <iframe
-                    src={`https://www.youtube.com/embed/${video.videoId}`}
-                    title={video.title ?? 'Video'}
-                    className="h-full w-full"
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                    allowFullScreen
-                    loading="lazy"
-                  />
-                </div>
-                {video.title && (
-                  <p className="mt-2 text-sm" style={{ color: 'var(--pk-muted)' }}>
-                    {video.title}
-                  </p>
-                )}
-              </div>
-            ))}
-            {section.channelUrl && (
-              <a
-                href={section.channelUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="aspect-video overflow-hidden flex items-center justify-center border border-white/10 hover:border-white/30 transition-colors"
-                style={{ borderRadius: 'var(--pk-radius)', background: 'var(--pk-alt-bg, rgba(255,255,255,0.05))' }}
-              >
-                <span className="text-lg font-semibold" style={{ color: 'var(--pk-text)', fontFamily: 'var(--pk-font-heading)' }}>
-                  Ver todos →
-                </span>
-              </a>
-            )}
-          </div>
-        )}
-      </div>
-    </section>
-  );
-}

package/src/public/blocks/index.ts

@@ -1,16 +0,0 @@
-export { default as HeroSection } from './HeroSection';
-export { default as BioSection } from './BioSection';
-export { default as GallerySection } from './GallerySection';
-export { default as VideoGridSection } from './VideoGridSection';
-export { default as SocialLinksSection } from './SocialLinksSection';
-export { default as EmbedSection } from './EmbedSection';
-export { default as ProjectSection } from './ProjectSection';
-export { default as StatsSection } from './StatsSection';
-export { default as VenueListSection } from './VenueListSection';
-export { default as CTASection } from './CTASection';
-export { default as TextSection } from './TextSection';
-export { default as ProfileHeader } from './ProfileHeader';
-export { default as LinksBlock } from './LinksBlock';
-export { default as MusicReleasesBlock } from './MusicReleasesBlock';
-export { default as TourDatesBlock } from './TourDatesBlock';
-export { default as FeaturedBlock } from './FeaturedBlock';

package/src/public/components/Carousel.tsx

@@ -1,90 +0,0 @@
-import { useEffect, useRef, useState, type ReactNode } from 'react';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-
-/**
- * Komi-style horizontal collection: a section title with prev/next controls and
- * a snap-scrolling track. Mobile-first — the track scrolls by touch and the
- * arrows nudge it by ~80% of the viewport. Arrows disable at the track ends.
- */
-export function Carousel({ title, children }: { title?: string; children: ReactNode }) {
-  const trackRef = useRef<HTMLDivElement>(null);
-  const [atStart, setAtStart] = useState(true);
-  const [atEnd, setAtEnd] = useState(false);
-
-  const update = () => {
-    const el = trackRef.current;
-    if (!el) return;
-    setAtStart(el.scrollLeft <= 2);
-    setAtEnd(el.scrollLeft + el.clientWidth >= el.scrollWidth - 2);
-  };
-
-  useEffect(() => {
-    update();
-    const el = trackRef.current;
-    if (!el) return;
-    el.addEventListener('scroll', update, { passive: true });
-    window.addEventListener('resize', update);
-    return () => {
-      el.removeEventListener('scroll', update);
-      window.removeEventListener('resize', update);
-    };
-  }, []);
-
-  const nudge = (dir: 1 | -1) => {
-    const el = trackRef.current;
-    if (!el) return;
-    el.scrollBy({ left: dir * el.clientWidth * 0.8, behavior: 'smooth' });
-  };
-
-  const arrowStyle = (disabled: boolean) => ({
-    backgroundColor: 'rgba(255,255,255,0.06)',
-    color: 'var(--pk-text)',
-    opacity: disabled ? 0.25 : 1,
-    borderRadius: '9999px',
-  });
-
-  return (
-    <div>
-      {(title || true) && (
-        <div className="flex items-center justify-between mb-4 px-1">
-          {title && (
-            <h2
-              className="text-xl md:text-2xl font-bold"
-              style={{ fontFamily: 'var(--pk-font-heading)', color: 'var(--pk-text)' }}
-            >
-              {title}
-            </h2>
-          )}
-          <div className="flex gap-2">
-            <button
-              type="button"
-              aria-label="Anterior"
-              onClick={() => nudge(-1)}
-              disabled={atStart}
-              className="flex items-center justify-center w-9 h-9 transition-opacity"
-              style={arrowStyle(atStart)}
-            >
-              <ChevronLeft size={18} />
-            </button>
-            <button
-              type="button"
-              aria-label="Próximo"
-              onClick={() => nudge(1)}
-              disabled={atEnd}
-              className="flex items-center justify-center w-9 h-9 transition-opacity"
-              style={arrowStyle(atEnd)}
-            >
-              <ChevronRight size={18} />
-            </button>
-          </div>
-        </div>
-      )}
-      <div
-        ref={trackRef}
-        className="flex gap-3 overflow-x-auto snap-x snap-mandatory scrollbar-hide pb-1"
-      >
-        {children}
-      </div>
-    </div>
-  );
-}