Skip to content

New card design configured overall the platform #383

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Abhishekfm merged 1 commit into from
Mar 30, 2026
Merged

New card design configured overall the platform #383

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/[locale]/(user)/aimodels/[modelId]/components/Versions/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export default function Versions({ data }: VersionsProps) {
header: 'Last Updated',
cell: ({ row }: any) => (
<Text variant="bodyMd">
{formatDate(row.original.updatedAt || row.original.createdAt)}
{formatDate(row.original.updatedAt || row.original.createdAt) || ''}
</Text>
),
},
Expand Down
14 changes: 9 additions & 5 deletions app/[locale]/(user)/collaboratives/CollaborativesListingClient.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,7 +218,7 @@ const CollaborativesListingClient = () => {
</Text>

{/* Search and Filter Section */}
<div className="flex flex-wrap gap-6 lg:flex-nowrap">
<div className="flex flex-wrap gap-6 pt-4 lg:flex-nowrap">
<SearchInput
label={''}
className={cn('w-full', Styles.Search)}
Expand Down Expand Up @@ -312,9 +312,10 @@ const CollaborativesListingClient = () => {
// imageUrl={`${process.env.NEXT_PUBLIC_BACKEND_URL}/${collaborative.logo?.path.replace('/code/files/', '')}`}
metadataContent={[
{
icon: Icons.calendar as any,
icon: Icons.calendarEvent as any,
label: 'Started',
value: formatDate(collaborative.startedOn) || 'N/A',
value: formatDate(collaborative.startedOn) || '',
stroke: 1.2,
},
{
icon: Icons.dataset as any,
Expand All @@ -323,7 +324,7 @@ const CollaborativesListingClient = () => {
collaborative.datasetCount?.toString() || '0',
},
{
icon: Icons.globe as ComponentType<any>,
icon: Icons.worldPin as ComponentType<any>,
label: 'Geography',
value:
collaborative.geographies &&
Expand All @@ -332,16 +333,19 @@ const CollaborativesListingClient = () => {
.map((geo: any) => geo.name)
.join(', ')
: 'N/A',
stroke: 1.2,
},
]}
href={`/collaboratives/${collaborative.slug}`}
footerContent={[
leftFooterChips={[
{
icon: collaborative.sectors?.[0]?.name
? `/Sectors/${collaborative.sectors[0].name}.svg`
: '/Sectors/default.svg',
label: 'Sectors',
},
]}
rightFooterChips={[
{
icon: collaborative.isIndividualCollaborative
? collaborative?.user?.profilePicture
Expand Down
35 changes: 23 additions & 12 deletions app/[locale]/(user)/collaboratives/[collaborativeSlug]/CollaborativeDetailsClient.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -441,23 +441,25 @@ const CollaborativeDetailClient = () => {

const MetadataContent = [
{
icon: Icons.calendar as any,
icon: Icons.calendarEvent as any,
label: 'Date',
value: formatDate(useCase.modified),
value: formatDate(useCase.modified) || '',
tooltip: 'Date',
stroke: 1.2,
},
];

if (Geography) {
MetadataContent.push({
icon: Icons.globe as any,
icon: Icons.worldPin as any,
label: 'Geography',
value: Geography,
tooltip: 'Geography',
stroke: 1.2,
});
}

const FooterContent = [
const LeftFooterChips = [
{
icon:
useCase.sectors && useCase.sectors[0]?.name
Expand All @@ -466,6 +468,8 @@ const CollaborativeDetailClient = () => {
label: 'Sectors',
tooltip: useCase.sectors?.[0]?.name || 'Sector',
},
];
const RightFooterChips = [
{
icon: image,
label: 'Published by',
Expand All @@ -478,9 +482,10 @@ const CollaborativeDetailClient = () => {
const commonProps = {
title: useCase.title || '',
description: stripMarkdown(useCase.summary || ''),
metadataContent: MetadataContent,
metadataContent: MetadataContent as any,
tag: useCase.tags?.map((t: any) => t.value) || [],
footerContent: FooterContent,
leftFooterChips: LeftFooterChips,
rightFooterChips: RightFooterChips,
imageUrl: '',
};

Expand Down Expand Up @@ -511,7 +516,7 @@ const CollaborativeDetailClient = () => {
Explore datasets related to this collaborative{' '}
</Text>
</div>
<div className="grid grid-cols-1 gap-6 pt-10 md:grid-cols-2 lg:grid-cols-3 ">
<div className="grid grid-cols-1 gap-6 pt-10 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 ">
{datasets.length > 0 &&
datasets.map((dataset: TypeDataset) => (
<Card
Expand All @@ -521,17 +526,19 @@ const CollaborativeDetailClient = () => {
iconColor={'warning'}
metadataContent={[
{
icon: Icons.calendar as any,
icon: Icons.calendarEvent as any,
label: 'Date',
value: formatDate(dataset.modified),
value: formatDate(dataset.modified) || '',
stroke: 1.2,
},
{
icon: Icons.download as any,
icon: Icons.fileDownload as any,
label: 'Download',
value: dataset.downloadCount.toString(),
stroke: 1.2,
},
{
icon: Icons.globe as any,
icon: Icons.worldPin as any,
label: 'Geography',
value:
dataset.geographies &&
Expand All @@ -540,14 +547,17 @@ const CollaborativeDetailClient = () => {
.map((geo: any) => geo.name)
.join(', ')
: '',
stroke: 1.2,
},
]}
href={`/datasets/${dataset.id}`}
footerContent={[
leftFooterChips={[
{
icon: `/Sectors/${dataset.sectors[0]?.name}.svg`,
label: 'Sectors',
},
]}
rightFooterChips={[
{
icon: dataset.isIndividualDataset
? dataset?.user?.profilePicture
Expand All @@ -560,6 +570,7 @@ const CollaborativeDetailClient = () => {
},
]}
description={stripMarkdown(dataset.description || '')}
withViewButton={false}
/>
))}
</div>
Expand Down
22 changes: 14 additions & 8 deletions app/[locale]/(user)/components/Datasets.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ const Datasets = () => {

<CarouselContent className="p-4">
{isLoading ? (
<DatasetListingSkeleton cardCount={3} cardsOnly={true} />
<DatasetListingSkeleton cardCount={4} cardsOnly={true} />
) : (
facets?.results?.map((item: any) => {
const geographies =
Expand All @@ -102,7 +102,7 @@ const Datasets = () => {
<CarouselItem
key={item.id}
className={cn(
'h-2/4 basis-full pl-4 sm:basis-1/2 lg:basis-1/3',
'h-2/4 basis-full pl-4 sm:basis-1/2 md:basis-1/3 lg:basis-1/4',
Styles.List
)}
>
Expand All @@ -112,7 +112,7 @@ const Datasets = () => {
description={stripMarkdown(item.description)}
metadataContent={[
{
icon: Icons.calendar as any,
icon: Icons.calendarEvent as any,
label: 'Date',
value: new Date(item.modified).toLocaleDateString(
'en-US',
Expand All @@ -122,28 +122,33 @@ const Datasets = () => {
year: 'numeric',
}
),
stroke: 1.2,
},
{
icon: Icons.download as any,
icon: Icons.fileDownload as any,
label: 'Download',
value: item.download_count.toString(),
value: item.download_count || 0,
stroke: 1.2,
},
{
icon: Icons.globe,
icon: Icons.worldPin,
label: 'Geography',
value:
geographies.length > 0
? geographies.join(', ')
: 'Not specified',
: '',
stroke: 1.2,
},
]}
tag={item.tags}
formats={item.formats}
footerContent={[
leftFooterChips={[
{
icon: `/Sectors/${item.sectors[0]}.svg`,
label: 'Sectors',
},
]}
rightFooterChips={[
{
icon: item.is_individual_dataset
? item?.user?.profile_picture
Expand All @@ -158,6 +163,7 @@ const Datasets = () => {
variation={'collapsed'}
iconColor="metadata"
href={`/datasets/${item.id}`}
withViewButton={false}
// type={[
// {
// label: 'Dataset',
Expand Down
44 changes: 28 additions & 16 deletions app/[locale]/(user)/components/ListingComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -548,19 +548,21 @@ const ListingComponent: React.FC<ListingProps> = ({

const MetadataContent = [
{
icon: Icons.calendar as any,
icon: Icons.calendarEvent as any,
label: 'Date',
value: formatDate(item.modified),
value: formatDate(item.modified) || '',
tooltip: 'Date',
stroke: 1.2,
},
];

if (item.download_count > 0) {
MetadataContent.push({
icon: Icons.download as any,
icon: Icons.fileDownload as any,
label: 'Download',
value: item.download_count?.toString() || '0',
value: item.download_count || 0,
tooltip: 'Download',
stroke: 1.2,
});
}

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

MetadataContent.push({
icon: Icons.globe as any,
icon: Icons.worldPin as any,
label: 'Geography',
value: geoDisplay,
tooltip: geoDisplay,
stroke: 1.2,
});
}

Expand All @@ -587,6 +590,7 @@ const ListingComponent: React.FC<ListingProps> = ({
label: 'SDG Goals',
value: sdgDisplay,
tooltip: sdgDisplay,
stroke: 1.2,
});
}

Expand All @@ -596,10 +600,11 @@ const ListingComponent: React.FC<ListingProps> = ({
label: '',
value: 'With Charts',
tooltip: 'Charts',
stroke: 1.2,
});
}

const FooterContent = [
const LeftFooterChips = [
{
icon: `/Sectors/${item.sectors?.[0]}.svg` as any,
label: 'Sectors',
Expand All @@ -614,6 +619,9 @@ const ListingComponent: React.FC<ListingProps> = ({
},
]
: []),
];

const RightFooterChips = [
{
icon: image as any,
label: 'Published by',
Expand All @@ -624,10 +632,11 @@ const ListingComponent: React.FC<ListingProps> = ({
const commonProps = {
title: item.title,
description: stripMarkdown(item.description || ''),
metadataContent: MetadataContent,
metadataContent: MetadataContent as any,
tag: item.tags,
formats: item.formats,
footerContent: FooterContent,
leftFooterChips: LeftFooterChips,
rightFooterChips: RightFooterChips,
imageUrl: '',
};

Expand All @@ -651,14 +660,17 @@ const ListingComponent: React.FC<ListingProps> = ({
? 'usecase-card'
: undefined
}
{...(type === 'usecase' && {
type: [
{
label: 'Use Case',
fillColor: '#fff',
borderColor: '#000',
},
],
// {...(type === 'usecase' && {
// type: [
// {
// label: 'Use Case',
// fillColor: '#fff',
// borderColor: '#000',
// },
// ],
// })}
{...(type === 'dataset' && {
withViewButton: false,
})}
/>
);
Expand Down
Loading
Loading