Skip to content

Commit d0c90da

Browse files
sanjaypinnasanjaypinna
authored
Merge pull request #224 from CivicDataLab/223-update-home-page-as-per-new-design
Update pages as per new designs
2 parents f37e867 + 5e617ce commit d0c90da

File tree

16 files changed

+454
-80
lines changed

16 files changed

+454
-80
lines changed

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

Lines changed: 53 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,58 @@
1-
'use client';
1+
'use client'
22

3-
import { IconBrandTabler } from '@tabler/icons-react';
4-
import { useTranslations } from 'next-intl';
5-
import { Button, ButtonGroup, Icon, Text } from 'opub-ui';
3+
import Image from 'next/image';
4+
import { useRouter } from 'next/navigation';
5+
import { SearchInput, Text } from 'opub-ui';
66

7-
import { Icons } from '@/components/icons';
8-
9-
export function Content() {
10-
const t = useTranslations('home');
7+
import { cn } from '@/lib/utils';
8+
import Styles from '../page.module.scss';
119

10+
export const Content = () => {
11+
const router = useRouter();
12+
const handleSearch = (value: string) => {
13+
if (value) {
14+
router.push(`/datasets?query=${encodeURIComponent(value)}`);
15+
}
16+
};
1217
return (
13-
<>
14-
<IconBrandTabler size={64} color="black" />
15-
<Text variant="heading4xl" as="h1" alignment="center">
16-
{t('title')}
17-
</Text>
18-
<Text
19-
color="subdued"
20-
variant="bodyLg"
21-
as="p"
22-
alignment="center"
23-
className="mb-4"
24-
>
25-
{t('subtitle')}
26-
</Text>
27-
<ButtonGroup>
28-
<Button variant="interactive" kind="secondary" url="/chart">
29-
<Text variant="headingMd">Go to Charts</Text>
30-
</Button>
31-
<Button
32-
variant="interactive"
33-
kind="primary"
34-
url="/dashboard/user/datasets"
35-
icon={<Icon source={Icons.share} color="onBgDefault" />}
36-
>
37-
<Text color="onBgDefault" variant="headingMd">
38-
{t('cta')}
39-
</Text>
40-
</Button>
41-
</ButtonGroup>
42-
</>
18+
<main>
19+
<div className="flex items-center justify-center gap-20 bg-primaryBlue p-8 lg:p-16">
20+
<div className="flex flex-col gap-11">
21+
<div className="flex flex-col">
22+
<Text variant="heading3xl" color="onBgDefault">
23+
Collaborate to advance
24+
</Text>
25+
<Text
26+
variant="heading3xl"
27+
color="onBgDefault"
28+
className=" text-tertiaryAccent"
29+
>
30+
Data-driven Impact and Action
31+
</Text>
32+
<Text variant="heading3xl" color="onBgDefault">
33+
with CivicDataLab{' '}
34+
</Text>
35+
</div>
36+
<div className="w-full">
37+
<SearchInput
38+
className={cn(Styles.Search)}
39+
onSubmit={handleSearch}
40+
label={''}
41+
placeholder="Search for any data"
42+
name={''}
43+
withButton
44+
/>
45+
</div>
46+
</div>
47+
<div className=" hidden lg:block">
48+
<Image
49+
src={'/homepage_illustartion.png'}
50+
width={500}
51+
height={400}
52+
alt="illustartion"
53+
/>
54+
</div>
55+
</div>
56+
</main>
4357
);
44-
}
58+
};

‎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/ListingComponent.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -282,7 +282,7 @@ const ListingComponent: React.FC<ListingProps> = ({
282282
{categoryImage && (
283283
<div className="flex flex-col items-center justify-center rounded-2 bg-baseGraySlateSolid2 p-2">
284284
<Image
285-
src={categoryImage}
285+
src={`/Sectors/${categoryName}.svg`}
286286
width={164}
287287
height={164}
288288
alt={`${categoryName} Logo`}
@@ -416,7 +416,7 @@ const ListingComponent: React.FC<ListingProps> = ({
416416

417417
<div className="flex w-full flex-col gap-4 px-2">
418418
{Object.values(queryParams.filters).filter(
419-
(value) => Array.isArray(value) && value.length !== 0
419+
(value) => Array.isArray(value)
420420
).length > 1 && (
421421
<div className="flex gap-2">
422422
{Object.entries(queryParams.filters).map(([category, values]) =>
@@ -467,8 +467,8 @@ const ListingComponent: React.FC<ListingProps> = ({
467467
tag: item.tags,
468468
formats: item.formats,
469469
footerContent: [
470-
{ icon: '', label: 'Sectors' },
471-
{ icon: '', label: 'Published by' },
470+
{ icon: `/Sectors/${item.sectors[0]}.svg`, label: 'Sectors' },
471+
{ icon: '/fallback.svg', label: 'Published by' },
472472
],
473473
};
474474

‎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="flex h-screen w-full flex-col items-center justify-center gap-2">
7+
<div className="bg-surfaceDefault">
68
<Content />
9+
<Datasets />
10+
<Sectors/>
711
</div>
812
);
913
}

0 commit comments

Comments
 (0)