Skip to content

Commit 73997b1

Browse files
0xdevcollins0xdevcollins
committed
feat: Enhance organization components and navbar layout
1 parent 20a035f commit 73997b1

12 files changed

Lines changed: 93 additions & 72 deletions

‎components/landing-page/Explore.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,7 @@ export default function Explore() {
171171
<div className='mt-10 grid w-fit grid-cols-1 gap-6 px-4 md:grid-cols-2 md:px-6 lg:grid-cols-3 xl:px-0'>
172172
{projects.map(project => (
173173
<ProjectCard
174+
isFullWidth={true}
174175
key={project.id}
175176
deadlineInDays={project.daysToDeadline || 0}
176177
votes={
@@ -208,7 +209,6 @@ export default function Explore() {
208209
))}
209210
</div>
210211

211-
{/* Footer */}
212212
<div className='mt-20 flex cursor-pointer items-center gap-1'>
213213
<Link href='/projects'>
214214
<p className='font-medium underline'>View More Opportunities</p>

‎components/landing-page/navbar.tsx‎

Lines changed: 28 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -171,12 +171,7 @@ export function Navbar() {
171171
className='sticky top-0 z-50 max-h-[88px] bg-[#030303A3] backdrop-blur-[12px]'
172172
>
173173
<div className='mx-auto max-w-[1440px] px-3 py-3 sm:px-6 sm:py-5 md:px-8 lg:px-12 xl:px-16 2xl:px-20'>
174-
<div
175-
className={cn(
176-
'grid grid-cols-2 items-center gap-3 sm:gap-6 md:grid-cols-[auto_1fr_auto] md:justify-items-center',
177-
isAuthenticated && 'md:justify-items-start'
178-
)}
179-
>
174+
<div className='flex items-center justify-between gap-3 sm:gap-6'>
180175
<div className='flex-shrink-0'>
181176
<Link
182177
ref={logoRef}
@@ -185,17 +180,27 @@ export function Navbar() {
185180
className='flex items-center'
186181
>
187182
<Image
188-
src='/auth/logo.svg'
183+
src='/logo-icon.png'
189184
alt='logo'
190-
width={width && width < 640 ? 90 : 116}
191-
height={width && width < 640 ? 18 : 22}
192-
className='transition-all duration-200'
185+
width={32}
186+
height={32}
187+
className='transition-all duration-200 lg:hidden'
188+
/>
189+
<Image
190+
src='/logo.png'
191+
alt='logo'
192+
width={140}
193+
height={28}
194+
className='hidden transition-all duration-200 lg:block'
193195
/>
194196
</Link>
195197
</div>
196198

197-
<div ref={menuRef} className='hidden md:block'>
198-
<div className='ml-6 flex items-baseline space-x-2 lg:ml-10 lg:space-x-4'>
199+
<div
200+
ref={menuRef}
201+
className='hidden md:flex md:flex-1 md:justify-center'
202+
>
203+
<div className='flex items-baseline space-x-2 lg:space-x-4'>
199204
{menuItems.map(item => (
200205
<Link
201206
key={item.href}
@@ -610,11 +615,18 @@ function MobileMenu({
610615
<div className='flex-shrink-0'>
611616
<Link ref={mobileLogoRef} href='/' className='flex items-center'>
612617
<Image
613-
src='/auth/logo.svg'
618+
src='/logo.png'
619+
alt='logo'
620+
width={116}
621+
height={22}
622+
className='transition-all duration-200 lg:hidden'
623+
/>
624+
<Image
625+
src='/logo.png'
614626
alt='logo'
615-
width={width && width < 640 ? 90 : 116}
616-
height={width && width < 640 ? 18 : 22}
617-
className='transition-all duration-200'
627+
width={140}
628+
height={28}
629+
className='hidden transition-all duration-200 lg:block'
618630
/>
619631
</Link>
620632
</div>

‎components/organization/OrganizationContent.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export default function OrganizationContent() {
7171
<OrganizationCard
7272
id={org._id}
7373
name={org.name}
74-
logo={org.logo || ''}
74+
logo={org.logo}
7575
createdAt={org.createdAt}
7676
hackathons={{ count: 0, submissions: 0 }}
7777
grants={{ count: 0, applications: 0 }}

‎components/organization/OrganizationHeader.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export default function OrganizationHeader() {
3737
/>
3838
</div>
3939

40-
<Link href='/'>
40+
<Link href='/organizations'>
4141
<button className='hover:text-primary/80 flex items-center gap-2 text-gray-600 transition-colors'>
4242
<Building2 className='h-5 w-5' />
4343
<span className='text-sm font-medium'>Home</span>

‎components/organization/OrganizationSettings.tsx‎

Lines changed: 36 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import ProfileTab from './tabs/ProfileTab';
88
import LinksTab from './tabs/LinksTab';
99
import MembersTab from './tabs/MembersTab';
1010
import TransferOwnershipTab from './tabs/TransferOwnershipTab';
11+
import { ScrollArea, ScrollBar } from '../ui/scroll-area';
1112
interface OrganizationSettingsProps {
1213
organizationId?: string;
1314
initialData?: {
@@ -41,7 +42,10 @@ export default function OrganizationSettings({
4142
};
4243

4344
return (
44-
<div className='flex-1 bg-black text-white' id={organizationId}>
45+
<div
46+
className='flex-1 overflow-hidden bg-black text-white'
47+
id={organizationId}
48+
>
4549
<Tabs defaultValue='profile' className='w-full'>
4650
<div className='border-b border-zinc-800 px-6 md:px-20'>
4751
<div className='flex items-center gap-4'>
@@ -55,34 +59,37 @@ export default function OrganizationSettings({
5559
</button>
5660
<div className='h-[50px] w-[0.5px] bg-gray-900 md:hidden' />
5761

58-
<div className='scrollbar-hide overflow-x-auto'>
59-
<TabsList className='inline-flex h-auto gap-10 bg-transparent p-0'>
60-
<TabsTrigger
61-
value='profile'
62-
className='data-[state=active]:border-b-primary rounded-none border-b-2 border-transparent bg-transparent px-0 pt-4 pb-3 text-sm font-medium text-zinc-400 transition-all data-[state=active]:text-white data-[state=active]:shadow-none'
63-
>
64-
Profile
65-
</TabsTrigger>
66-
<TabsTrigger
67-
value='links'
68-
className='data-[state=active]:border-b-primary rounded-none border-b-2 border-transparent bg-transparent px-0 pt-4 pb-3 text-sm font-medium text-zinc-400 transition-all data-[state=active]:text-white data-[state=active]:shadow-none'
69-
>
70-
Links
71-
</TabsTrigger>
72-
<TabsTrigger
73-
value='members'
74-
className='data-[state=active]:border-b-primary rounded-none border-b-2 border-transparent bg-transparent px-0 pt-4 pb-3 text-sm font-medium text-zinc-400 transition-all data-[state=active]:text-white data-[state=active]:shadow-none'
75-
>
76-
Members
77-
</TabsTrigger>
78-
<TabsTrigger
79-
value='transfer'
80-
className='data-[state=active]:border-b-primary rounded-none border-b-2 border-transparent bg-transparent px-0 pt-4 pb-3 text-sm font-medium text-zinc-400 transition-all data-[state=active]:text-white data-[state=active]:shadow-none'
81-
>
82-
Transfer Ownership
83-
</TabsTrigger>
84-
</TabsList>
85-
</div>
62+
<ScrollArea className='w-full'>
63+
<div className='flex w-max min-w-full'>
64+
<TabsList className='inline-flex h-auto gap-10 bg-transparent p-0'>
65+
<TabsTrigger
66+
value='profile'
67+
className='data-[state=active]:border-b-primary rounded-none border-b-2 border-transparent bg-transparent px-0 pt-4 pb-3 text-sm font-medium text-zinc-400 transition-all data-[state=active]:text-white data-[state=active]:shadow-none'
68+
>
69+
Profile
70+
</TabsTrigger>
71+
<TabsTrigger
72+
value='links'
73+
className='data-[state=active]:border-b-primary rounded-none border-b-2 border-transparent bg-transparent px-0 pt-4 pb-3 text-sm font-medium text-zinc-400 transition-all data-[state=active]:text-white data-[state=active]:shadow-none'
74+
>
75+
Links
76+
</TabsTrigger>
77+
<TabsTrigger
78+
value='members'
79+
className='data-[state=active]:border-b-primary rounded-none border-b-2 border-transparent bg-transparent px-0 pt-4 pb-3 text-sm font-medium text-zinc-400 transition-all data-[state=active]:text-white data-[state=active]:shadow-none'
80+
>
81+
Members
82+
</TabsTrigger>
83+
<TabsTrigger
84+
value='transfer'
85+
className='data-[state=active]:border-b-primary rounded-none border-b-2 border-transparent bg-transparent px-0 pt-4 pb-3 text-sm font-medium text-zinc-400 transition-all data-[state=active]:text-white data-[state=active]:shadow-none'
86+
>
87+
Transfer Ownership
88+
</TabsTrigger>
89+
</TabsList>
90+
</div>
91+
<ScrollBar orientation='horizontal' className='h-px' />
92+
</ScrollArea>
8693
</div>
8794
</div>
8895

‎components/organization/cards/OrganizationSelector.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ export default function OrganizationSelector({
108108
<Button className='flex items-center gap-3 bg-transparent px-3 py-2 transition-colors hover:bg-transparent focus:ring-0 focus-visible:ring-0'>
109109
<div className='relative h-10 w-10 overflow-hidden rounded-full bg-white'>
110110
<Image
111-
src={selectedOrg.logo || '/boundless.png'}
111+
src={selectedOrg.logo || ''}
112112
alt={selectedOrg.name || 'Organization'}
113113
fill
114114
className='object-cover'
@@ -137,7 +137,7 @@ export default function OrganizationSelector({
137137
>
138138
<div className='relative h-8 w-8 flex-shrink-0 overflow-hidden rounded-full bg-white'>
139139
<Image
140-
src={org.logo || '/placeholder.svg'}
140+
src={org.logo || ''}
141141
alt={org.name}
142142
fill
143143
className='object-cover'

‎components/organization/cards/OrganzationCards.tsx‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export default function OrganizationCard({
3131
onClick={() => router.push(`/organizations/${id}/settings`)}
3232
className='hover:shadow-primary/10 cursor-pointer rounded-xl border border-zinc-800 bg-black transition-shadow duration-300 hover:shadow-lg'
3333
>
34-
<div className='rounded-xl border border-zinc-800 bg-zinc-900 px-6 pt-6 pb-1'>
34+
<div className='rounded-xl border border-zinc-800 bg-zinc-900 px-4 pt-4 pb-1 md:px-6 md:pt-6'>
3535
<div className='mb-6 flex items-start gap-4'>
3636
<div className='flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-lg'>
3737
<Image
@@ -44,17 +44,21 @@ export default function OrganizationCard({
4444
</div>
4545
<div className='min-w-0 flex-1'>
4646
<h3 className='mb-1 text-lg font-semibold text-white'>{name}</h3>
47-
<p className='text-sm text-zinc-500'>Created {createdAt}</p>
47+
<p className='text-sm text-zinc-500'>
48+
Created {new Date(createdAt).toLocaleDateString()}
49+
</p>
4850
</div>
4951
</div>
5052

5153
<div className='mb-6 grid grid-cols-2 gap-4'>
52-
<div className='rounded-lg border border-zinc-800 bg-black p-4'>
54+
<div className='rounded-lg border border-zinc-800 bg-black p-2.5 md:p-4'>
5355
<div className='mb-2 flex items-center gap-2'>
54-
<div className='bg-active-bg grid h-7 w-7 place-content-center rounded-lg border-[0.5px] border-[rgba(167,249,80,0.24)] md:h-10 md:w-10'>
56+
<div className='bg-active-bg grid max-h-7 min-h-7 max-w-7 min-w-7 place-content-center rounded-lg border-[0.5px] border-[rgba(167,249,80,0.24)] md:h-10 md:w-10'>
5557
<Trophy className='text-primary h-3 w-3 md:h-4 md:w-4' />
5658
</div>
57-
<span className='text-sm font-medium text-white'>Hackathons</span>
59+
<span className='text-xs font-medium text-white sm:text-sm'>
60+
Hackathons
61+
</span>
5862
</div>
5963
<div className='my-2 text-2xl font-semibold text-white'>
6064
{hackathons.count}
@@ -78,12 +82,14 @@ export default function OrganizationCard({
7882
</div>
7983
</div>
8084

81-
<div className='rounded-lg border border-zinc-800 bg-black p-4'>
85+
<div className='rounded-lg border border-zinc-800 bg-black p-2.5 md:p-4'>
8286
<div className='mb-2 flex items-center gap-2'>
8387
<div className='bg-active-bg grid h-7 w-7 place-content-center rounded-lg border-[0.5px] border-[rgba(167,249,80,0.24)] md:h-10 md:w-10'>
8488
<HandCoins className='text-primary h-3 w-3 md:h-4 md:w-4' />
8589
</div>
86-
<span className='text-sm font-medium text-white'>Grants</span>
90+
<span className='text-xs font-medium text-white sm:text-sm'>
91+
Grants
92+
</span>
8793
</div>
8894
<div className='my-2 text-2xl font-semibold text-white'>
8995
{grants.count}

‎components/organization/tabs/ProfileTab.tsx‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -358,7 +358,7 @@ export default function ProfileTab({ initialData, onSave }: ProfileTabProps) {
358358
onDragLeave={handleDragLeave}
359359
onDrop={handleDrop}
360360
className={cn(
361-
'hover:border-primary flex h-32 w-32 cursor-pointer items-center justify-center rounded-[12px] border border-[#2B2B2B] bg-[#101010] transition-colors xl:h-[200px] xl:w-[200px]',
361+
'hover:border-primary flex h-32 w-32 cursor-pointer items-center justify-center overflow-hidden rounded-[12px] border border-[#2B2B2B] bg-[#101010] transition-colors xl:h-[200px] xl:w-[200px]',
362362
(isSaving || isUploading) && 'cursor-not-allowed opacity-50',
363363
isDragOver && 'border-primary bg-primary/10 scale-105'
364364
)}
@@ -371,18 +371,14 @@ export default function ProfileTab({ initialData, onSave }: ProfileTabProps) {
371371
<span className='text-primary text-xs'>Uploading...</span>
372372
</div>
373373
) : (
374-
<>
375-
<div className='relative h-32 w-32 overflow-hidden rounded-[12px]'>
376-
<Image
377-
src={formData.logo || logoPreview || ''}
378-
alt='Logo preview'
379-
fill
380-
sizes='128px'
381-
className='object-cover'
382-
/>
383-
</div>
384-
<span className='text-xs text-white'>Change</span>
385-
</>
374+
<Image
375+
src={formData.logo || logoPreview || ''}
376+
alt='Logo preview'
377+
width={400}
378+
height={400}
379+
sizes='128px'
380+
className='h-full w-full object-cover'
381+
/>
386382
)}
387383
</div>
388384
) : isDragOver ? (

‎lib/providers/OrganizationProvider.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -322,7 +322,7 @@ export function OrganizationProvider({
322322
.map(org => ({
323323
_id: (org._id as string) ?? (org.id as string),
324324
name: (org.name as string) || 'Unnamed Organization',
325-
logo: (org.logo as string) || '',
325+
logo: (org.avatar as string) || '',
326326
tagline: (org.tagline as string) || '',
327327
isProfileComplete: Boolean(org.isProfileComplete),
328328
role: org.owner === response.email ? 'owner' : 'member',

‎lib/providers/organization-types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Organization } from '../api/types';
33
export interface OrganizationSummary {
44
_id: string;
55
name: string;
6-
logo?: string;
6+
logo: string;
77
tagline?: string;
88
isProfileComplete: boolean;
99
role: 'owner' | 'member';

0 commit comments

Comments
 (0)