Skip to content

Commit 472f2d6

Browse files
AbhishekfmAbhishekfm
authored
Merge pull request #383 from CivicDataLab/fix/collabrative-card
New card design configured overall the platform
2 parents cadb0f2 + f07607f commit 472f2d6

31 files changed

Lines changed: 633 additions & 899 deletions

File tree

‎app/[locale]/(user)/aimodels/[modelId]/components/Versions/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export default function Versions({ data }: VersionsProps) {
7272
header: 'Last Updated',
7373
cell: ({ row }: any) => (
7474
<Text variant="bodyMd">
75-
{formatDate(row.original.updatedAt || row.original.createdAt)}
75+
{formatDate(row.original.updatedAt || row.original.createdAt) || ''}
7676
</Text>
7777
),
7878
},

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

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -218,7 +218,7 @@ const CollaborativesListingClient = () => {
218218
</Text>
219219

220220
{/* Search and Filter Section */}
221-
<div className="flex flex-wrap gap-6 lg:flex-nowrap">
221+
<div className="flex flex-wrap gap-6 pt-4 lg:flex-nowrap">
222222
<SearchInput
223223
label={''}
224224
className={cn('w-full', Styles.Search)}
@@ -312,9 +312,10 @@ const CollaborativesListingClient = () => {
312312
// imageUrl={`${process.env.NEXT_PUBLIC_BACKEND_URL}/${collaborative.logo?.path.replace('/code/files/', '')}`}
313313
metadataContent={[
314314
{
315-
icon: Icons.calendar as any,
315+
icon: Icons.calendarEvent as any,
316316
label: 'Started',
317-
value: formatDate(collaborative.startedOn) || 'N/A',
317+
value: formatDate(collaborative.startedOn) || '',
318+
stroke: 1.2,
318319
},
319320
{
320321
icon: Icons.dataset as any,
@@ -323,7 +324,7 @@ const CollaborativesListingClient = () => {
323324
collaborative.datasetCount?.toString() || '0',
324325
},
325326
{
326-
icon: Icons.globe as ComponentType<any>,
327+
icon: Icons.worldPin as ComponentType<any>,
327328
label: 'Geography',
328329
value:
329330
collaborative.geographies &&
@@ -332,16 +333,19 @@ const CollaborativesListingClient = () => {
332333
.map((geo: any) => geo.name)
333334
.join(', ')
334335
: 'N/A',
336+
stroke: 1.2,
335337
},
336338
]}
337339
href={`/collaboratives/${collaborative.slug}`}
338-
footerContent={[
340+
leftFooterChips={[
339341
{
340342
icon: collaborative.sectors?.[0]?.name
341343
? `/Sectors/${collaborative.sectors[0].name}.svg`
342344
: '/Sectors/default.svg',
343345
label: 'Sectors',
344346
},
347+
]}
348+
rightFooterChips={[
345349
{
346350
icon: collaborative.isIndividualCollaborative
347351
? collaborative?.user?.profilePicture

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

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -441,23 +441,25 @@ const CollaborativeDetailClient = () => {
441441

442442
const MetadataContent = [
443443
{
444-
icon: Icons.calendar as any,
444+
icon: Icons.calendarEvent as any,
445445
label: 'Date',
446-
value: formatDate(useCase.modified),
446+
value: formatDate(useCase.modified) || '',
447447
tooltip: 'Date',
448+
stroke: 1.2,
448449
},
449450
];
450451

451452
if (Geography) {
452453
MetadataContent.push({
453-
icon: Icons.globe as any,
454+
icon: Icons.worldPin as any,
454455
label: 'Geography',
455456
value: Geography,
456457
tooltip: 'Geography',
458+
stroke: 1.2,
457459
});
458460
}
459461

460-
const FooterContent = [
462+
const LeftFooterChips = [
461463
{
462464
icon:
463465
useCase.sectors && useCase.sectors[0]?.name
@@ -466,6 +468,8 @@ const CollaborativeDetailClient = () => {
466468
label: 'Sectors',
467469
tooltip: useCase.sectors?.[0]?.name || 'Sector',
468470
},
471+
];
472+
const RightFooterChips = [
469473
{
470474
icon: image,
471475
label: 'Published by',
@@ -478,9 +482,10 @@ const CollaborativeDetailClient = () => {
478482
const commonProps = {
479483
title: useCase.title || '',
480484
description: stripMarkdown(useCase.summary || ''),
481-
metadataContent: MetadataContent,
485+
metadataContent: MetadataContent as any,
482486
tag: useCase.tags?.map((t: any) => t.value) || [],
483-
footerContent: FooterContent,
487+
leftFooterChips: LeftFooterChips,
488+
rightFooterChips: RightFooterChips,
484489
imageUrl: '',
485490
};
486491

@@ -511,7 +516,7 @@ const CollaborativeDetailClient = () => {
511516
Explore datasets related to this collaborative{' '}
512517
</Text>
513518
</div>
514-
<div className="grid grid-cols-1 gap-6 pt-10 md:grid-cols-2 lg:grid-cols-3 ">
519+
<div className="grid grid-cols-1 gap-6 pt-10 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 ">
515520
{datasets.length > 0 &&
516521
datasets.map((dataset: TypeDataset) => (
517522
<Card
@@ -521,17 +526,19 @@ const CollaborativeDetailClient = () => {
521526
iconColor={'warning'}
522527
metadataContent={[
523528
{
524-
icon: Icons.calendar as any,
529+
icon: Icons.calendarEvent as any,
525530
label: 'Date',
526-
value: formatDate(dataset.modified),
531+
value: formatDate(dataset.modified) || '',
532+
stroke: 1.2,
527533
},
528534
{
529-
icon: Icons.download as any,
535+
icon: Icons.fileDownload as any,
530536
label: 'Download',
531537
value: dataset.downloadCount.toString(),
538+
stroke: 1.2,
532539
},
533540
{
534-
icon: Icons.globe as any,
541+
icon: Icons.worldPin as any,
535542
label: 'Geography',
536543
value:
537544
dataset.geographies &&
@@ -540,14 +547,17 @@ const CollaborativeDetailClient = () => {
540547
.map((geo: any) => geo.name)
541548
.join(', ')
542549
: '',
550+
stroke: 1.2,
543551
},
544552
]}
545553
href={`/datasets/${dataset.id}`}
546-
footerContent={[
554+
leftFooterChips={[
547555
{
548556
icon: `/Sectors/${dataset.sectors[0]?.name}.svg`,
549557
label: 'Sectors',
550558
},
559+
]}
560+
rightFooterChips={[
551561
{
552562
icon: dataset.isIndividualDataset
553563
? dataset?.user?.profilePicture
@@ -560,6 +570,7 @@ const CollaborativeDetailClient = () => {
560570
},
561571
]}
562572
description={stripMarkdown(dataset.description || '')}
573+
withViewButton={false}
563574
/>
564575
))}
565576
</div>

‎app/[locale]/(user)/components/Datasets.tsx‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ const Datasets = () => {
8686

8787
<CarouselContent className="p-4">
8888
{isLoading ? (
89-
<DatasetListingSkeleton cardCount={3} cardsOnly={true} />
89+
<DatasetListingSkeleton cardCount={4} cardsOnly={true} />
9090
) : (
9191
facets?.results?.map((item: any) => {
9292
const geographies =
@@ -102,7 +102,7 @@ const Datasets = () => {
102102
<CarouselItem
103103
key={item.id}
104104
className={cn(
105-
'h-2/4 basis-full pl-4 sm:basis-1/2 lg:basis-1/3',
105+
'h-2/4 basis-full pl-4 sm:basis-1/2 md:basis-1/3 lg:basis-1/4',
106106
Styles.List
107107
)}
108108
>
@@ -112,7 +112,7 @@ const Datasets = () => {
112112
description={stripMarkdown(item.description)}
113113
metadataContent={[
114114
{
115-
icon: Icons.calendar as any,
115+
icon: Icons.calendarEvent as any,
116116
label: 'Date',
117117
value: new Date(item.modified).toLocaleDateString(
118118
'en-US',
@@ -122,28 +122,33 @@ const Datasets = () => {
122122
year: 'numeric',
123123
}
124124
),
125+
stroke: 1.2,
125126
},
126127
{
127-
icon: Icons.download as any,
128+
icon: Icons.fileDownload as any,
128129
label: 'Download',
129-
value: item.download_count.toString(),
130+
value: item.download_count || 0,
131+
stroke: 1.2,
130132
},
131133
{
132-
icon: Icons.globe,
134+
icon: Icons.worldPin,
133135
label: 'Geography',
134136
value:
135137
geographies.length > 0
136138
? geographies.join(', ')
137-
: 'Not specified',
139+
: '',
140+
stroke: 1.2,
138141
},
139142
]}
140143
tag={item.tags}
141144
formats={item.formats}
142-
footerContent={[
145+
leftFooterChips={[
143146
{
144147
icon: `/Sectors/${item.sectors[0]}.svg`,
145148
label: 'Sectors',
146149
},
150+
]}
151+
rightFooterChips={[
147152
{
148153
icon: item.is_individual_dataset
149154
? item?.user?.profile_picture
@@ -158,6 +163,7 @@ const Datasets = () => {
158163
variation={'collapsed'}
159164
iconColor="metadata"
160165
href={`/datasets/${item.id}`}
166+
withViewButton={false}
161167
// type={[
162168
// {
163169
// label: 'Dataset',

‎app/[locale]/(user)/components/ListingComponent.tsx‎

Lines changed: 28 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -548,19 +548,21 @@ const ListingComponent: React.FC<ListingProps> = ({
548548

549549
const MetadataContent = [
550550
{
551-
icon: Icons.calendar as any,
551+
icon: Icons.calendarEvent as any,
552552
label: 'Date',
553-
value: formatDate(item.modified),
553+
value: formatDate(item.modified) || '',
554554
tooltip: 'Date',
555+
stroke: 1.2,
555556
},
556557
];
557558

558559
if (item.download_count > 0) {
559560
MetadataContent.push({
560-
icon: Icons.download as any,
561+
icon: Icons.fileDownload as any,
561562
label: 'Download',
562-
value: item.download_count?.toString() || '0',
563+
value: item.download_count || 0,
563564
tooltip: 'Download',
565+
stroke: 1.2,
564566
});
565567
}
566568

@@ -569,10 +571,11 @@ const ListingComponent: React.FC<ListingProps> = ({
569571
const geoDisplay = geographies.join(', ');
570572

571573
MetadataContent.push({
572-
icon: Icons.globe as any,
574+
icon: Icons.worldPin as any,
573575
label: 'Geography',
574576
value: geoDisplay,
575577
tooltip: geoDisplay,
578+
stroke: 1.2,
576579
});
577580
}
578581

@@ -587,6 +590,7 @@ const ListingComponent: React.FC<ListingProps> = ({
587590
label: 'SDG Goals',
588591
value: sdgDisplay,
589592
tooltip: sdgDisplay,
593+
stroke: 1.2,
590594
});
591595
}
592596

@@ -596,10 +600,11 @@ const ListingComponent: React.FC<ListingProps> = ({
596600
label: '',
597601
value: 'With Charts',
598602
tooltip: 'Charts',
603+
stroke: 1.2,
599604
});
600605
}
601606

602-
const FooterContent = [
607+
const LeftFooterChips = [
603608
{
604609
icon: `/Sectors/${item.sectors?.[0]}.svg` as any,
605610
label: 'Sectors',
@@ -614,6 +619,9 @@ const ListingComponent: React.FC<ListingProps> = ({
614619
},
615620
]
616621
: []),
622+
];
623+
624+
const RightFooterChips = [
617625
{
618626
icon: image as any,
619627
label: 'Published by',
@@ -624,10 +632,11 @@ const ListingComponent: React.FC<ListingProps> = ({
624632
const commonProps = {
625633
title: item.title,
626634
description: stripMarkdown(item.description || ''),
627-
metadataContent: MetadataContent,
635+
metadataContent: MetadataContent as any,
628636
tag: item.tags,
629637
formats: item.formats,
630-
footerContent: FooterContent,
638+
leftFooterChips: LeftFooterChips,
639+
rightFooterChips: RightFooterChips,
631640
imageUrl: '',
632641
};
633642

@@ -651,14 +660,17 @@ const ListingComponent: React.FC<ListingProps> = ({
651660
? 'usecase-card'
652661
: undefined
653662
}
654-
{...(type === 'usecase' && {
655-
type: [
656-
{
657-
label: 'Use Case',
658-
fillColor: '#fff',
659-
borderColor: '#000',
660-
},
661-
],
663+
// {...(type === 'usecase' && {
664+
// type: [
665+
// {
666+
// label: 'Use Case',
667+
// fillColor: '#fff',
668+
// borderColor: '#000',
669+
// },
670+
// ],
671+
// })}
672+
{...(type === 'dataset' && {
673+
withViewButton: false,
662674
})}
663675
/>
664676
);

0 commit comments

Comments
 (0)