Merge pull request #105 from ubc-biztech/blueprint-profile-backend

Blueprint profile backend

src/components/companion/blueprintProfiles/additionalLinks.tsx

@@ -1,30 +1,54 @@
 import { FC } from 'react';
 import { AnimatedBorder } from '../../ui/animated-border';
+import ChainLinkIcon from "../../../../public/assets/icons/chain_link.svg";
+import Image from 'next/image'
 
 interface UserProfile {
-    additionalLink: string;
+    additionalLink?: string | string[];
 }
 
 interface AdditionalLinksProps {
     userData: UserProfile;
 }
 
 const AdditionalLinks: FC<AdditionalLinksProps> = ({ userData }) => {
+
+    const renderLinks = () => {
+        if (!userData.additionalLink) return null;
+
+        const links = Array.isArray(userData.additionalLink) ? userData.additionalLink : [userData.additionalLink];
+
+        return (
+            <ul className="list-none p-0 m-0">
+                {links.map((link, index) => (
+                    <li key={index} className="mb-2">
+                        <a
+                            href={link}
+                            className="text-xs sm:text-sm font-satoshi underline break-all hover:text-purple-400 transition-colors max-w-none sm:max-w-none truncate flex"
+                        >
+                            <Image src={ChainLinkIcon}
+                                alt="Linkedin Icon"
+                                width={16}
+                                height={16}
+                                className='mr-2'
+                            />
+                            {link}
+                        </a>
+                    </li>
+                ))}
+            </ul>
+        );
+    };
+
     return (
         <AnimatedBorder className="w-full mb-3 sm:mb-4">
             <div className="rounded-lg p-3 sm:p-4">
-                <span className="text-xs sm:text-sm text-light-grey font-mono mb-1 sm:mb-2">ADDITIONAL LINK</span>
+                <span className="text-xs sm:text-sm text-light-grey font-redhat mb-1 sm:mb-2">ADDITIONAL LINKS</span>
                 <div className="flex justify-between items-center">
-                    <a
-                        href={userData.additionalLink}
-                        className="text-xs sm:text-sm font-satoshi underline break-all hover:text-purple-400 transition-colors max-w-none sm:max-w-none truncate flex"
-                    >
-                        <img src="/assets/icons/chain_link.svg" alt="chain-link" className="mx-1 w-4 h-6 sm:w-4 sm:h-6" />
-                        {userData.additionalLink}
-                    </a>
+                    {renderLinks()}
                 </div>
             </div>
-        </ AnimatedBorder>
+        </AnimatedBorder>
     );
 };
 

src/components/companion/blueprintProfiles/attendeeInfo.tsx

@@ -30,12 +30,12 @@ const AttendeeInfo: FC<{ userData: UserProfile }> = ({ userData }) => {
                     )}
 
                     {/* Hobby Card */}
