Merge pull request #220 from CivicDataLab/219-update-opub-version-and-add-link-to-card

219 update opub version and add link to card

Author: sanjaypinna

app/[locale]/(user)/datasets/components/FIlter/Filter.tsx

@@ -33,7 +33,7 @@ const Filter: React.FC<FilterProps> = ({
   };
 
   return (
-    <div className="rounded-4 bg-surfaceDefault px-4 py-6">
+    <div className="rounded-4 bg-surfaceDefault px-4 py-6 shadow-card">
       <div className="mb-5 flex justify-between">
         <div className="flex w-full justify-between">
           <div>

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

@@ -1,9 +1,7 @@
 'use client';
 
-import React, { useEffect, useReducer, useState } from 'react';
-import Link from 'next/link';
-import { useRouter } from 'next/navigation';
 import { fetchDatasets } from '@/fetch';
+import { useRouter } from 'next/navigation';
 import {
   Button,
   ButtonGroup,
@@ -17,10 +15,11 @@ import {
   Text,
   Tray,
 } from 'opub-ui';
+import React, { useEffect, useReducer, useState } from 'react';
 
-import { cn } from '@/lib/utils';
 import BreadCrumbs from '@/components/BreadCrumbs';
 import { Icons } from '@/components/icons';
+import { cn } from '@/lib/utils';
 import GraphqlPagination from '../../dashboard/components/GraphqlPagination/graphqlPagination';
 import Filter from './components/FIlter/Filter';
 import Styles from './dataset.module.scss';
@@ -243,7 +242,7 @@ const DatasetsListing = () => {
   console.log(datasetDetails);
 
   return (
-    <main className=" bg-greyExtralight">
+    <main >
       <BreadCrumbs
         data={[
           { href: '/', label: 'Home' },
@@ -408,7 +407,6 @@ const DatasetsListing = () => {
                 >
                   {datasetDetails.map((item: any, index: any) => {
                     const commonProps = {
-                      key: `${item.id}-${view}`,
                       title: item.title,
                       description: item.description,
                       metadataContent: [
@@ -420,7 +418,7 @@ const DatasetsListing = () => {
                         {
                           icon: Icons.download,
                           label: 'Download',
-                          value: '500',
+                          value: item.download_count.toString(),
                         },
                         {
                           icon: Icons.globe,
@@ -443,15 +441,15 @@ const DatasetsListing = () => {
                     };
 
                     return (
-                      <Link href={`/datasets/${item.id}`} key={item.id}>
-                        <Card
-                          {...commonProps}
-                          variation={
-                            view === 'expanded' ? 'expanded' : 'collapsed'
-                          }
-                          iconColor="warning"
-                        />
-                      </Link>
+                      <Card
+                        {...commonProps}
+                        key={item.id}
+                        variation={
+                          view === 'expanded' ? 'expanded' : 'collapsed'
+                        }
+                        iconColor="warning"
+                        href={`/datasets/${item.id}`}
+                      />
                     );
                   })}
                 </GraphqlPagination>

package-lock.json

@@ -35,7 +35,7 @@
     "next-auth": "^4.24.7",
     "next-intl": "^3.4.0",
     "next-usequerystate": "^1.17.2",
-    "opub-ui": "0.3.76",
+    "opub-ui": "0.3.77",
     "react": "^18.2.0",
     "react-aria": "3.22.0",
     "react-dom": "^18.2.0",

package.json

@@ -307,7 +307,7 @@
   --border-width-1: var(--space-025);
   --border-width-2: var(--space-05);
   --border-width-4: var(--space-1);
-
+  --shadow-element-card: 0px 0px 12px 0px rgba(0, 0, 0, 0.16);
   --shadow-modal:
     0px 26px 80px 0px rgba(0, 0, 0, 0.2), 0px 0px 1px 0px rgba(0, 0, 0, 0.2);
   --shadow-layer:

styles/tokens/_variables.css

@@ -18,4 +18,5 @@ module.exports = {
   elementCard: 'var(--shadow-element-card)',
   elementTopNav: 'var(--shadow-element-topnav)',
   elementFocus: 'var(--shadow-element-focus)',
+  card: 'var(--shadow-element-card)',
 };