links-page.tsx - website

1'use client'
2
3import { motion } from 'framer-motion'
4import Layout from './Layout'
5import { config } from '@/configs/main'
6import { useEffect } from 'react'
7import type { ISocials, ILink } from '@/interfaces/IConfig'
8import { DynamicIcon, IconName } from './dynamic-icon'
9
10export function LinksPage({
11	selectedLink,
12}: {
13	selectedLink?: ISocials | ILink
14}) {
15	useEffect(() => {
16		if (selectedLink) {
17			window.location.href = selectedLink.url
18		}
19	}, [selectedLink])
20
21	// Combine socials and links
22	const allLinks = [...(config.socials || []), ...(config.links || [])]
23
24	return (
25		<Layout>
26			<div className="container mx-auto px-4 py-12">
27				<motion.div
28					className="mx-auto max-w-2xl space-y-8"
29					initial="initial"
30					animate="animate"
31					variants={{
32						initial: { opacity: 0 },
33						animate: { opacity: 1, transition: { staggerChildren: 0.1 } },
34					}}
35				>
36					<motion.h1 className="text-center text-2xl font-bold">
37						Links
38					</motion.h1>
39					{/* Links Grid */}
40					<motion.div className="grid gap-4">
41						{allLinks.map((link) => (
42							<a
43								key={link.name}
44								href={link.url}
45								target="_blank"
46								rel="noopener noreferrer"
47								className="group relative overflow-hidden rounded-lg border border-gray-700 bg-gray-800/50 p-4 transition-all duration-300 hover:border-blue-500/50 hover:bg-gray-700/50"
48							>
49								<div className="flex items-center space-x-4">
50									{link.iconName && (
51										<DynamicIcon
52											name={link.iconName as IconName}
53											size={24}
54											color={link.color}
55											className="transition-transform duration-300 group-hover:scale-110"
56										/>
57									)}
58									<span className="font-medium">{link.name}</span>
59									<span className="ml-auto text-gray-400 transition-transform duration-300 group-hover:translate-x-1">
60										→
61									</span>
62								</div>
63								{/* Hover effect */}
64								<div className="absolute inset-0 -z-10 bg-gradient-to-r from-transparent via-blue-500/10 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
65							</a>
66						))}
67					</motion.div>
68				</motion.div>
69			</div>
70		</Layout>
71	)
72}
73