diff --git a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/AccessModels/index.tsx b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/AccessModels/index.tsx index ab4782e4..ec8dfd6b 100644 --- a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/AccessModels/index.tsx +++ b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/AccessModels/index.tsx @@ -9,18 +9,63 @@ import { } from 'opub-ui'; import CustomTags from '@/components/CustomTags'; +import ResourceTable from '../../../components/ResourceTable'; interface AccessModelProps { data: any; } +const generateColumnData = () => { + return [ + { + accessorKey: 'resourceName', + header: 'Resource Name', + }, + + { + accessorKey: 'fields', + header: 'Fields', + isModalTrigger: true, + label: 'Preview', + table: true, + modalHeader: 'Fields', + }, + { + accessorKey: 'rows', + header: 'Rows', + }, + { + accessorKey: 'count', + header: 'Count', + }, + { + accessorKey: 'preview', + header: 'Preview', + isModalTrigger: true, + label: 'Preview', + table: true, + modalHeader: 'Preview', + }, + ]; +}; + +const generateTableData = (resource: any[]) => { + return resource.map((item: any) => ({ + resourceName: item.resourceName, + fields: item.fields, + preview: item.preview, + rows: item.rows, + count: item.count, + })); +}; + const AccessModels: React.FC = ({ data }) => { return ( <> {data.map((item: any, index: any) => (
@@ -30,10 +75,10 @@ const AccessModels: React.FC = ({ data }) => { {item.description}
-
- +
+
@@ -43,7 +88,9 @@ const AccessModels: React.FC = ({ data }) => { {/*
*/} -
See Resources
+
+ See Resources +
= ({ data }) => { outline: '1px solid var( --base-pure-white)', }} > - {item.resource.map((item: any, index: any) => ( -
- {item.title} -
- ))} + {item.resource && item.resource.length > 0 && ( + + )} diff --git a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Metadata/index.tsx b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Metadata/index.tsx index 12570115..88247bd8 100644 --- a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Metadata/index.tsx +++ b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Metadata/index.tsx @@ -17,13 +17,13 @@ const MetadataComponent: React.FC = ({ data, setOpen }) => { return ( <> -
-
- +
+
+ About the Dataset -
- (METADATA) +
+ METADATA
{setOpen && (
@@ -33,27 +33,31 @@ const MetadataComponent: React.FC = ({ data, setOpen }) => {
)}
-
+
{/*
*/} -
- Source : -  {metadata.source} +
+ Source + {metadata.source}
-
- Location : -  {metadata.location} +
+ Location + {metadata.location}
-
- Update : -  {metadata.update} +
+ Update + {metadata.update}
-
- Licence : -  {metadata.licence} +
+ Licence + {metadata.licence}
-
- Policy : -  {metadata.policy} +
+ Policy + {metadata.policy} +
+
+ Organization + {metadata.organization}
diff --git a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/PrimaryData/index.tsx b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/PrimaryData/index.tsx index 17bf7640..dc7b09a8 100644 --- a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/PrimaryData/index.tsx +++ b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/PrimaryData/index.tsx @@ -11,30 +11,30 @@ const PrimaryData: React.FC = ({ data }) => {
{data.datasetTitle}
-
- {data.description} -
-
- Categories : -  {data.metadata.category} -
- Tags :  + {/* Tags :  */}
{data.metadata.tags.map((item: any, index: any) => ( {item.title} ))}
-
+
+ {data.description} +
+ {/*
+ Categories : +  {data.metadata.category} +
*/} + + {/*
Formats :  - {/*  Monthly */}
{data.metadata.formats.map((item: any, index: any) => ( {item.type} ))}
-
+
*/} ); }; diff --git a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Resources/index.tsx b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Resources/index.tsx index f2da7296..088b9cb4 100644 --- a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Resources/index.tsx +++ b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Resources/index.tsx @@ -1,18 +1,139 @@ +import { table } from 'console'; import React from 'react'; -import { Text } from 'opub-ui'; +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, + Button, + Dialog, + Table, + Text, +} from 'opub-ui'; + +import ResourceTable from '../../../components/ResourceTable'; interface ResourceProps { data: any; } +const generateColumnData = () => { + return [ + { + accessorKey: 'accessModelTitle', + header: 'Access Model Title', + }, + { + accessorKey: 'accessType', + header: 'Access Type', + }, + + { + accessorKey: 'fields', + header: 'Fields', + isModalTrigger: true, + label: 'Preview', + table: true, + modalHeader: 'Fields', + }, + { + accessorKey: 'rows', + header: 'Rows', + }, + { + accessorKey: 'count', + header: 'Count', + }, + { + accessorKey: 'preview', + header: 'Preview', + isModalTrigger: true, + label: 'Preview', + table: true, + modalHeader: 'Preview', + }, + ]; +}; + +const generateTableData = (accessModelData: any[]) => { + return accessModelData.map((accessModel: any) => ({ + accessType: accessModel.accessType, + accessModelTitle: accessModel.accessModelTitle, + fields: accessModel.fields, + rows: accessModel.rows, + count: accessModel.count, + preview: accessModel.preview, + })); +}; + const Resources: React.FC = ({ data }) => { return ( <> {data.map((item: any, index: any) => ( -
-
- {item.title} - {item.description} +
+
+
+ {item.title} +
+
+ {item.description} +
+
+
+ + + + + + + + + +
+ + + +
+ See Access Type +
+ + + {item.accessModelData && item.accessModelData.length > 0 && ( + + )} + + +
))} diff --git a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Visualizations/index.tsx b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Visualizations/index.tsx new file mode 100644 index 00000000..2ec5da60 --- /dev/null +++ b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Visualizations/index.tsx @@ -0,0 +1,102 @@ +import React from 'react'; +import { Button, Text } from 'opub-ui'; +import { BarChart } from 'opub-ui/viz'; + +interface VisualizationProps { + data: any; +} + +const Visualization: React.FC = ({ data }) => { + const barOptions1 = { + xAxis: { + type: 'category', + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], + }, + yAxis: { + type: 'value', + }, + series: [ + { + data: [120, 200, 150, 80, 70, 110, 130], + type: 'bar', + name: 'Sales', + color: 'rgb(55,162,218)', + }, + ], + }; + const barOptions2 = { + xAxis: { + type: 'category', + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], + }, + yAxis: { + type: 'value', + }, + series: [ + { + data: [120, 200, 150, 80, 70, 110, 130], + type: 'bar', + name: 'Sales', + color: 'rgb(95, 217, 188)', + }, + ], + }; + const barOptions3 = { + xAxis: { + type: 'category', + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], + }, + yAxis: { + type: 'value', + }, + series: [ + { + data: [120, 200, 150, 80, 70, 110, 130], + type: 'bar', + name: 'Sales', + color: 'rgb(208, 138, 208)', + }, + ], + }; + const barOptions4 = { + xAxis: { + type: 'category', + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], + }, + yAxis: { + type: 'value', + }, + series: [ + { + data: [120, 200, 150, 80, 70, 110, 130], + type: 'bar', + name: 'Sales', + color: 'rgb(166, 89, 120)', + }, + ], + }; + return ( +
+ {data.map((item: any, index: any) => ( +
+ {item.title} + {item.description} + +
+ + + + +
+
+ ))} +
+ ); +}; + +export default Visualization; diff --git a/app/[locale]/(user)/datasets/[datasetIdentifier]/page.tsx b/app/[locale]/(user)/datasets/[datasetIdentifier]/page.tsx index ff861f92..70928e97 100644 --- a/app/[locale]/(user)/datasets/[datasetIdentifier]/page.tsx +++ b/app/[locale]/(user)/datasets/[datasetIdentifier]/page.tsx @@ -1,88 +1,169 @@ 'use client'; -import React, { useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; +import Image from 'next/image'; +import { graphql } from '@/gql'; +import { useQuery } from '@tanstack/react-query'; import { Button, Icon, Tab, TabList, TabPanel, Tabs, Tray } from 'opub-ui'; +import { BarChart } from 'opub-ui/viz'; +import { GraphQL } from '@/lib/api'; import BreadCrumbs from '@/components/BreadCrumbs'; import { Icons } from '@/components/icons'; -import { data } from '../data'; +import { data as datainfo } from '../data'; import AccessModels from './components/AccessModels'; import Metadata from './components/Metadata'; import PrimaryData from './components/PrimaryData'; import Resources from './components/Resources'; +import Visualization from './components/Visualizations'; + +const datasetQuery: any = graphql(` + query GetDatasetData { + dataset { + id + created + modified + } + } +`); const DatasetDetailsPage = () => { - const DatasetInfo = data[1]; + const DatasetInfo = datainfo[1]; const [open, setOpen] = useState(false); + const primaryDataRef = useRef(null); // Explicitly specify the type of ref + const [primaryDataHeight, setPrimaryDataHeight] = useState(0); + + const { data, error, isLoading, refetch } = useQuery([], () => + GraphQL(datasetQuery, []) + ); + + console.log(data, error, isLoading); + + useEffect(() => { + if (primaryDataRef.current) { + const height = primaryDataRef.current.clientHeight; + setPrimaryDataHeight(height); + } + }, [primaryDataRef]); const TabsList = [ { label: 'Resources', value: 'resources', - component: , + component: , }, { label: 'Access Models', value: 'accessmodels', - component: , + component: , + }, + { + label: 'Visualizations', + value: 'visualizations', + component: , }, ]; + const [activeTab, setActiveTab] = useState('resources'); // State to manage active tab + + useEffect(() => { + refetch(); + }, [activeTab]); + + const barOptions = { + xAxis: { + type: 'category', + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], + }, + yAxis: { + type: 'value', + }, + series: [ + { + data: [120, 200, 150, 80, 70, 110, 130], + type: 'bar', + name: 'Sales', + color: 'rgb(55,162,218)', + }, + ], + }; + return ( -
-
- {' '} - -
- -
- - - - } +
+ +
+
+
+
+ +
+
- - -
-
- - + + + + } + > + + +
+
+ + + {TabsList.map((item, index) => ( + setActiveTab(item.value)} // Update active tab on click + > + {item.label} + + ))} + {TabsList.map((item, index) => ( - - {item.label} - + + {item.component} + ))} - - {TabsList.map((item, index) => ( - - {item.component} - - ))} - + +
+
+
+
+
+ + +
+
+ +
+
+
-
-
-
); diff --git a/app/[locale]/(user)/datasets/components/Card/index.tsx b/app/[locale]/(user)/datasets/components/Card/index.tsx new file mode 100644 index 00000000..5c13de98 --- /dev/null +++ b/app/[locale]/(user)/datasets/components/Card/index.tsx @@ -0,0 +1,77 @@ +import React from 'react'; +import Link from 'next/link'; +import { Tag, Text } from 'opub-ui'; + +import CustomTags from '@/components/CustomTags'; + +interface Dataset { + datasetTitle: string; + description: string; + id: number; + metadata: Metadata; +} + +interface Metadata { + update: string; + category: string; + tags: { title: string }[]; + formats: { type: string }[]; + accessModels: { type: string }[]; + accessModelsCount: string; +} + +const Cards = ({ data }: { data: Dataset }) => { + const { datasetTitle, description, metadata, id } = data; + return ( + <> +
+
+
+ + {datasetTitle} + +
+
+ {description} +
+
+ Tags: +
+ {metadata.tags.map((item, index) => ( + {item.title} + ))} +
+
+
+ Categories : +  {metadata.category} +
+
+ Formats: +
+ {metadata.formats.map((item, index) => ( + {item.type} + ))} +
+
+
+ Access Models : +  {metadata.accessModelsCount} in total  +
+ {metadata.accessModels.map((item, index) => ( + + ))} +
+
+
+
+ + ); +}; +export default Cards; diff --git a/app/[locale]/(user)/datasets/components/Cards/index.tsx b/app/[locale]/(user)/datasets/components/Cards/index.tsx deleted file mode 100644 index 9b81c467..00000000 --- a/app/[locale]/(user)/datasets/components/Cards/index.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import React from 'react'; -import Link from 'next/link'; -import { Tag, Text } from 'opub-ui'; - -interface Dataset { - datasetTitle: string; - description: string; - id: number; - metadata: Metadata; -} - -interface Metadata { - update: string; - category: string; - tags: { title: string }[]; - formats: { type: string }[]; - accessModels: { type: string }[]; - accessModelsCount: string; -} - -const Cards = ({ data }: { data: Dataset }) => { - const { datasetTitle, description, metadata, id } = data; - return ( - <> -
-
-
- - {datasetTitle} - -
-
- {description} -
-
-
-
-
- Frequency of Update : -  {metadata.update} -
-
- Categories : -  {metadata.category} -
-
- Tags :  -
- {metadata.tags.map((item, index) => ( - {item.title} - ))} -
-
-
-
-
- Formats :  - {/*  Monthly */} -
- {metadata.formats.map((item, index) => ( - {item.type} - ))} -
-
-
- Access Models : -  {metadata.accessModelsCount} in total  -
- {metadata.accessModels.map((item, index) => ( - {item.type} - ))} -
-
-
-
-
- - ); -}; -export default Cards; diff --git a/app/[locale]/(user)/datasets/components/FIlter/Filter.tsx b/app/[locale]/(user)/datasets/components/FIlter/Filter.tsx index 55d3aed6..eda0e85f 100644 --- a/app/[locale]/(user)/datasets/components/FIlter/Filter.tsx +++ b/app/[locale]/(user)/datasets/components/FIlter/Filter.tsx @@ -1,5 +1,14 @@ -import React from 'react'; -import { Button, CheckboxGroup, Icon, Text } from 'opub-ui'; +import React, { useState } from 'react'; +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, + Button, + CheckboxGroup, + Icon, + Text, +} from 'opub-ui'; import { Icons } from '@/components/icons'; @@ -30,16 +39,16 @@ const Filter: React.FC = ({ setOpen }) => { title: 'Sector', Options: [ { - label: 'Option1', - value: 'Option1', + label: 'Option21', + value: 'Option21', }, { - label: 'Option2', - value: 'Option2', + label: 'Option22', + value: 'Option22', }, { - label: 'Option3', - value: 'Option3', + label: 'Option23', + value: 'Option23', }, ], }, @@ -47,58 +56,69 @@ const Filter: React.FC = ({ setOpen }) => { title: 'Category', Options: [ { - label: 'Option1', - value: 'Option1', + label: 'Option31', + value: 'Option31', }, { - label: 'Option2', - value: 'Option2', + label: 'Option32', + value: 'Option32', }, { - label: 'Option3', - value: 'Option3', + label: 'Option33', + value: 'Option33', }, ], }, ]; - + const [selectedOptions, setSelectedOptions] = useState([]); return ( - <> - {setOpen && ( -
-
- Filters -
- +
+
+
+ Filters +
+ {setOpen && (
-
- )} -
+ )} +
+
{filtersData.map((item, index) => (
-
- - {item.title} - -
-
- ({ - label: Option.label, - value: Option.value, - }))} - title={undefined} - /> -
+ + + + {item.title} + + + ({ + label: Option.label, + value: Option.value, + }))} + title={undefined} + value={selectedOptions} + onChange={(e) => { + setSelectedOptions(e), console.log(e); + }} + /> + + +
))}
- +
); }; diff --git a/app/[locale]/(user)/datasets/components/ResourceTable/index.tsx b/app/[locale]/(user)/datasets/components/ResourceTable/index.tsx new file mode 100644 index 00000000..669e8f80 --- /dev/null +++ b/app/[locale]/(user)/datasets/components/ResourceTable/index.tsx @@ -0,0 +1,70 @@ +import React from 'react'; +import { Button, Dialog, Table } from 'opub-ui'; + +interface ColumnData { + accessorKey: string; + header: string; + isModalTrigger?: boolean; + label?: string; + table?: boolean; + modalHeader?: string; +} + +interface RowData { + [key: string]: any; +} + +interface ResourceTableProps { + ColumnsData: ColumnData[]; + RowsData: RowData[]; +} + +interface CellProps { + row: RowData; +} + +const ResourceTable: React.FC = ({ + ColumnsData, + RowsData, +}) => { + const columnsWithModal = ColumnsData.map((column) => { + if (column.isModalTrigger) { + return { + ...column, + cell: ({ row }: CellProps) => { + const rowData = row.original as unknown as RowData; + const accessorKey = column.accessorKey as keyof RowData; + const cellValue = rowData[accessorKey]; + return ( + + + + + + {column?.table ? ( +
+ ) : ( + cellValue + )} + + + ); + return null; + }, + }; + } + return column; + }); + + return ( +
+
+ + ); +}; + +export default ResourceTable; diff --git a/app/[locale]/(user)/datasets/data.tsx b/app/[locale]/(user)/datasets/data.tsx index 7f2d1bdc..ae3c4488 100644 --- a/app/[locale]/(user)/datasets/data.tsx +++ b/app/[locale]/(user)/datasets/data.tsx @@ -31,6 +31,7 @@ export const data = [ source: 'OGD', licence: 'Government Open Data License ', policy: 'National Data Sharing and Accessibility Policy', + organization: 'Open Budget India', }, }, { @@ -60,32 +61,253 @@ export const data = [ }, { type: 'Restricted' }, ], + accessModelsCount: '2', location: 'India', source: 'OGD', licence: 'Government Open Data License ', policy: 'National Data Sharing and Accessibility Policy (NDSAP)', + organization: 'Open Budget India', }, + visualization: [ + { + title: + 'Temperature and Precipitation (2011-2015) Guwahati, Assam - Preview', + description: + 'Daily weather summaries for Guwahati, Assam, India, covering 2011-2015. Variables available for this period include Max Temperature, Min Temperature, and Total Precipitation.', + images: [ + '/visualization.svg', + '/visualization.svg', + '/visualization.svg', + '/visualization.svg', + ], + }, + { + title: + 'Temperature and Precipitation (2011-2015) Guwahati, Assam - Preview', + description: + 'Daily weather summaries for Guwahati, Assam, India, covering 2011-2015. Variables available for this period include Max Temperature, Min Temperature, and Total Precipitation.', + images: ['/visualization.svg', '/visualization.svg'], + }, + ], resources: [ { title: 'Telangana Budget 2020-21', description: - 'This section provides budget documents of Telangana for the year 2020-21.', + 'Daily weather summaries for Guwahati, Assam, India, in the year 2011. Variables available for this period include Max Temperature, Min Temperature, and Total Precipitation.', + + schema: [], + accessModelData: [ + { + accessType: 'Open', + accessModelTitle: + 'Temperature and Precipitation (2011-2015) Guwahati, Assam - Open Access', + fields: [ + [ + { + accessorKey: 'title', + header: 'Title', + }, + { + accessorKey: 'description', + header: 'Description', + }, + ], + [ + { title: 'Res 1', description: 'Desc 1' }, + { title: 'Res 2', description: 'Desc 2' }, + ], + ], + rows: '1-10', + count: '10(out of 100)', + preview: [ + [ + { + accessorKey: 'title', + header: 'Title', + }, + { + accessorKey: 'description', + header: 'Description', + }, + ], + [ + { title: 'Res 11', description: 'Desc 11' }, + { title: 'Res 22', description: 'Desc 22' }, + ], + ], + }, + { + accessType: 'Registered', + accessModelTitle: + 'Temperature and Precipitation (2011-2015) Guwahati, Assam - Open Access', + fields: [ + [ + { + accessorKey: 'title', + header: 'Title', + }, + { + accessorKey: 'description', + header: 'Description', + }, + ], + [ + { title: 'Res 13', description: 'Desc 13' }, + { title: 'Res 23', description: 'Desc 23' }, + ], + ], + rows: '1-10', + count: '10(out of 100)', + preview: [ + [ + { + accessorKey: 'title', + header: 'Title', + }, + { + accessorKey: 'description', + header: 'Description', + }, + ], + [ + { title: 'Res 14', description: 'Desc 14' }, + { title: 'Res 24', description: 'Desc 24' }, + ], + ], + }, + { + accessType: 'Restricted', + accessModelTitle: + 'Temperature and Precipitation (2011-2015) Guwahati, Assam - Open Access', + fields: [ + [ + { + accessorKey: 'title', + header: 'Title', + }, + { + accessorKey: 'description', + header: 'Description', + }, + ], + [ + { title: 'Res 15', description: 'Desc 15' }, + { title: 'Res 25', description: 'Desc 25' }, + ], + ], + rows: '1-10', + count: '10(out of 100)', + preview: [ + [ + { + accessorKey: 'title', + header: 'Title', + }, + { + accessorKey: 'description', + header: 'Description', + }, + ], + [ + { title: 'Res 16', description: 'Desc 16' }, + { title: 'Res 26', description: 'Desc 26' }, + ], + ], + }, + ], }, { title: 'Telangana Budget 2021-22', description: 'This section provides budget documents of Telangana for the year 2021-22', - }, - { - title: 'Telangana Budget 2022-23', - description: - 'This section provides budget documents of Telangana for the year 2022-23.', + accessModelData: [ + { + accessType: 'Open', + accessModelTitle: + 'Temperature and Precipitation (2011-2015) Guwahati, Assam - Open Access', + fields: [ + [ + { + accessorKey: 'title', + header: 'Title', + }, + { + accessorKey: 'description', + header: 'Description', + }, + ], + [ + { title: 'Res 1', description: 'Desc 1' }, + { title: 'Res 2', description: 'Desc 2' }, + ], + ], + rows: '1-10', + count: '10(out of 100)', + preview: [ + [ + { + accessorKey: 'title', + header: 'Title', + }, + { + accessorKey: 'description', + header: 'Description', + }, + ], + [ + { title: 'Res 1', description: 'Desc 1' }, + { title: 'Res 2', description: 'Desc 2' }, + ], + ], + }, + ], }, { title: 'Telangana Budget 2023-24', description: 'This section provides budget documents of Telangana for the year 2023-24.', + accessModelData: [ + { + accessType: 'Open', + accessModelTitle: + 'Temperature and Precipitation (2011-2015) Guwahati, Assam - Open Access', + fields: [ + [ + { + accessorKey: 'title', + header: 'Title', + }, + { + accessorKey: 'description', + header: 'Description', + }, + ], + [ + { title: 'Res 1', description: 'Desc 1' }, + { title: 'Res 2', description: 'Desc 2' }, + ], + ], + rows: '1-10', + count: '10(out of 100)', + preview: [ + [ + { + accessorKey: 'title', + header: 'Title', + }, + { + accessorKey: 'description', + header: 'Description', + }, + ], + [ + { title: 'Res 1', description: 'Desc 1' }, + { title: 'Res 2', description: 'Desc 2' }, + ], + ], + }, + ], }, ], accessModels: [ @@ -98,9 +320,43 @@ export const data = [ 'Open access model helps you to view data without login', resource: [ { - title: 'Telangana Budget 2021-22', + resourceName: 'Telangana Budget 2021-22', description: 'This section provides budget documents of Telangana for the year 2021-22', + fields: [ + [ + { + accessorKey: 'title', + header: 'Title', + }, + { + accessorKey: 'description', + header: 'Description', + }, + ], + [ + { title: 'Res 1', description: 'Desc 1' }, + { title: 'Res 2', description: 'Desc 2' }, + ], + ], + preview: [ + [ + { + accessorKey: 'title', + header: 'Title', + }, + { + accessorKey: 'description', + header: 'Description', + }, + ], + [ + { title: 'Res 11', description: 'Desc 11' }, + { title: 'Res 22', description: 'Desc 22' }, + ], + ], + rows: '1-10', + count: '10(out of 100)', }, ], }, @@ -113,9 +369,43 @@ export const data = [ 'Registered access model helps you to view data after login', resource: [ { - title: 'Telangana Budget 2023-24', + resourceName: 'Telangana Budget 2021-22', description: - 'This section provides budget documents of Telangana for the year 2023-24', + 'This section provides budget documents of Telangana for the year 2021-22', + fields: [ + [ + { + accessorKey: 'title', + header: 'Title', + }, + { + accessorKey: 'description', + header: 'Description', + }, + ], + [ + { title: 'Res 1', description: 'Desc 1' }, + { title: 'Res 2', description: 'Desc 2' }, + ], + ], + preview: [ + [ + { + accessorKey: 'title', + header: 'Title', + }, + { + accessorKey: 'description', + header: 'Description', + }, + ], + [ + { title: 'Res 11', description: 'Desc 11' }, + { title: 'Res 22', description: 'Desc 22' }, + ], + ], + rows: '1-10', + count: '10(out of 100)', }, ], }, @@ -128,9 +418,43 @@ export const data = [ 'Restricted access model helps you to view data after login', resource: [ { - title: 'Telangana Budget 2021-22', + resourceName: 'Telangana Budget 2021-22', description: 'This section provides budget documents of Telangana for the year 2021-22', + fields: [ + [ + { + accessorKey: 'title', + header: 'Title', + }, + { + accessorKey: 'description', + header: 'Description', + }, + ], + [ + { title: 'Res 1', description: 'Desc 1' }, + { title: 'Res 2', description: 'Desc 2' }, + ], + ], + preview: [ + [ + { + accessorKey: 'title', + header: 'Title', + }, + { + accessorKey: 'description', + header: 'Description', + }, + ], + [ + { title: 'Res 11', description: 'Desc 11' }, + { title: 'Res 22', description: 'Desc 22' }, + ], + ], + rows: '1-10', + count: '10(out of 100)', }, ], }, diff --git a/app/[locale]/(user)/datasets/page.tsx b/app/[locale]/(user)/datasets/page.tsx index f06c0164..ae04d165 100644 --- a/app/[locale]/(user)/datasets/page.tsx +++ b/app/[locale]/(user)/datasets/page.tsx @@ -1,10 +1,10 @@ 'use client'; -import React, { useState } from 'react'; -import { Button, SearchInput, Select, Text, Tray } from 'opub-ui'; +import { useState } from 'react'; +import { Button, Pill, SearchInput, Select, Text, Tray } from 'opub-ui'; import BreadCrumbs from '@/components/BreadCrumbs'; -import Cards from './components/Cards'; +import Card from './components/Card'; import Filter from './components/FIlter/Filter'; import { data } from './data'; @@ -12,32 +12,33 @@ const DatasetsListing = () => { const [open, setOpen] = useState(false); return ( -
+
- -
-
- -
-
-
-
- Showing {data.length} Datasets -
-
- -
+
+
+
+ + Showing {data.length} of {data.length} Datasets + +
+
+ +
+
+ + Sort by: +