Skip to content

Commit 5e617ce

Browse files
sanjaypinnasanjaypinna
committed
add datasets and sectors section in homepage
1 parent c749661 commit 5e617ce

File tree

4 files changed

+257
-1
lines changed

4 files changed

+257
-1
lines changed

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

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
'use client';
2+
3+
import React, { useEffect, useState } from 'react';
4+
import { useRouter } from 'next/navigation';
5+
import { fetchDatasets } from '@/fetch';
6+
import {
7+
Button,
8+
Card,
9+
Carousel,
10+
CarouselContent,
11+
CarouselItem,
12+
CarouselNext,
13+
CarouselPrevious,
14+
Spinner,
15+
Text,
16+
} from 'opub-ui';
17+
18+
import { cn } from '@/lib/utils';
19+
import { Icons } from '@/components/icons';
20+
import Styles from './datasets.module.scss';
21+
22+
interface Bucket {
23+
key: string;
24+
doc_count: number;
25+
}
26+
interface Aggregation {
27+
buckets: Bucket[];
28+
}
29+
30+
interface Aggregations {
31+
[key: string]: Aggregation;
32+
}
33+
34+
const Datasets = () => {
35+
const [facets, setFacets] = useState<{
36+
results: any[];
37+
total: number;
38+
aggregations: Aggregations;
39+
} | null>(null);
40+
const [isLoading, setIsLoading] = useState(true);
41+
useEffect(() => {
42+
fetchDatasets('?sort=recent&size=5&page=1&sort=recent')
43+
.then((res) => {
44+
setFacets(res);
45+
setIsLoading(false);
46+
})
47+
.catch((err) => {
48+
console.error(err);
49+
});
50+
}, []);
51+
52+
const router = useRouter();
53+
54+
return (
55+
<div className="p-4 my-5 lg:p-16">
56+
<div className="flex flex-col gap-2 px-2">
57+
<Text variant="heading3xl">Recent Datasets</Text>
58+
<div className="flex justify-between flex-wrap gap-2">
59+
<Text variant="headingLg" fontWeight="medium">
60+
Recently updated and trending Datasets on CivicDataSpace
61+
</Text>
62+
<Button
63+
kind="primary"
64+
className=" bg-secondaryOrange text-basePureBlack"
65+
onClick={() => {
66+
router.push('/datasets');
67+
}}
68+
>
69+
Explore all Datasets
70+
</Button>
71+
</div>
72+
</div>
73+
<div className="mt-10 ">
74+
<Carousel className="flex w-full justify-between">
75+
<CarouselPrevious />
76+
77+
<CarouselContent className="p-4 ">
78+
{isLoading ? (
79+
<div className='p-8'>
80+
<Spinner />
81+
</div>
82+
) : (
83+
facets &&
84+
facets.results.map((item: any) => (
85+
<CarouselItem
86+
key={item.id}
87+
className={cn(
88+
'h-2/4 basis-full pl-4 sm:basis-1/2 lg:basis-1/3',
89+
Styles.List
90+
)}
91+
>
92+
{' '}
93+
<Card
94+
title={item.title}
95+
description={item.description}
96+
metadataContent={[
97+
{
98+
icon: Icons.calendar,
99+
label: 'Date',
100+
value: '19 July 2024',
101+
},
102+
{
103+
icon: Icons.download,
104+
label: 'Download',
105+
value: item.download_count.toString(),
106+
},
107+
{
108+
icon: Icons.globe,
109+
label: 'Geography',
110+
value: 'India',
111+
},
112+
]}
113+
tag={item.tags}
114+
formats={item.formats}
115+
footerContent={[
116+
{
117+
icon: `/Sectors/${item.sectors[0]}.svg`,
118+
label: 'Sectors',
119+
},
120+
{ icon: '/fallback.svg', label: 'Published by' },
121+
]}
122+
variation={'collapsed'}
123+
iconColor="warning"
124+
href={`/datasets/${item.id}`}
125+
/>
126+
</CarouselItem>
127+
))
128+
)}
129+
</CarouselContent>
130+
<CarouselNext />
131+
</Carousel>
132+
</div>
133+
</div>
134+
);
135+
};
136+
137+
export default Datasets;

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

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
'use client';
2+
3+
import React from 'react';
4+
import Image from 'next/image';
5+
import Link from 'next/link';
6+
import { useRouter } from 'next/navigation';
7+
import { graphql } from '@/gql';
8+
import { useQuery } from '@tanstack/react-query'; // ✅ Ensure this is correct
9+
10+
import { Button, Divider, Spinner, Text } from 'opub-ui';
11+
12+
import { GraphQL } from '@/lib/api';
13+
14+
const sectorDetails = graphql(`
15+
query SectorsList {
16+
sectors {
17+
id
18+
name
19+
description
20+
slug
21+
datasetCount
22+
}
23+
}
24+
`);
25+
26+
const Sectors = () => {
27+
const { data, isLoading, error, isError } = useQuery({
28+
queryKey: ['sectors_list'], // ✅ Fix queryKey syntax
29+
queryFn: () => GraphQL(sectorDetails, {}),
30+
});
31+
const router = useRouter();
32+
function capitalizeWords(name: any) {
33+
return name
34+
.split('-') // Split by '-'
35+
.map((word: any) => word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize each word
36+
.join('+'); // Join with '+'
37+
}
38+
return (
39+
<div className="my-5 p-4 lg:p-16">
40+
<div className="flex flex-col gap-2 px-2 ">
41+
<Text variant="heading3xl">Explore Sectors</Text>
42+
<div className="flex flex-wrap justify-between gap-2">
43+
<Text variant="headingLg" fontWeight="medium">
44+
Classification of all Use Cases and Datasets on the Asia-Pacific
45+
Climate Data Collaborative{' '}
46+
</Text>
47+
<Button
48+
kind="primary"
49+
className=" bg-secondaryOrange text-basePureBlack"
50+
onClick={() => {
51+
router.push('/sectors');
52+
}}
53+
>
54+
Explore all Sectors
55+
</Button>
56+
</div>
57+
</div>
58+
{isLoading ? (
59+
<div className="m-4 flex justify-center">
60+
<Spinner />
61+
</div>
62+
) : (
63+
<div className="mt-10 grid w-full grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
64+
{data?.sectors.map((sectors: any) => (
65+
<Link
66+
href={`/sectors/${sectors.slug}?sectors=${capitalizeWords(sectors.slug)}`}
67+
key={sectors.id}
68+
>
69+
<div className="flex w-full items-center gap-5 rounded-4 bg-surfaceDefault p-7 shadow-card">
70+
<div className="flex gap-4">
71+
<Image
72+
src={`/Sectors/${sectors.name}.svg`}
73+
width={80}
74+
height={80}
75+
alt={'Sectors Logo'}
76+
/>
77+
</div>
78+
<div className="flex w-full flex-col gap-3">
79+
<div className="flex flex-col gap-2">
80+
<Text variant="headingLg" fontWeight="semibold">
81+
{sectors.name}
82+
</Text>
83+
<Divider />
84+
</div>
85+
<div className="flex gap-1">
86+
<Text
87+
variant="bodyMd"
88+
fontWeight="bold"
89+
className=" text-primaryBlue"
90+
>
91+
{sectors.datasetCount}
92+
</Text>
93+
<Text variant="bodyMd">Datasets</Text>
94+
</div>
95+
</div>
96+
</div>
97+
</Link>
98+
))}
99+
</div>
100+
)}
101+
</div>
102+
);
103+
};
104+
105+
export default Sectors;

‎app/[locale]/(user)/components/datasets.module.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.List {
2+
a {
3+
min-height: 280px;
4+
max-height: 280px;
5+
@media screen and (max-width: 1120px) {
6+
min-height: 360px;
7+
max-height: 360px;
8+
}
9+
}
10+
}

‎app/[locale]/(user)/page.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
import { Content } from './components/Content';
2+
import Datasets from './components/Datasets';
3+
import Sectors from './components/Sectors';
24

35
export default async function Home() {
46
return (
5-
<div className="h-screen bg-surfaceDefault">
7+
<div className="bg-surfaceDefault">
68
<Content />
9+
<Datasets />
10+
<Sectors/>
711
</div>
812
);
913
}

0 commit comments

Comments
 (0)