feat: Added logos and contact information to the member card

src/components/members/MemberViewCard.tsx

@@ -1,17 +1,136 @@
+import { Mail } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Image from 'next/image';
+import ExternalLink from 'next/link';
+
+import { Link } from '@/lib/navigation';
 import { cx } from '@/lib/utils';
 
+import { Facebook } from '@/components/assets/icons/Facebook';
+import { Github } from '@/components/assets/icons/Github';
+import { Instagram } from '@/components/assets/icons/Instagram';
+import { Linkedin } from '@/components/assets/icons/Linkedin';
+import { Slack } from '@/components/assets/icons/Slack';
+import { InternalBadge } from '@/components/members/InternalBadge';
 import {
   MemberCard,
   type MemberCardProps,
 } from '@/components/members/MemberCard';
+import { Button } from '@/components/ui/Button';
+import {
+  Card,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/Card';
 
-function MemberViewCard(props: MemberCardProps) {
+function MemberViewCard({
+  className,
+  id,
+  internal,
+  name,
+  group,
+  photoUrl,
+  bio,
+  mail,
+  instagram,
+  discord,
+  github,
+  linkedin,
+}: MemberCardProps) {
+  const t = useTranslations('layout');
   return (
-    <MemberCard
-      {...props}
-      className={cx('custom-styling', props.className)} // Apply custom styling
-    />
+    <Card className='relative flex w-2/5 overflow-hidden rounded-xl bg-blue-500'>
+      <InternalBadge internal={internal} />
+
+      <div className='flex w-full flex-col items-center justify-center'>
+        <div className='relative m-6 size-64'>
+          <Image
+            className='rounded-full object-cover'
+            src={`/${photoUrl}`}
+            alt={name}
+            fill
+          />
+        </div>
+        <h3 className='mt-4 text-center'>{name}</h3>
+        <h5 className='text-center'>{group}</h5>
+        <p className='m-10 text-center'>{bio}</p>
+
+        <ul className='grid grid-flow-row grid-cols-2-auto justify-start text-foreground/80 sm:grid-cols-3-auto xl:grid-flow-col xl:grid-cols-none'>
+          <li>
+            <Button asChild variant='ghost' size='sm-icon'>
+              <ExternalLink
+                href={`mailto:${mail}`}
+                aria-label={t('sendAnEmail')}
+              >
+                <Mail className='h-4 w-4' />
+              </ExternalLink>
+            </Button>
+          </li>
+          <li>
+            <Button asChild variant='ghost' size='sm-icon'>
+              <ExternalLink
+                href={linkedin}
+                prefetch={false}
+                aria-label={t('visitFacebook')}
+                target='_blank'
+                rel='noopener noreferrer'
+              >
+                <Linkedin className='h-4 w-4' />
+              </ExternalLink>
+            </Button>
+          </li>
+          <li>
+            <Button asChild variant='ghost' size='sm-icon'>
+              <ExternalLink
+                href=''
+                prefetch={false}
+                aria-label={t('visitFacebook')}
+                target='_blank'
+                rel='noopener noreferrer'
+              >
+                <Facebook className='h-4 w-4' />
+              </ExternalLink>
+            </Button>
+          </li>
+          <li>
+            <Button asChild variant='ghost' size='sm-icon'>
+              <ExternalLink
+                href='https://github.com/hackerspace-ntnu/'
+                prefetch={false}
+                aria-label={t('visitGithub')}
+                target='_blank'
+                rel='noopener noreferrer'
+              >
+                <Github className='h-4 w-4' />
+              </ExternalLink>
+            </Button>
+          </li>
+          <li>
+            <Button asChild variant='ghost' size='sm-icon'>
+              <ExternalLink
+                href='https://www.instagram.com/hackerspacentnu/'
+                prefetch={false}
+                aria-label={t('visitInstagram')}
+                target='_blank'
+                rel='noopener noreferrer'
+              >
+                <Instagram className='h-4 w-4' />
+              </ExternalLink>
+            </Button>
+          </li>
+        </ul>
+      </div>
+
+      {/*
+          <CardHeader className='mt-auto w-full p-4 lg:p-6'>
+            <CardTitle className='line-clamp-1 text-lg transition-colors group-hover:text-primary sm:text-xl lg:text-2xl'>
+              {name}
+            </CardTitle>
+            <CardDescription className='line-clamp-1 text-xs sm:text-sm'>hei</CardDescription>
+          </CardHeader> */}
+    </Card>
   );
 }
 
-export { MemberViewCard };
+export { MemberViewCard, type MemberCardProps };