diff --git a/public/assets/icons/chain-icon.svg b/public/assets/icons/chain-icon.svg new file mode 100644 index 0000000..a1a99c8 --- /dev/null +++ b/public/assets/icons/chain-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/people-icon.svg b/public/assets/icons/people-icon.svg new file mode 100644 index 0000000..1fc21d6 --- /dev/null +++ b/public/assets/icons/people-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/phone-manager-icon.svg b/public/assets/icons/phone-manager-icon.svg new file mode 100644 index 0000000..8026d3f --- /dev/null +++ b/public/assets/icons/phone-manager-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/shield-verified-icon.svg b/public/assets/icons/shield-verified-icon.svg new file mode 100644 index 0000000..2c65278 --- /dev/null +++ b/public/assets/icons/shield-verified-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/app/(agent)/agent/dashboard/component/ProfileCard.tsx b/src/app/(agent)/agent/dashboard/component/ProfileCard.tsx index 60b73b6..1d18c07 100644 --- a/src/app/(agent)/agent/dashboard/component/ProfileCard.tsx +++ b/src/app/(agent)/agent/dashboard/component/ProfileCard.tsx @@ -95,7 +95,10 @@ export function ProfileCard({ /> Message - + diff --git a/src/app/(agent)/agent/dashboard/component/ProfileHeader.tsx b/src/app/(agent)/agent/dashboard/component/ProfileHeader.tsx deleted file mode 100644 index 03efdab..0000000 --- a/src/app/(agent)/agent/dashboard/component/ProfileHeader.tsx +++ /dev/null @@ -1,141 +0,0 @@ -'use client'; - -import Image from 'next/image'; -import { Button } from '@/components/ui/Button'; -import { Tag } from './Tag'; - -interface ProfileHeaderProps { - name: string; - isVerified: boolean; - title: string; - location: string; - memberSince: string; - bio: string; - expertise: string[]; -} - -export function ProfileHeader({ - name, - isVerified, - title, - location, - memberSince, - bio, - expertise, -}: ProfileHeaderProps) { - const [firstName, lastName] = name.split(' '); - - return ( -
- {/* Name and Actions Row */} -
-
- {/* Name and Verification */} -
-

- {firstName}{' '} - {lastName} -

- {isVerified && ( - <> - Verified - - (Verified Expert) - - - )} - -
- - {/* Title */} -

{title}

- - {/* Location and Member Since */} -
- - Location - {location} - - - Calendar - Member Since {memberSince} - -
-
- - {/* Action Buttons */} -
-
- - -
-
- - -
-
-
- - {/* Bio */} -

{bio}

- - {/* Expertise Tags */} -
-

Expertise:

-
- {expertise.map((tag, idx) => ( - {tag} - ))} -
-
-
- ); -} diff --git a/src/app/(agent)/agent/dashboard/component/index.ts b/src/app/(agent)/agent/dashboard/component/index.ts index 19b39cd..3ccb869 100644 --- a/src/app/(agent)/agent/dashboard/component/index.ts +++ b/src/app/(agent)/agent/dashboard/component/index.ts @@ -4,7 +4,6 @@ export { Tag } from './Tag'; export { InfoCard } from './InfoCard'; export { SpecializationCard } from './SpecializationCard'; export { ProfileSidebar } from './ProfileSidebar'; -export { ProfileHeader } from './ProfileHeader'; export { ProfileCard } from './ProfileCard'; export { ExperienceSection } from './ExperienceSection'; export { SpecializationSection } from './SpecializationSection'; diff --git a/src/app/(agent)/agent/network/component/InvitationCard.tsx b/src/app/(agent)/agent/network/component/InvitationCard.tsx new file mode 100644 index 0000000..3b9ff1a --- /dev/null +++ b/src/app/(agent)/agent/network/component/InvitationCard.tsx @@ -0,0 +1,90 @@ +'use client'; + +import Image from 'next/image'; + +interface InvitationCardProps { + id: string; + name: string; + avatar: string; + description: string; + mutualConnection?: string; + onAccept?: (id: string) => void; + onIgnore?: (id: string) => void; +} + +export function InvitationCard({ + id, + name, + avatar, + description, + mutualConnection, + onAccept, + onIgnore, +}: InvitationCardProps) { + return ( +
+ {/* Avatar */} +
+ {name} +
+ + {/* Content */} +
+ {/* Name with verified icon */} +
+

+ {name} +

+ Verified +
+ + {/* Description */} +

+ {description} +

+ + {/* Mutual Connection */} + {mutualConnection && ( +
+ Connection + + Mutual Connection With {mutualConnection} + +
+ )} +
+ + {/* Action Buttons */} +
+ + +
+
+ ); +} diff --git a/src/app/(agent)/agent/network/component/NetworkSidebar.tsx b/src/app/(agent)/agent/network/component/NetworkSidebar.tsx new file mode 100644 index 0000000..826a495 --- /dev/null +++ b/src/app/(agent)/agent/network/component/NetworkSidebar.tsx @@ -0,0 +1,56 @@ +'use client'; + +import Image from 'next/image'; +import Link from 'next/link'; + +interface NavItem { + label: string; + href: string; + icon: string; + isActive?: boolean; +} + +const navItems: NavItem[] = [ + { + label: 'Connections', + href: '/agent/network/connections', + icon: '/assets/icons/people-icon.svg', + isActive: true, + }, +]; + +export function NetworkSidebar() { + return ( +
+

+ Manage my network +

+ +
+ + +
+ ); +} diff --git a/src/app/(agent)/agent/network/page.tsx b/src/app/(agent)/agent/network/page.tsx new file mode 100644 index 0000000..38bac47 --- /dev/null +++ b/src/app/(agent)/agent/network/page.tsx @@ -0,0 +1,81 @@ +'use client'; + +import { NetworkSidebar } from './component/NetworkSidebar'; +import { InvitationCard } from './component/InvitationCard'; + +// Mock data for invitations +const invitations = [ + { + id: '1', + name: 'Sathish R', + avatar: '/assets/icons/user-placeholder-icon.svg', + description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', + mutualConnection: 'Anvar', + }, + { + id: '2', + name: 'Ragunath', + avatar: '/assets/icons/user-placeholder-icon.svg', + description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', + mutualConnection: 'Anvar', + }, + { + id: '3', + name: 'Sabari', + avatar: '/assets/icons/user-placeholder-icon.svg', + description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', + mutualConnection: 'Anvar', + }, +]; + +export default function NetworkPage() { + const handleAccept = (id: string) => { + console.log('Accepted invitation:', id); + }; + + const handleIgnore = (id: string) => { + console.log('Ignored invitation:', id); + }; + + return ( +
+ {/* Left Sidebar */} + + + {/* Main Content */} +
+ {/* Header Card */} +
+

+ Manage my network +

+
+ + {/* Invitations Card */} +
+ {/* Invitations Header */} +
+

+ Invitations ({invitations.length}) +

+ +
+ + {/* Invitations List */} +
+ {invitations.map((invitation) => ( + + ))} +
+
+
+
+ ); +} diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx index 32bab8c..23e5d19 100644 --- a/src/components/ui/Button.tsx +++ b/src/components/ui/Button.tsx @@ -17,7 +17,7 @@ export function Button({ className = '', ...props }: ButtonProps) { - const baseStyles = 'font-medium transition-all duration-200 inline-flex items-center justify-center'; + const baseStyles = 'font-medium transition-all duration-200 inline-flex items-center justify-center cursor-pointer'; const variants = { primary: 'bg-[#f5a623] text-white hover:bg-[#e09620] active:bg-[#c98a1c] rounded-lg',