Initial commit: Kottgard testing website code
This commit is contained in:
@@ -0,0 +1,132 @@
|
||||
/**
|
||||
* 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)
|
||||
}
|
||||
Reference in New Issue
Block a user