Skip to content

Commit e0cc4f1

Browse files
Deepthi-ChandDeepthi-Chand
committed
update consumer site collaborative styling
1 parent d3127a2 commit e0cc4f1

File tree

5 files changed

+195
-153
lines changed

5 files changed

+195
-153
lines changed

‎app/[locale]/(user)/collaboratives/CollaborativesListingClient.tsx‎

Lines changed: 58 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
'use client';
22

3-
import { useState } from 'react';
3+
import BreadCrumbs from '@/components/BreadCrumbs';
4+
import { Icons } from '@/components/icons';
5+
import JsonLd from '@/components/JsonLd';
6+
import { Loading } from '@/components/loading';
47
import { graphql } from '@/gql';
58
import { TypeCollaborative } from '@/gql/generated/graphql';
6-
import { useQuery } from '@tanstack/react-query';
7-
import { Card, Text, Button, Icon } from 'opub-ui';
8-
99
import { GraphQLPublic } from '@/lib/api';
10-
import { formatDate } from '@/lib/utils';
11-
import { Icons } from '@/components/icons';
12-
import { Loading } from '@/components/loading';
13-
import BreadCrumbs from '@/components/BreadCrumbs';
10+
import { formatDate, generateJsonLd } from '@/lib/utils';
11+
import { useQuery } from '@tanstack/react-query';
12+
import Image from 'next/image';
13+
import { Button, Card, Icon, Text } from 'opub-ui';
14+
import { useState } from 'react';
1415

