133 lines
6.2 KiB
TypeScript
133 lines
6.2 KiB
TypeScript
/**
|
|
* ANNOTATED COPY — every line explained
|
|
* Source: src/components/home/SocialFollow.tsx
|
|
* NOT used by the app — read this to learn how the real file works
|
|
*/
|
|
// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
|
|
'use client';
|
|
// (blank line — separates logical blocks for readability)
|
|
// Lucide icons — lightweight SVG icon components
|
|
import { Facebook, Instagram, MessageCircle } from 'lucide-react';
|
|
// Import external package or local module
|
|
import {
|
|
// Property or array item — trailing comma allowed in TypeScript
|
|
FACEBOOK_URL,
|
|
// Property or array item — trailing comma allowed in TypeScript
|
|
INSTAGRAM_URL,
|
|
// Property or array item — trailing comma allowed in TypeScript
|
|
WHATSAPP_URL,
|
|
// Closing brace — end of block (function, if, object, JSX)
|
|
} from '@/lib/constants';
|
|
// Import project module (@/ alias = src/ folder in tsconfig)
|
|
import { useTranslation } from '@/hooks/useTranslation';
|
|
// (blank line — separates logical blocks for readability)
|
|
// Line 11: const socialLinks = [
|
|
const socialLinks = [
|
|
// Line 12: {
|
|
{
|
|
// Property or array item — trailing comma allowed in TypeScript
|
|
key: 'facebook',
|
|
// Property or array item — trailing comma allowed in TypeScript
|
|
href: FACEBOOK_URL,
|
|
// Property or array item — trailing comma allowed in TypeScript
|
|
icon: Facebook,
|
|
// Line 16: className:
|
|
className:
|
|
// Property or array item — trailing comma allowed in TypeScript
|
|
'border-blue-600/20 bg-blue-600/10 text-blue-700 hover:border-blue-600/40 hover:bg-blue-600/15',
|
|
// Closing brace — end of block (function, if, object, JSX)
|
|
},
|
|
// Line 19: {
|
|
{
|
|
// Property or array item — trailing comma allowed in TypeScript
|
|
key: 'instagram',
|
|
// Property or array item — trailing comma allowed in TypeScript
|
|
href: INSTAGRAM_URL,
|
|
// Property or array item — trailing comma allowed in TypeScript
|
|
icon: Instagram,
|
|
// Line 23: className:
|
|
className:
|
|
// Property or array item — trailing comma allowed in TypeScript
|
|
'border-pink-600/20 bg-pink-600/10 text-pink-700 hover:border-pink-600/40 hover:bg-pink-600/15',
|
|
// Closing brace — end of block (function, if, object, JSX)
|
|
},
|
|
// Line 26: {
|
|
{
|
|
// Property or array item — trailing comma allowed in TypeScript
|
|
key: 'whatsapp',
|
|
// Property or array item — trailing comma allowed in TypeScript
|
|
href: WHATSAPP_URL,
|
|
// Property or array item — trailing comma allowed in TypeScript
|
|
icon: MessageCircle,
|
|
// Line 30: className:
|
|
className:
|
|
// Property or array item — trailing comma allowed in TypeScript
|
|
'border-green-600/20 bg-green-600/10 text-green-700 hover:border-green-600/40 hover:bg-green-600/15',
|
|
// Closing brace — end of block (function, if, object, JSX)
|
|
},
|
|
// End of array literal
|
|
] as const;
|
|
// (blank line — separates logical blocks for readability)
|
|
// Default export — main component/page Next.js or other files import
|
|
export default function SocialFollow() {
|
|
// Custom hook — returns t() translator and current locale
|
|
const { t } = useTranslation();
|
|
// (blank line — separates logical blocks for readability)
|
|
// Return JSX — describes UI tree React renders to the DOM
|
|
return (
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<section className="py-20">
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<div className="rounded-3xl border border-cream-300/80 bg-white px-8 py-12 text-center shadow-premium sm:px-16">
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<span className="mb-2 inline-block text-sm font-semibold uppercase tracking-wider text-gold-600">
|
|
// Line 43: {t('social.label')}
|
|
{t('social.label')}
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
</span>
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<h2 className="section-heading mb-3">{t('social.title')}</h2>
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<p className="mx-auto mb-8 max-w-xl text-gray-500">{t('social.subtitle')}</p>
|
|
// (blank line — separates logical blocks for readability)
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
|
|
// Array.map — transform each item (often render a list of components)
|
|
{socialLinks.map(({ key, href, icon: Icon, className }) => (
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<a
|
|
// Line 51: key={key}
|
|
key={key}
|
|
// Link target URL — internal route or external https://
|
|
href={href}
|
|
// Line 53: target="_blank"
|
|
target="_blank"
|
|
// Line 54: rel="noopener noreferrer"
|
|
rel="noopener noreferrer"
|
|
// Tailwind CSS utility classes — styling (colors, spacing, layout)
|
|
className={`inline-flex items-center gap-2 rounded-xl border-2 px-6 py-3 text-sm font-semibold transition-all ${className}`}
|
|
// Line 56: >
|
|
>
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<Icon className="h-5 w-5" />
|
|
// Line 58: {t(`social.${key}`)}
|
|
{t(`social.${key}`)}
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
</a>
|
|
// Line 60: ))}
|
|
))}
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
</div>
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
</div>
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
</div>
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
</section>
|
|
// Line 65: );
|
|
);
|
|
// Closing brace — end of block (function, if, object, JSX)
|
|
}
|