Add links

src/app/links.tsx → src/app/links/page.tsx

@@ -1,5 +1,5 @@
 import type { NextPage } from 'next'
-import { LinksPage } from '../features/links/delivery/links.page'
+import { LinksPage } from '../../features/links/delivery/links.page'
 
 const Index: NextPage = () => {
   return <LinksPage />

src/components/ui/card.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)} {...props} />
+))
+Card.displayName = 'Card'
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+  ),
+)
+CardHeader.displayName = 'CardHeader'
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cn('text-2xl font-semibold leading-none tracking-tight', className)} {...props} />
+  ),
+)
+CardTitle.displayName = 'CardTitle'
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+  ),
+)
+CardDescription.displayName = 'CardDescription'
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />,
+)
+CardContent.displayName = 'CardContent'
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+  ),
+)
+CardFooter.displayName = 'CardFooter'
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

src/core/components/page/page.tsx

@@ -4,9 +4,9 @@ import { Footer } from '../footer/footer'
 
 export const Page: FC<PropsWithChildren> = ({ children }) => {
   return (
-    <div>
+    <div className="flex flex-col min-h-screen">
       <Navbar className="w-full" />
-      <main className="pt-16">{children}</main>
+      <main className="pt-16 flex-grow">{children}</main>
       <Footer />
     </div>
   )

src/features/links/delivery/links.page.tsx

@@ -1,68 +1,74 @@
 import type { FC } from 'react'
-import { useTranslations } from 'next-intl'
 import { Page } from '../../../core/components/page/page'
 import { Link } from '../../../core/components/link/link'
-import Image from 'next/image'
-import instagram from '../../../../public/assets/icons/instagram.svg'
-import x from '../../../../public/assets/icons/x.svg'
-import youtube from '../../../../public/assets/icons/youtube.svg'
-import github from '../../../../public/assets/icons/github.svg'
-import tiktok from '../../../../public/assets/icons/tiktok.svg'
-import linkedin from '../../../../public/assets/icons/linkedin.svg'
-import email from '../../../../public/assets/icons/email.svg'
+import {
+  SiGithub,
+  SiInstagram,
+  SiLinkedin,
+  SiStackoverflow,
+  SiTiktok,
+  SiX,
+  SiYoutube,
+} from '@icons-pack/react-simple-icons'
+import { Mail } from 'lucide-react'
+import { Card } from '@/components/ui/card'
 
 const links = [
   {
     title: 'Instagram',
     url: 'https://instagram.com/cesalberca',
-    icon: instagram,
+    icon: SiInstagram,
   },
   {
     title: 'X',
     url: 'https://x.com/cesalberca',
-    icon: x,
+    icon: SiX,
   },
   {
     title: 'TikTok',
     url: 'https://www.tiktok.com/@cesalberca',
-    icon: tiktok,
+    icon: SiTiktok,
   },
   {
     title: 'Youtube',
     url: 'https://www.youtube.com/@cesalberca',
-    icon: youtube,
+    icon: SiYoutube,
   },
   {
     title: 'LinkedIn',
     url: 'https://www.linkedin.com/in/cesalberca',
-    icon: linkedin,
+    icon: SiLinkedin,
   },
   {
     title: 'Github',
     url: 'https://github.com/cesalberca',
-    icon: github,
+    icon: SiGithub,
+  },
+  {
+    title: 'StackOverflow',
+    url: 'https://stackoverflow.com/users/6475656/césar-alberca',
+    icon: SiStackoverflow,
+  },
+  {
+    title: 'Email',
+    url: 'mailto:cesar@cesalberca.com',
+    icon: Mail,
   },
 ]
 
 export const LinksPage: FC = () => {
-  const t = useTranslations()
   return (
     <Page>
-      <h1>{t('links.title')}</h1>
-      <section>
-        {links.map(x => (
-          <div key={x.title}>
-            <Image src={x.icon} alt={x.title} height={20} />
-            <Link type={'navigation'} to={x.url}>
-              {x.title}
-            </Link>
-          </div>
-        ))}
-        <div>
-          <Image src={email} alt={'Email'} height={20} />
-          <Link type={'navigation'} to={'mailto:cesar@cesalberca.com'}>
-            Email
-          </Link>
+      <section className="wrapper flex flex-col gap-m items-center my-l">
+        <div className="flex flex-col gap-m">
+          {links.map(x => (
+            <Card key={x.title} className="flex gap-s py-s px-l">
+              <x.icon />
+              <Link type={'invisible'} to={x.url}>
+                {x.title}
+              </Link>
+            </Card>
+          ))}
         </div>
       </section>
     </Page>