215 update dataset details page as per hifi designs

app/[locale]/(user)/datasets/[datasetIdentifier]/components/Details/index.tsx

@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useParams } from 'next/navigation';
@@ -49,7 +49,11 @@ const DetailsQuery: any = graphql(`
   }
 `);
 
-const Details = () => {
+interface DetailsProps {
+  setShowcharts: (vars: boolean) => void;
+}
+
+const Details: React.FC<DetailsProps> = ({ setShowcharts }) => {
   const params = useParams();
   const chartRef = useRef<ReactECharts>(null);
 
@@ -58,6 +62,12 @@ const Details = () => {
     () => GraphQL(DetailsQuery, {}, { datasetId: params.datasetIdentifier })
   );
 
+  useEffect(() => {
+    if (data && data?.getChartData.length <= 0) {
+      setShowcharts(false);
+    }
+  }, [data]);
+
   const renderChart = (item: any) => {
     if (item.chartType === 'ASSAM_DISTRICT' || item.chartType === 'ASSAM_RC') {
       // Register the map
@@ -70,17 +80,17 @@ const Details = () => {
     return <ReactECharts option={item?.chart?.options} ref={chartRef} />;
   };
 
+  const [isexpanded, setIsexpanded] = useState(false);
+  const toggleDescription = () => setIsexpanded(!isexpanded);
+
   return (
-    <div className="mb-8 flex w-full flex-col gap-4 p-2">
+    <div className=" flex w-full flex-col gap-4 p-2">
       {isLoading ? (
         <div className=" mt-8 flex justify-center">
           <Spinner />
         </div>
       ) : data?.getChartData?.length > 0 ? (
         <>
-          <Text variant="bodyLg" className="mx-6 lg:mx-0">
-            Visualizations
-          </Text>
           <div className="relative w-full ">
             <Carousel className="w-full">
               <div className=" px-12">
@@ -106,12 +116,26 @@ const Details = () => {
                         <div className="flex items-center justify-between gap-2 max-sm:flex-wrap">
                           <div className="flex flex-col gap-1 py-2 text-start">
                             <Text className="font-semi-bold">{item.name}</Text>
-                            <Text>{item.description}</Text>
+                            <Text className=" hidden lg:block">
+                              {item.description.length > 260 && !isexpanded
+                                ? `${item.description.slice(0, 260)}...`
+                                : item.description}
+                              {item.description.length > 260 && (
+                                <Button
+                                  kind="tertiary"
+                                  size="slim"
+                                  onClick={toggleDescription}
+                                  className="text-blue-600 w-fit"
+                                >
+                                  {isexpanded ? 'See Less' : 'See More'}
+                                </Button>
+                              )}
+                            </Text>
                           </div>
                           <div className="flex gap-2">
                             <Button kind="secondary" className="p-2">
                               <Icon
-                                source={Icons.share}
+                                source={Icons.diagonal}
                                 size={20}
                                 color="default"
                               />
@@ -137,10 +161,10 @@ const Details = () => {
                 </CarouselContent>
               </div>
               <div className="absolute inset-y-0 left-0 flex  items-center">
-                <CarouselPrevious />
+                <CarouselPrevious className=" bg-secondaryOrange" />
               </div>
               <div className="absolute inset-y-0 right-0 flex items-center">
-                <CarouselNext />
+                <CarouselNext className=" bg-secondaryOrange" />
               </div>
             </Carousel>
           </div>

app/[locale]/(user)/datasets/[datasetIdentifier]/components/Metadata/index.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-import Link from 'next/link';
-import { Button, Icon, Text } from 'opub-ui';
-import { toTitleCase } from '@/lib/utils';
+import Image from 'next/image';
+import { Button, Divider, Icon, Text } from 'opub-ui';
+import React, { useState } from 'react';
+
 import { Icons } from '@/components/icons';
 
 interface MetadataProps {
@@ -10,90 +10,121 @@ interface MetadataProps {
 }
 
 const MetadataComponent: React.FC<MetadataProps> = ({ data, setOpen }) => {
-  const filteredMetadataArray = data?.metadata.filter(
-    (item: any) =>
-      item.metadataItem.label !== 'Source Website' &&
-      item.metadataItem.label !== 'Github Repo Link' &&
-      item.metadataItem.label !== 'Source' &&
-      item.value.trim() !== '' // Ensure the value is not empty
-  );
 
+  const Metadata = (
+    data.metadata as Array<{ metadataItem: { label: string }; value: string }>
+  )
+    .filter((item) =>
+      ['Geography', 'Update Frequency', 'License'].includes(
+        item.metadataItem.label
+      )
+    )
+    .map((item) => ({
+      label:
+        item.metadataItem.label === 'Geography'
+          ? 'Location'
+          : item.metadataItem.label,
+      value: item.value,
+    }));
+  const [isexpanded, setIsexpanded] = useState(false);
+  const toggleDescription = () => setIsexpanded(!isexpanded);
   return (
-    <div className="rounded-md shadow-md flex flex-col gap-6 bg-surfaceDefault px-6 py-4 lg:px-8 lg:py-6">
-      <div className="flex items-center justify-between">
-        <Text variant="headingMd" fontWeight="semibold">
-          Metadata
-        </Text>
-        {setOpen && (
-          <Button onClick={() => setOpen(false)} kind="tertiary">
-            <Icon source={Icons.cross} size={24} color="default" />
-          </Button>
-        )}
+    <div className="flex flex-col gap-10">
+      <div className=" flex items-center justify-between">
+        <div className="flex flex-col gap-2">
+          <Text
+            variant="headingLg"
+            fontWeight="semibold"
+            className=" text-primaryBlue"
+          >
+            ABOUT THE DATASET{' '}
+          </Text>
+          <Text variant="bodyLg">METADATA</Text>
+        </div>
+        <div className="flex items-center justify-between">
+          {setOpen && (
+            <Button onClick={() => setOpen(false)} kind="tertiary">
+              <Icon source={Icons.cross} size={24} color="default" />
+            </Button>
+          )}
+        </div>
       </div>
-      <div className="flex flex-col gap-5 align-baseline">
-        {filteredMetadataArray?.map((item: any, index: any) => (
-          <div
-            className="flex items-center gap-2 border-b-2 border-solid border-baseGraySlateSolid6 pb-2"
-            key={index}
+      <Divider />
+      <div className=" flex flex-col gap-8">
+        <div className=" rounded-2 border-1 border-solid border-greyExtralight p-2 hidden lg:block">
+          {data?.organization?.logo?.url ? (
+            <Image
+              height={140}
+              width={100}
+              src={`${process.env.NEXT_PUBLIC_BACKEND_URL}/${data.organization?.logo?.url}`}
+              alt={`${data.organization?.name} logo`}
+              className="w-full object-contain"
+            />
+          ) : (
+            <Image
+              height={140}
+              width={100}
+              src={'/fallback.svg'}
+              alt={'fallback logo'}
+              className="fill-current w-full object-contain"
+            />
+          )}
+        </div>
+        <div className="flex items-center gap-2 ">
+          <Text className="min-w-[120px]  basis-1/4 uppercase" variant="bodyMd">
+            Organization
+          </Text>
+          <Text
+            className="max-w-xs truncate "
+            variant="bodyLg"
+            fontWeight="medium"
           >
-            <Text className="text-base min-w-[120px] basis-1/4 font-medium">
-              {toTitleCase(item.metadataItem.label)}:
+            {data.organization.name}
+          </Text>
+        </div>
+        <div className="flex items-center gap-2 ">
+          <Text className="min-w-[120px]  basis-1/4 uppercase" variant="bodyMd">
+            Sector
+          </Text>
+          <Text
+            className="max-w-xs truncate "
+            variant="bodyLg"
+            fontWeight="medium"
+          >
+            {data.categories[0].name}
+          </Text>
+        </div>
+        {Metadata.map((item, index) => (
+          <div className="flex items-center gap-2 " key={index}>
+            <Text
+              className="min-w-[120px]  basis-1/4 uppercase"
+              variant="bodyMd"
+            >
+              {item.label}
             </Text>
-            <Text className="text-base truncate max-w-xs " title={item.value}>
+            <Text className="max-w-xs " variant="bodyLg" fontWeight="medium">
               {item.value}
             </Text>
           </div>
         ))}
-        {data?.formats.length > 0 && (
-          <div className="flex items-baseline gap-2 border-b-2 border-solid border-baseGraySlateSolid6 pb-2">
-            <Text className="text-base min-w-[120px] basis-1/4 font-medium">
-              Formats:
-            </Text>
-            <div className="flex flex-wrap gap-2">
-              {data?.formats.map((item: any, index: any) => (
-                <Text key={index}>{item}</Text>
-              ))}
-            </div>
-          </div>
-        )}
-        {data?.categories.length > 0 && (
-          <div className="flex items-baseline gap-2 border-b-2 border-solid border-baseGraySlateSolid6 pb-2">
-            <Text className="text-base min-w-[120px] basis-1/4 font-medium">
-              Category:
-            </Text>
-            <div className="flex flex-wrap gap-2">
-              {data?.categories.map((item: any, index: any) => (
-                <Link
-                  href={`/datasets?categories=${item.name}`}
-                  target="_blank"
-                  className="flex justify-center"
-                  key={index}
-                >
-                  <Text className="underline">{item.name}</Text>
-                </Link>
-              ))}
-            </div>
-          </div>
-        )}
-        {data?.tags.length > 0 && (
-          <div className="flex items-baseline gap-2 pb-2">
-            <Text className="text-base min-w-[120px] basis-1/4 font-medium">
-              Tags:
-            </Text>
-            <div className="flex flex-wrap gap-2">
-              {data?.tags.map((item: any, index: any) => (
-                <Link
-                  href={`/datasets?tags=${item.value}`}
-                  target="_blank"
-                  className="flex justify-center"
-                  key={index}
-                >
-                  <Text className="underline">{item.value}</Text>
-                </Link>
-              ))}
-            </div>
-          </div>
-        )}
+        <div className="flex flex-col gap-4">
+          <Text variant="bodyMd">Description</Text>
+          <Text variant="bodyMd">
+            {data.description.length > 260 && !isexpanded
+              ? `${data.description.slice(0, 260)}...`
+              : data.description}
+            {data.description.length > 260 && (
+              <Button
+                kind="tertiary"
+                size="slim"
+                onClick={toggleDescription}
+                className="text-blue-600 w-fit"
+              >
+                {isexpanded ? 'See Less' : 'See More'}
+              </Button>
+            )}
+          </Text>
+        </div>
       </div>
     </div>
   );