-                    {userData?.hobby && (
+                    {userData?.pronouns && (
                         <div className="col-span-2">
                             <p className="text-xs sm:text-sm text-light-grey font-redhat mb-1 sm:mb-2">
-                                FAVOURITE HOBBY
+                                PRONOUNS
                             </p>
-                            <p className="text-xs sm:text-sm font-satoshi">{userData.hobby}</p>
+                            <p className="text-xs sm:text-sm font-satoshi">{userData.pronouns}</p>
                         </div>
                     )}
                 </div>

src/components/companion/blueprintProfiles/delegateInfo.tsx

@@ -1,32 +1,37 @@
 import { CompanionButton } from '../../ui/companion-button';
 import { AnimatedBorder } from '../../ui/animated-border';
+import { Avatar } from "@/components/ui/avatar";
+import { AvatarFallback, AvatarImage } from "@radix-ui/react-avatar";
 
 import { FC } from 'react';
 import { UserProfile } from '@/types';
 
 
 const CompanyInfo: FC<{ userData: UserProfile }> = ({ userData }) => {
-    const visitPageLink = `/companion/profile/company/${userData.company}`
+    const visitPageLink = `/companion/profile/company/${userData.companyProfileID}`
     return (
         <AnimatedBorder className="w-full mb-3">
             <div className="rounded-lg py-6 pl-2">
                 <div className="flex flex-col items-center justify-center">
                     {/* Logo and Info Section */}
                     <div className="flex flex-col xs:flex-row items-center gap-4">
-                        <div className="">
-                            <img
-                                src={userData.companyLogoUrl}
-                                alt={`${userData.company}-logo`}
-                                className="w-24 h-24 sm:w-48 sm:h-48 rounded-full object-cover"
-                            />
-                        </div>
+                        <Avatar
+                            className={`w-20 h-20 sm:w-24 sm:h-24 rounded-full bg-baby-blue flex items-center justify-center text-xl sm:text-2xl font-bold mb-3 sm:mb-4 text-black`}
+                        >
+                            {userData.companyProfilePictureURL && (
+                                <AvatarImage src={userData.companyProfilePictureURL} className="w-full h-full object-cover rounded-full" />
+                            )}
+                            <AvatarFallback>{userData?.company?.[0]?.toUpperCase()}</AvatarFallback> 
+                        </Avatar>
                         <div className="flex flex-col gap-4 sm:gap-6 md:gap-8">
                             <div className="flex justify-between items-center">
                                 <div className="flex flex-col">
                                     <span className="text-xs text-light-grey font-redhat">COMPANY</span>
-                                    <span className="text-sm font-satoshi">
-                                        {userData.company}
-                                    </span>
+                                    {userData.company && (
+                                        <span className="text-sm font-satoshi">
+                                            {userData.company}
+                                        </span>
+                                    )}
                                 </div>
                                 <div className="ml-4 sm:ml-6 md:ml-8 mr-3">
                                     <CompanionButton href={visitPageLink}>
@@ -38,15 +43,19 @@ const CompanyInfo: FC<{ userData: UserProfile }> = ({ userData }) => {
                             <div className="flex justify-between gap-8 items-center">
                                 <div className="flex flex-col">
                                     <span className="text-xs text-light-grey font-mono">ROLE</span>
-                                    <span className="text-sm font-satoshi">
-                                        {userData.role}
-                                    </span>
+                                    {userData.role && (
+                                        <span className="text-sm font-satoshi">
+                                            {userData.role}
+                                        </span>
+                                    )}
                                 </div>
                                 <div className="flex flex-col ml-4 sm:ml-6 md:ml-8 mr-3">
-                                    <span className="text-xs text-light-grey font-mono">FAVOURITE HOBBY</span>
-                                    <span className="text-sm font-satoshi">
-                                        {userData.hobby}
-                                    </span>
+                                    <span className="text-xs text-light-grey font-mono">PRONOUNS</span>
+                                    {userData.pronouns && (
+                                        <span className="text-sm font-satoshi">
+                                            {userData.pronouns}
+                                        </span>
+                                    )}
                                 </div>
                             </div>
                         </div>

src/components/companion/blueprintProfiles/extraInfo.tsx

@@ -4,13 +4,15 @@ import { CompanionButton } from '../../ui/companion-button';
 import { AnimatedBorder } from '../../ui/animated-border';
 import { UserProfile } from '@/types';
 import ResponseSection from './responseSection';
+import LinkedinIcon from "../../../../public/assets/icons/linkedIn_bp_user.svg";
+import Image from 'next/image';
 
 const ExtraInfo: FC<{ userData: UserProfile }> = ({ userData }) => {
 
     const handleVisitPage = () => {
         if (typeof window !== 'undefined') {
             // Normalize the LinkedIn URL
-            let linkedInUrl = userData.linkedIn.trim();
+            let linkedInUrl = userData.linkedIn?.trim() || '';
 
             // Ensure the URL starts with "https://"
             if (!/^https?:\/\//i.test(linkedInUrl)) {
@@ -25,40 +27,52 @@ const ExtraInfo: FC<{ userData: UserProfile }> = ({ userData }) => {
     return (
         <>
             {/* LinkedIn Section */}
-            <AnimatedBorder className="w-ful mb-3 sm:mb-4">
-                <div className="rounded-lg p-1 sm:p-4 flex justify-between items-center">
-                    <div className="w-full flex items-center gap-2 sm:gap-3 p-3 sm:p-4">
-                        <img src="/assets/icons/linkedin_bp_user.svg" alt="linkedin-logo" className="w-8 h-8 sm:w-10 sm:h-10" />
-                        <div className="flex flex-col">
-                            <span className="text-xs sm:text-sm text-light-grey font-redhat">LINKEDIN</span>
-                            <span className="text-xs sm:text-sm font-satoshi truncate max-w-[135px] xs:max-w-[180px] sm:max-w-none">
-                                {userData.linkedIn}
-                            </span>
+            {userData.linkedIn && (
+                <AnimatedBorder className="w-ful mb-3 sm:mb-4">
+                    <div className="rounded-lg p-1 sm:p-4 flex justify-between items-center">
+                        <div className="w-full flex items-center gap-2 sm:gap-3 p-3 sm:p-4">
+                            <Image src={LinkedinIcon}
+                                alt="Linkedin Icon"
+                                width={40}
+                                height={40}
+                            />
+                            <div className="flex flex-col">
+                                <span className="text-xs sm:text-sm text-light-grey font-redhat">LINKEDIN</span>
+                                <span className="text-xs sm:text-sm font-satoshi truncate max-w-[135px] xs:max-w-[180px] sm:max-w-none">
+                                    {userData.linkedIn}
+                                </span>
+                            </div>
+                        </div>
+                        <div className='px-4 py-2'>
+                            <CompanionButton onClick={handleVisitPage}>
+                                <span className="text-[12px] translate-y-[1px] hidden mxs:inline">VISIT PAGE</span>
+                                <span className="text-lg translate-y-[-3px]">↗</span>
+                            </CompanionButton>
                         </div>
                     </div>
-                    <div className='px-4 py-2'>
-                        <CompanionButton onClick={handleVisitPage}>
-                            <span className="text-[12px] translate-y-[1px] hidden mxs:inline">VISIT PAGE</span>
-                            <span className="text-lg translate-y-[-3px]">↗</span>
-                        </CompanionButton>
-                    </div>
-                </div>
-            </ AnimatedBorder>
+                </AnimatedBorder>
+            )}
 
             {/* Interests */}
-            {userData.interests && (
-                <ResponseSection title="HOBBIES & INTERESTS" list={userData.interests} />
+            {userData.hobby1 && (
+                <ResponseSection
+                    title="HOBBIES & INTERESTS"
+                    list={[userData.hobby1, ...(userData.hobby2 ? [userData.hobby2] : [])]}
+                />
             )}
 
-            {userData.responseList && userData.responseList[1] && (
-                <ResponseSection title="IF I WAS STRANDED ON AN ISLAND, THE TECH FIGURE I WOULD WANT TO BE STRANDED WITH WOULD BE..." text={userData.responseList[1]} />
+            {userData.funQuestion1 && (
+                <ResponseSection title="IF I WAS STRANDED ON AN ISLAND, THE TECH FIGURE I WOULD WANT TO BE STRANDED WITH WOULD BE..." text={userData.funQuestion1} />
             )}
 
-            {userData.responseList && userData.responseList[2] && (
-                <ResponseSection title="IF I COULD PRESENT ONE EARTHLY INVENTION TO AN ALIEN, I WOULD PRESENT..." text={userData.responseList[2]} />
+            {userData.funQuestion2 && (
+                <ResponseSection title="IF I COULD PRESENT ONE EARTHLY INVENTION TO AN ALIEN, I WOULD PRESENT..." text={userData.funQuestion2} />
             )}
 
-            <AdditionalLinks userData={userData} />
+            {/* Only render additional links if they're given */}
+            {userData.additionalLink && (
+                <AdditionalLinks userData={userData} />
+            )}
         </>
     );
 };

src/components/companion/blueprintProfiles/profileHeader.tsx

@@ -2,27 +2,50 @@ import { FC } from 'react';
 import { Avatar } from "@/components/ui/avatar";
 import { AvatarFallback, AvatarImage } from "@radix-ui/react-avatar";
 
-interface UserProfile {
-    name: string;
-    role: string;
-    profilePicUrl?: string;
+interface CompanyProfile {
+    fname?: string;
+    lname?: string;
+    name?: string;
+    type?: string;
+    profilePictureURL?: string;
 }
 
 interface ProfileProps {
-    userData: UserProfile;
+    userData: CompanyProfile;
 }
 
 const Profile: FC<ProfileProps> = ({ userData }) => {
+    let initials = '';
+    let name = '';
+
+    if (userData.fname && userData.lname) {
+        initials = userData.fname[0] + userData.lname[0];
+        name = userData.fname + " " + userData.lname;
+    }
+
+    if (userData.name) {
+        initials = userData.name[0];
+        name = userData.name;
+    }
+
+    const handleImageError = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
+        event.currentTarget.src = ''; // Set to a default image URL or leave empty for fallback initials
+    };
+
     return (
         <div className="flex flex-col items-center mb-6 sm:mb-8">
             <Avatar
                 className={`w-20 h-20 sm:w-24 sm:h-24 rounded-full bg-baby-blue flex items-center justify-center text-xl sm:text-2xl font-bold mb-3 sm:mb-4 text-black`}
             >
-                <AvatarImage src={userData?.profilePicUrl} className="w-full h-full object-cover rounded-full" />
-                <AvatarFallback>{userData.name.split(' ').map((n: string) => n[0]).join('')}</AvatarFallback>
+                <AvatarImage 
+                    src={userData.profilePictureURL || ''} 
+                    className="w-full h-full object-cover rounded-full" 
+                    onError={handleImageError}
+                />
+                <AvatarFallback>{initials}</AvatarFallback>
             </Avatar>
-            <h5 className="text-xl sm:text-2xl text-center text-white font-sans mb-1">{userData.name}</h5>
-            <p className="text-xs sm:text-sm text-light-grey uppercase font-redhat">{userData.role}</p>
+            <h5 className="text-xl sm:text-2xl text-center text-white font-sans mb-1">{name}</h5>
+            <p className="text-xs sm:text-sm text-light-grey uppercase font-redhat">{userData.type}</p>
         </div>
     );
 };

src/components/ui/connected-button.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+interface ConnectedButtonProps {
+  href?: string;
+  children: React.ReactNode;
+  className?: string;}
+
+export const ConnectedButton: React.FC<ConnectedButtonProps> = ({
+  children,
+  className,
+}) => {
+  const ButtonContent = (
+    <Button 
+      variant="ghost" 
+      size="sm" 
+      className={cn(
+        "relative bg-black text-neon-green hover:text-white hover:bg-neon-green/10 transition-all rounded-full py-5 px-5",
+        "font-redhat tracking-wider text-xs font-[300] backdrop-blur-sm flex items-center gap-1.5",
+        "before:absolute before:inset-0 before:rounded-full",
+        "before:bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.10),rgba(255,255,255,0.25)_98%)]",
+        "before:pointer-events-none",
+        "border border-neon-green/80",
+        className
+      )}
+    >
+      {children}
+    </Button>
+  );
+
+  return ButtonContent;
+}; 

src/pages/companion/index.tsx

@@ -101,6 +101,9 @@ const Companion = () => {
       repeat: Infinity,
       ease: "linear",
       repeatDelay: 0.5
+    },
+    whileHover: {
+      x: '0%' // Stops the animation on hover
     }
   };
 
@@ -127,11 +130,9 @@ const Companion = () => {
     logo: "w-1/2 sm:w-3/5 mb-5 relative",
     title: "text-2xl font-bold mb-2 text-white font-satoshi",
     description: "text-center mb-4 text-white p1 font-satoshi",
-    input:
-      "mb-4 w-64 font-satoshi text-white backdrop-blur-sm bg-white/5 border-white/10 transition-all duration-300 focus:bg-white/10 focus:border-white/20",
-    button:
-      "mb-4 font-satoshi relative overflow-hidden bg-[#1E88E5] hover:bg-[#1976D2] text-white px-8 py-2 rounded-full transition-all duration-300 shadow-[0_0_15px_rgba(30,136,229,0.3)] hover:shadow-[0_0_20px_rgba(30,136,229,0.5)]",
-    buttonShine: "absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent",
+    input: "mb-4 w-64 font-satoshi text-white backdrop-blur-sm bg-white/5 border-white/10 transition-all duration-300 focus:bg-white/10 focus:border-white/20",
+    button: "mb-4 font-satoshi relative overflow-hidden bg-[#1E88E5] hover:bg-[#1976D2] text-white px-8 py-2 rounded-full transition-all duration-300 shadow-[0_0_15px_rgba(30,136,229,0.3)] hover:shadow-[0_0_20px_rgba(30,136,229,0.5)]",
+    buttonShine: "absolute inset-0 transform bg-gradient-to-r from-[#1E88E5] hover:from-[#1976D2] via-white/20 hover:to-[#1976D2] to-[#1E88E5]",
     error: "text-red-500 text-center w-4/5 font-satoshi"
   };