diff --git a/app/profile/[username]/page.tsx b/app/profile/[username]/page.tsx index f9b017149..7e15152fb 100644 --- a/app/profile/[username]/page.tsx +++ b/app/profile/[username]/page.tsx @@ -1,4 +1,5 @@ 'use client'; +import ProfileOverview from '@/components/profile/ProfileOverview'; import { useEffect, useState } from 'react'; interface ProfilePageProps { @@ -33,6 +34,7 @@ export default function ProfilePage({ params }: ProfilePageProps) {

Profile: {username}

+ ); } diff --git a/components/profile/OrganizationCard.tsx b/components/profile/OrganizationCard.tsx new file mode 100644 index 000000000..9b1d087bb --- /dev/null +++ b/components/profile/OrganizationCard.tsx @@ -0,0 +1,24 @@ +import Image from 'next/image'; +import { Organization } from '@/types/profile'; + +interface OrganizationCardProps { + organization: Organization; +} + +export default function OrganizationCard({ + organization, +}: OrganizationCardProps) { + return ( +
+
+ {`${organization.name} +
+

{organization.name}

+
+ ); +} diff --git a/components/profile/OrganizationsList.tsx b/components/profile/OrganizationsList.tsx new file mode 100644 index 000000000..3b98afa40 --- /dev/null +++ b/components/profile/OrganizationsList.tsx @@ -0,0 +1,21 @@ +import { Organization } from '@/types/profile'; +import OrganizationCard from './OrganizationCard'; + +interface OrganizationsListProps { + organizations: Organization[]; +} + +export default function OrganizationsList({ + organizations, +}: OrganizationsListProps) { + return ( +
+
ORGANIZATIONS
+
+ {organizations.map(org => ( + + ))} +
+
+ ); +} diff --git a/components/profile/ProfileHeader.tsx b/components/profile/ProfileHeader.tsx new file mode 100644 index 000000000..431a91530 --- /dev/null +++ b/components/profile/ProfileHeader.tsx @@ -0,0 +1,65 @@ +import Image from 'next/image'; +import Link from 'next/link'; +import { UserProfile } from '@/types/profile'; +import { BoundlessButton } from '@/components/buttons'; +import { BellPlus } from 'lucide-react'; +import { ProfileSocialLinks } from '@/lib/config'; + +interface ProfileHeaderProps { + profile: UserProfile; +} + +export default function ProfileHeader({ profile }: ProfileHeaderProps) { + return ( +
+
+
+ {`${profile.displayName} +
+
+

{profile.displayName}

+

@{profile.username}

+
+
+

{profile.bio}

+
+ {Object.entries(ProfileSocialLinks).map(([name, href], index) => ( +
+ + {`${name} + + {index < Object.keys(ProfileSocialLinks).length - 1 && ( + + ))} +
+
+ + Follow + + + share{' '} + Share icon + +
+
+ ); +} diff --git a/components/profile/ProfileOverview.tsx b/components/profile/ProfileOverview.tsx new file mode 100644 index 000000000..4636b2aa1 --- /dev/null +++ b/components/profile/ProfileOverview.tsx @@ -0,0 +1,48 @@ +'use client'; + +import ProfileHeader from './ProfileHeader'; +import UserStats from './UserStats'; +import OrganizationsList from './OrganizationsList'; +import { + UserProfile, + UserStats as UserStatsType, + Organization, +} from '@/types/profile'; + +interface ProfileOverviewProps { + username: string; +} + +export default function ProfileOverview({ username }: ProfileOverviewProps) { + const mockProfile: UserProfile = { + username: username, + displayName: 'Collins Odumeje', + bio: 'To build a secure, transparent, and trusted digital health ecosystem powered by Sonic blockchain for 280M lives in Indonesia.', + avatarUrl: '/team/45d9f6d1-7e6d-41c7-8b16-a045d36e835f.png', + socialLinks: { + twitter: 'https://twitter.com/boundless', + linkedin: 'https://linkedin.com/in/boundless', + github: 'https://github.com/boundless', + }, + }; + + const mockStats: UserStatsType = { + organizations: 3, + projects: 3, + following: 10, + followers: 5, + }; + + const mockOrganizations: Organization[] = [ + { name: 'Organization 1', avatarUrl: '/blog1.jpg' }, + { name: 'Organization 2', avatarUrl: '/blog2.jpg' }, + ]; + + return ( +
+ + + +
+ ); +} diff --git a/components/profile/UserStats.tsx b/components/profile/UserStats.tsx new file mode 100644 index 000000000..99059804e --- /dev/null +++ b/components/profile/UserStats.tsx @@ -0,0 +1,36 @@ +import type { UserStats as UserStatsType } from '@/types/profile'; + +interface UserStatsProps { + stats: UserStatsType; +} + +export default function UserStats({ stats }: UserStatsProps) { + return ( +
+
+ + {stats.organizations} + + Organizations +
+
+ + {stats.projects} + + Projects +
+
+ + {stats.following} + + Following +
+
+ + {stats.followers} + + Followers +
+
+ ); +} diff --git a/lib/config.ts b/lib/config.ts index 1b26bb3d4..9d17434af 100644 --- a/lib/config.ts +++ b/lib/config.ts @@ -10,6 +10,13 @@ export const socialLinks = { telegram: 'https://t.me/boundlessfi', gmail: 'hello@boundlessfi.xyz', }; +export const ProfileSocialLinks = { + discord: 'https://discord.gg/boundlessfi', + telegram: 'https://t.me/boundlessfi', + github: 'https://github.com/boundlessfi', + linkedin: 'https://www.linkedin.com/company/boundlesshq/', + x: 'https://x.com/boundless_fi', +}; export const backedBy = [ { diff --git a/package-lock.json b/package-lock.json index 7e863fd88..0679d586e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15034,111 +15034,6 @@ "optional": true } } - }, - "node_modules/@next/swc-darwin-x64": { - "version": "15.5.3", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.5.3.tgz", - "integrity": "sha512-w83w4SkOOhekJOcA5HBvHyGzgV1W/XvOfpkrxIse4uPWhYTTRwtGEM4v/jiXwNSJvfRvah0H8/uTLBKRXlef8g==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-linux-arm64-gnu": { - "version": "15.5.3", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.5.3.tgz", - "integrity": "sha512-+m7pfIs0/yvgVu26ieaKrifV8C8yiLe7jVp9SpcIzg7XmyyNE7toC1fy5IOQozmr6kWl/JONC51osih2RyoXRw==", - "cpu": [ - "arm64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-linux-arm64-musl": { - "version": "15.5.3", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.5.3.tgz", - "integrity": "sha512-u3PEIzuguSenoZviZJahNLgCexGFhso5mxWCrrIMdvpZn6lkME5vc/ADZG8UUk5K1uWRy4hqSFECrON6UKQBbQ==", - "cpu": [ - "arm64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-linux-x64-gnu": { - "version": "15.5.3", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.5.3.tgz", - "integrity": "sha512-lDtOOScYDZxI2BENN9m0pfVPJDSuUkAD1YXSvlJF0DKwZt0WlA7T7o3wrcEr4Q+iHYGzEaVuZcsIbCps4K27sA==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-linux-x64-musl": { - "version": "15.5.3", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.5.3.tgz", - "integrity": "sha512-9vWVUnsx9PrY2NwdVRJ4dUURAQ8Su0sLRPqcCCxtX5zIQUBES12eRVHq6b70bbfaVaxIDGJN2afHui0eDm+cLg==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-win32-arm64-msvc": { - "version": "15.5.3", - "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.5.3.tgz", - "integrity": "sha512-1CU20FZzY9LFQigRi6jM45oJMU3KziA5/sSG+dXeVaTm661snQP6xu3ykGxxwU5sLG3sh14teO/IOEPVsQMRfA==", - "cpu": [ - "arm64" - ], - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-win32-x64-msvc": { - "version": "15.5.3", - "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.5.3.tgz", - "integrity": "sha512-JMoLAq3n3y5tKXPQwCK5c+6tmwkuFDa2XAxz8Wm4+IVthdBZdZGh+lmiLUHg9f9IDwIQpUjp+ysd6OkYTyZRZw==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 10" - } } } } diff --git a/public/share.svg b/public/share.svg new file mode 100644 index 000000000..bf2f4af97 --- /dev/null +++ b/public/share.svg @@ -0,0 +1,3 @@ + + + diff --git a/types/profile.ts b/types/profile.ts new file mode 100644 index 000000000..efc6ab118 --- /dev/null +++ b/types/profile.ts @@ -0,0 +1,19 @@ +export interface UserProfile { + username: string; + displayName: string; + bio: string; + avatarUrl: string; + socialLinks: Record; +} + +export interface UserStats { + organizations: number; + projects: number; + following: number; + followers: number; +} + +export interface Organization { + name: string; + avatarUrl: string; +}