From 5d21e4d306e05e92ecf1f4c3b72a96eefaf9591a Mon Sep 17 00:00:00 2001
From: maithili232 <maithililohakare@gmail.com>
Date: Fri, 10 Nov 2023 19:55:40 +0530
Subject: [PATCH] updates

---
 .../components/Layers/FilterButton.js         | 53 ------------------
 .../{Models => common}/FilterButton.js        |  0
 new-website/deepchem/pages/index.js           |  8 +--
 new-website/deepchem/pages/layers.js          |  6 +--
 new-website/deepchem/pages/models.js          |  3 +-
 new-website/deepchem/styles/globals.css       | 54 ++++---------------
 6 files changed, 17 insertions(+), 107 deletions(-)
 delete mode 100644 new-website/deepchem/components/Layers/FilterButton.js
 rename new-website/deepchem/components/{Models => common}/FilterButton.js (100%)

diff --git a/new-website/deepchem/components/Layers/FilterButton.js b/new-website/deepchem/components/Layers/FilterButton.js
deleted file mode 100644
index d7d72ade..00000000
--- a/new-website/deepchem/components/Layers/FilterButton.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import Image from "next/image";
-
-import deepchemCross from "../../public/icons/deepchem-cross.png";
-
-/**
- * The FilterButton component is used to create a button for each filter
- * @component
- * @param {Object} props - props passed to the component
- * @param {Array} props.category - array of all the available filters
- * @param {String} props.name - name of the particular filter
- * @param {Image} props.image - image associated to the filter
- * @return {JSX.Element} - A JSX element representing the FilterButton
- */
-const FilterButton = ({ category, name, image }) => {
-  const TRUNC_LENGTH = 20;
-  const nameShort = name.replace(/Model$/g, "");
-
-  return (
-    <>
-      <div
-        className={`${
-          category.includes(name) ? "btn-selected-filter" : "btn-filter"
-        }`}
-        title={name}
-      >
-        {image ? (
-          <Image
-            src={category.includes(name) ? deepchemCross : image}
-            alt={name}
-            width={14}
-          />
-        ) : (
-          category.includes(name) && (
-            <Image src={deepchemCross} alt={name} width={14} />
-          )
-        )}
-        <p
-          className={`${
-            category.includes(name)
-              ? "btn-text-selected-filter"
-              : "btn-text-filter"
-          }`}
-        >
-          {nameShort.length > TRUNC_LENGTH
-            ? nameShort.substring(0, TRUNC_LENGTH) + "..."
-            : nameShort}
-        </p>
-      </div>
-    </>
-  );
-};
-
-export default FilterButton;
diff --git a/new-website/deepchem/components/Models/FilterButton.js b/new-website/deepchem/components/common/FilterButton.js
similarity index 100%
rename from new-website/deepchem/components/Models/FilterButton.js
rename to new-website/deepchem/components/common/FilterButton.js
diff --git a/new-website/deepchem/pages/index.js b/new-website/deepchem/pages/index.js
index 7f9b15ab..80b6dddf 100644
--- a/new-website/deepchem/pages/index.js
+++ b/new-website/deepchem/pages/index.js
@@ -229,11 +229,11 @@ const Home = () => {
             title="Tutorials"
             link={"/tutorials"}
           />
-          {/* <ExploreCardItem
+          <ExploreCardItem
             image={"/images/explore-datasets.png"}
-            title="DATASETS"
-            link={"/datasets"}
-          /> */}
+            title="LAYERS"
+            link={"/layers"}
+          />
         </div>
       </section>
       {/* EXPLORE END */}
diff --git a/new-website/deepchem/pages/layers.js b/new-website/deepchem/pages/layers.js
index 72884ae4..f9eeca0d 100644
--- a/new-website/deepchem/pages/layers.js
+++ b/new-website/deepchem/pages/layers.js
@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react";
 import Image from "next/image";
 
 import LayerCard from "/components/Layers/LayerCard";
-import FilterButton from "/components/Layers/FilterButton";
+import FilterButton from "/components/common/FilterButton";
 
 import layers from "/data/layers/layers.json";
 import modelList from "/data/layers/models.json";
@@ -83,7 +83,7 @@ const Layers = () => {
       ></div>
       <div className= "flex flex-col items-start w-full px-[25px] 2xl:px-[300px] py-8 lg:py-16 gap-6">
         {/* HEADING BEGIN */}
-        <div className="flex flex-row w-[100%] items-center justify-between py-2.5">
+        <div className="flex flex-col w-[100%] justify-between py-2.5">
           <div className="lg:text-4xl text-[26px]">Our Layers</div>
           <div className="lg:hidden">
             <button className="min-w-0" onClick={handlePopUp}>
@@ -92,7 +92,7 @@ const Layers = () => {
           </div>
             {/* HEADING END */}
             {/* BODY BEGIN */}
-            <div className="flex flex-row items-start gap-12 w-full">
+            <div className="flex flex-col items-start gap-12 w-full">
               {/* FILTER SECTION BEGIN */}
               <div
                 className={`${
diff --git a/new-website/deepchem/pages/models.js b/new-website/deepchem/pages/models.js
index 8a201e7e..74c3464e 100644
--- a/new-website/deepchem/pages/models.js
+++ b/new-website/deepchem/pages/models.js
@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react";
 import Image from "next/image";
 
 import ModelCard from "/components/Models/ModelCard";
-import FilterButton from "/components/Models/FilterButton";
+import FilterButton from "/components/common/FilterButton";
 
 import models from "/data/models/models.json";
 import backendList from "/data/models/backends.json";
@@ -124,7 +124,6 @@ const Models = () => {
             </button>
           </div>
         </div>
-
         {/* HEADING END */}
         {/* BODY BEGIN */}
         <div className="flex flex-row items-start gap-12 w-full">
diff --git a/new-website/deepchem/styles/globals.css b/new-website/deepchem/styles/globals.css
index 7788a14c..fecf4abc 100644
--- a/new-website/deepchem/styles/globals.css
+++ b/new-website/deepchem/styles/globals.css
@@ -145,7 +145,7 @@ footer {
   @apply !shadow-none;
 }
 
-/* models page */
+/* models and layers page */
 @layer components {
   .btn-container-filter {
     @apply flex flex-row items-start gap-2.5 flex-wrap;
@@ -186,6 +186,14 @@ footer {
   .model-card {
     @apply h-fit md:min-h-[260px];
   }
+
+  .layer-container {
+    @apply w-full grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-3;
+  }
+
+  .layer-card {
+    @apply h-fit md:min-h-[260px];
+  }
 }
 
 /* tutorials page */
@@ -229,48 +237,4 @@ footer {
   }
 }
 
-/* layers page */
-@layer component {
-
-  .btn-container-filter {
-    @apply flex flex-row items-start gap-2.5 flex-wrap;
-  }
-
-  .rmv-filter {
-    @apply p-0 normal-case min-w-0;
-  }
-
-  .btn-filter {
-    @apply flex flex-row items-center gap-2.5 py-0.5 px-2 box-border bg-white border border-solid border-dc-light-gray rounded-md;
-  }
-
-  .btn-selected-filter {
-    @apply flex flex-row items-center gap-2.5 py-0.5 px-2 box-border bg-dc-light-gray border border-solid border-dc-light-gray rounded-md;
-  }
-
-  .btn-text-filter {
-    @apply text-[0.8rem] text-dc-gray text-ellipsis font-medium;
-  }
-
-  .btn-text-selected-filter {
-    @apply text-[0.8rem] text-dc-white break-all;
-  }
-
-  .category-text-filter {
-    @apply text-lg text-dc-light-blue;
-  }
-
-  .category-filter {
-    @apply flex flex-col items-start gap-2.5;
-  }
-
-  .layer-container {
-    @apply w-full grid grid-cols-1 md:grid-cols-2 3xl:grid-cols-3;
-  }
-
-  .layer-card {
-    @apply h-fit md:min-h-[260px];
-  }
-  
-}