1516
const PublishedCollaboratives = graphql(`
1617
query PublishedCollaboratives {
@@ -104,8 +105,6 @@ const CollaborativesListingClient = () => {
104105
}
105106
);
106107

107-
console.log('Query state:', { isLoading, error, data: collaborativesData });
108-
109108
const collaboratives = collaborativesData?.publishedCollaboratives || [];
110109

111110
// Filter collaboratives based on search term and sector
@@ -122,26 +121,66 @@ const CollaborativesListingClient = () => {
122121
collaborative.sectors?.map((sector: any) => sector.name) || []
123122
);
124123
const uniqueSectors = [...new Set(allSectors)];
125-
124+
const jsonLd = generateJsonLd({
125+
'@context': 'https://schema.org',
126+
'@type': 'WebPage',
127+
name: 'CivicDataLab',
128+
url: `${process.env.NEXT_PUBLIC_PLATFORM_URL}/collaboratives`,
129+
description:
130+
'Explore collaborative data initiatives and partnerships that bring organizations together to create impactful solutions.',
131+
});
126132
return (
127-
<>
133+
<main>
134+
<JsonLd json={jsonLd} />
128135
<BreadCrumbs
129136
data={[
130137
{ href: '/', label: 'Home' },
131138
{ href: '/collaboratives', label: 'Collaboratives' },
132139
]}
133140
/>
141+
<>
142+
<>
143+
<div className="w-full">
144+
<div className=" bg-primaryBlue">
145+
<div className=" container flex flex-col-reverse items-center gap-8 py-10 lg:flex-row ">
146+
<div className="flex flex-col gap-5 ">
147+
<Text
148+
variant="heading2xl"
149+
fontWeight="bold"
150+
color="onBgDefault"
151+
>
152+
Our Collaboratives
153+
</Text>
154+
<Text
155+
variant="headingLg"
156+
color="onBgDefault"
157+
fontWeight="regular"
158+
className="leading-3 lg:leading-5"
159+
>
160+
By Collaboratives we mean a collective effort by several organisations
161+
in any specific sectors that can be applied to address some of the
162+
most pressing concerns from hyper-local to the global level simultaneously.
163+
</Text>
164+
</div>
165+
<div className="flex items-center justify-center gap-2 px-3 ">
166+
<Image
167+
src={'/collaborative.png'}
168+
alt={'collaborative'}
169+
width={600}
170+
height={316}
171+
className="m-auto h-auto w-full"
172+
/>
173+
</div>
174+
</div>
175+
</div>
176+
</div>
177+
</>
178+
</>
134179

135180
<div className="bg-onSurfaceDefault">
136181
<div className="container py-8 lg:py-14">
137182
{/* Header Section */}
138183
<div className="mb-8">
139-
<Text variant="heading2xl" className="mb-4">
140-
Data Collaboratives
141-
</Text>
142-
<Text variant="bodyLg" fontWeight="regular" className="mb-6">
143-
Explore collaborative data initiatives and partnerships that bring organizations together to create impactful solutions.
144-
</Text>
145184

146185
{/* Search and Filter Section */}
147186
<div className="flex flex-col gap-4 md:flex-row md:items-center md:gap-6">
@@ -278,7 +317,7 @@ const CollaborativesListingClient = () => {
278317
)}
279318
</div>
280319
</div>
281-
</>
320+
</main>
282321
);
283322
};
284323

‎app/[locale]/(user)/collaboratives/[collaborativeSlug]/CollaborativeDetailsClient.tsx‎

Lines changed: 127 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -300,7 +300,7 @@ const CollaborativeDetailClient = () => {
300300
{ href: '#', label: CollaborativeDetailsData?.collaborativeBySlug?.title || '' },
301301
]}
302302
/>
303-
<div className=" bg-onSurfaceDefault">
303+
<div className=" bg-primaryBlue">
304304
<div className="container flex flex-row">
305305
<div className="w-full border-solid border-greyExtralight py-8 pr-8 lg:w-3/4 lg:border-r-2 lg:py-10 lg:pr-8">
306306
<PrimaryDetails data={CollaborativeDetailsData} isLoading={isLoading} />
@@ -309,130 +309,7 @@ const CollaborativeDetailClient = () => {
309309
<Metadata data={CollaborativeDetailsData} />
310310
</div>
311311
</div>
312-
{/* Use Cases Section */}
313-
{useCases.length > 0 && (
314-
<div className="container py-8 lg:py-14">
315-
<div className=" flex flex-col gap-1 ">
316-
<Text variant="headingXl">Use Cases</Text>
317-
<Text variant="bodyLg" fontWeight="regular">
318-
Use Cases associated with this Collaborative
319-
</Text>
320-
</div>
321-
<div className="grid grid-cols-1 gap-6 pt-10 md:grid-cols-2 lg:grid-cols-3 ">
322-
{useCases.map((useCase: TypeUseCase) => (
323-
<Card
324-
key={useCase.id}
325-
title={useCase.title || ''}
326-
variation={'collapsed'}
327-
iconColor={'success'}
328-
metadataContent={[
329-
{
330-
icon: Icons.calendar,
331-
label: 'Started',
332-
value: formatDate(useCase.startedOn),
333-
},
334-
{
335-
icon: Icons.activity,
336-
label: 'Status',
337-
value: useCase.runningStatus?.split('_').join(' ') || 'N/A',
338-
},
339-
{
340-
icon: Icons.globe,
341-
label: 'Geography',
342-
value:
343-
useCase.metadata?.find(
344-
(meta: any) =>
345-
meta.metadataItem?.label === 'Geography'
346-
)?.value || '',
347-
},
348-
]}
349-
href={`/usecases/${useCase.slug}`}
350-
footerContent={[
351-
{
352-
icon: useCase.sectors && useCase.sectors[0]?.name
353-
? `/Sectors/${useCase.sectors[0].name}.svg`
354-
: '/Sectors/default.svg',
355-
label: 'Sectors',
356-
},
357-
{
358-
icon: useCase.isIndividualUsecase
359-
? useCase?.user?.profilePicture
360-
? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${useCase.user.profilePicture.url}`
361-
: '/profile.png'
362-
: useCase?.organization?.logo
363-
? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${useCase.organization.logo.url}`
364-
: '/org.png',
365-
label: 'Published by',
366-
},
367-
]}
368-
description={useCase.summary || ''}
369-
/>
370-
))}
371-
</div>
372-
</div>
373-
)}
374-
375-
{/* Datasets Section */}
376-
<div className="container py-8 lg:py-14">
377-
<div className=" flex flex-col gap-1 ">
378-
<Text variant="headingXl">Datasets in this Collaborative</Text>
379-
<Text variant="bodyLg" fontWeight="regular">
380-
Explore datasets related to this collaborative{' '}
381-
</Text>
382-
</div>
383-
<div className="grid grid-cols-1 gap-6 pt-10 md:grid-cols-2 lg:grid-cols-3 ">
384-
{datasets.length > 0 &&
385-
datasets.map((dataset: TypeDataset) => (
386-
<Card
387-
key={dataset.id}
388-
title={dataset.title}
389-
variation={'collapsed'}
390-
iconColor={'warning'}
391-
metadataContent={[
392-
{
393-
icon: Icons.calendar,
394-
label: 'Date',
395-
value: formatDate(dataset.modified),
396-
},
397-
{
398-
icon: Icons.download,
399-
label: 'Download',
400-
value: dataset.downloadCount.toString(),
401-
},
402-
{
403-
icon: Icons.globe,
404-
label: 'Geography',
405-
value:
406-
dataset.metadata?.find(
407-
(meta: any) =>
408-
meta.metadataItem?.label === 'Geography'
409-
)?.value || '',
410-
},
411-
]}
412-
href={`/datasets/${dataset.id}`}
413-
footerContent={[
414-
{
415-
icon: `/Sectors/${dataset.sectors[0]?.name}.svg`,
416-
label: 'Sectors',
417-
},
418-
{
419-
icon: dataset.isIndividualDataset
420-
? dataset?.user?.profilePicture
421-
? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${dataset.user.profilePicture.url}`
422-
: '/profile.png'
423-
: dataset?.organization?.logo
424-
? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${dataset.organization.logo.url}`
425-
: '/org.png',
426-
label: 'Published by',
427-
},
428-
]}
429-
description={dataset.description || ''}
430-
/>
431-
))}
432-
</div>
433-
</div>
434-
</div>
435-
{(hasSupportingOrganizations ||
312+
{(hasSupportingOrganizations ||
436313
hasPartnerOrganizations ||
437314
hasContributors) && (
438315
<div className=" bg-primaryBlue">
@@ -528,7 +405,132 @@ const CollaborativeDetailClient = () => {
528405
</div>
529406
)}
530407
</div>
408+
)}
409+
</div>
410+
<div className="container py-8 lg:py-14" color="onBgDefault">
411+
{/* Use Cases Section */}
412+
{useCases.length > 0 && (
413+
<div className="container py-8 lg:py-14">
414+
<div className=" flex flex-col gap-1 ">
415+
<Text variant="headingXl">Use Cases</Text>
416+
<Text variant="bodyLg" fontWeight="regular">
417+
Use Cases associated with this Collaborative
418+
</Text>
419+
</div>
420+
<div className="grid grid-cols-1 gap-6 pt-10 md:grid-cols-2 lg:grid-cols-3 ">
421+
{useCases.map((useCase: TypeUseCase) => (
422+
<Card
423+
key={useCase.id}
424+
title={useCase.title || ''}
425+
variation={'collapsed'}
426+
iconColor={'success'}
427+
metadataContent={[
428+
{
429+
icon: Icons.calendar,
430+
label: 'Started',
431+
value: formatDate(useCase.startedOn),
432+
},
433+
{
434+
icon: Icons.activity,
435+
label: 'Status',
436+
value: useCase.runningStatus?.split('_').join(' ') || 'N/A',
437+
},
438+
{
439+
icon: Icons.globe,
440+
label: 'Geography',
441+
value:
442+
useCase.metadata?.find(
443+
(meta: any) =>
444+
meta.metadataItem?.label === 'Geography'
445+
)?.value || '',
446+
},
447+
]}
448+
href={`/usecases/${useCase.slug}`}
449+
footerContent={[
450+
{
451+
icon: useCase.sectors && useCase.sectors[0]?.name
452+
? `/Sectors/${useCase.sectors[0].name}.svg`
453+
: '/Sectors/default.svg',
454+
label: 'Sectors',
455+
},
456+
{
457+
icon: useCase.isIndividualUsecase
458+
? useCase?.user?.profilePicture
459+
? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${useCase.user.profilePicture.url}`
460+
: '/profile.png'
461+
: useCase?.organization?.logo
462+
? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${useCase.organization.logo.url}`
463+
: '/org.png',
464+
label: 'Published by',
465+
},
466+
]}
467+
description={useCase.summary || ''}
468+
/>
469+
))}
470+
</div>
471+
</div>
531472
)}
473+
{/* Datasets Section */}
474+
<div className="container py-8 lg:py-14">
475+
<div className=" flex flex-col gap-1 ">
476+
<Text variant="headingXl">Datasets in this Collaborative</Text>
477+
<Text variant="bodyLg" fontWeight="regular">
478+
Explore datasets related to this collaborative{' '}
479+
</Text>
480+
</div>
481+
<div className="grid grid-cols-1 gap-6 pt-10 md:grid-cols-2 lg:grid-cols-3 ">
482+
{datasets.length > 0 &&
483+
datasets.map((dataset: TypeDataset) => (
484+
<Card
485+
key={dataset.id}
486+
title={dataset.title}
487+
variation={'collapsed'}
488+
iconColor={'warning'}
489+
metadataContent={[
490+
{
491+
icon: Icons.calendar,
492+
label: 'Date',
493+
value: formatDate(dataset.modified),
494+
},
495+
{
496+
icon: Icons.download,
497+
label: 'Download',
498+
value: dataset.downloadCount.toString(),
499+
},
500+
{
501+
icon: Icons.globe,
502+
label: 'Geography',
503+
value:
504+
dataset.metadata?.find(
505+
(meta: any) =>
506+
meta.metadataItem?.label === 'Geography'
507+
)?.value || '',
508+
},
509+
]}
510+
href={`/datasets/${dataset.id}`}
511+
footerContent={[
512+
{
513+
icon: `/Sectors/${dataset.sectors[0]?.name}.svg`,
514+
label: 'Sectors',
515+
},
516+
{
517+
icon: dataset.isIndividualDataset
518+
? dataset?.user?.profilePicture
519+
? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${dataset.user.profilePicture.url}`
520+
: '/profile.png'
521+
: dataset?.organization?.logo
522+
? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${dataset.organization.logo.url}`
523+
: '/org.png',
524+
label: 'Published by',
525+
},
526+
]}
527+
description={dataset.description || ''}
528+
/>
529+
))}
530+
</div>
531+
</div>
532+
</div>
533+
532534
</>
533535
)}
534536
</div>

0 commit comments

Comments
 (0)