Merge pull request #15 from Chiranjeev-droid/resources-page

resource page ui improved
rohitg00 · Jan 8, 2023 · 0c11e71 · 0c11e71
2 parents 30227d2 + 10a4ccc
commit 0c11e71
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 55 deletions.
diff --git a/app/components/Timeline.jsx b/app/components/Timeline.jsx
@@ -36,7 +36,7 @@ export default function Timeline() {
       '1602253569335255045',
     ]);
     // console.log(size.width);
-  });
+  },[]);
 
   function render(tweet) {
     console.log(tweets.indexOf(tweet));

diff --git a/app/pages/resources/index.js b/app/pages/resources/index.js
@@ -124,61 +124,65 @@ export default function Home() {
     });
   }
   if (resource) {
-    return (
-      <div className="bg-[#070707] min-h-screen">
-        <Nav />
-        <h1 className="flex text-white text-2xl justify-center sm:text-5xl font-bold pt-10">
-          ALL RESOURCES
-        </h1>
-        <div className=" m-auto">
-          <div className="flex md:h-12 md:mb-[1.8rem] justify-center">
-            <input
-              type="search"
-              name="search-form"
-              id="search-form"
-              className="mt-5 ml-[2px] w-64  h-8 md:mt-9 pl-2 md:w-10/11 md:h-12 sm:w-6/12"
-              placeholder="Search for..."
-              value={q}
-              onChange={(e) => {
-                setQ(e.target.value);
-                setTrigger(true);
-              }}
-            />
-          </div>
-          <div className="sm:mt-9 flex flex-col ml-[3.8rem] sm:ml-[29.8rem]">
-            <div className="mb-5">
-              {trigger &&
-                search(filtered)?.map((x) => {
-                  return (
-                    q && (
-                      <div
-                        onClick={() => {
-                          setQ(x.name);
-                          setTrigger(false);
-                        }}
-                        className=" bg-white w-[16rem] p-1 border border-grey-600 mr-40 min-h-10  sm:w-[59.6rem] md:h-8"
-                      >
-                        {x.name}
-                      </div>
-                    )
-                  );
-                })}
-            </div>
-          </div>
-          <div className="flex justify-center">
-            <Filter
-              resources={resource}
-              setFiltered={setFiltered}
-              activeOption={activeOption}
-              setActiveOption={setActiveOption}
-            />
-          </div>
-
-          <div>
-            <AllCards data={filtered} search={search} />
-          </div>
-        </div>
+    return (<>
+
+      <div className="bg-black  min-h-screen py-6 px-5 sm:px-16 bg-[url('/elipses.png')]  bg-repeat bg-contain">
+        <Nav></Nav>
+        <div className=" ">
+    <h1 className="flex text-white text-2xl justify-center sm:text-5xl font-bold pt-10">
+    ALL RESOURCES
+  </h1>
+  <div className=" m-auto">
+    <div className="flex md:h-12 md:mb-[1.8rem] justify-center">
+      <input
+        type="search"
+        name="search-form"
+        id="search-form"
+        className="mt-5 ml-[2px] w-64  h-8 md:mt-9 pl-2 md:w-10/11 md:h-12 sm:w-6/12"
+        placeholder="Search for..."
+        value={q}
+        onChange={(e) => {
+          setQ(e.target.value);
+          setTrigger(true);
+        }}
+      />
+    </div>
+    <div className="sm:mt-9 flex flex-col ml-[3.8rem] sm:ml-[29.8rem]">
+      <div className="mb-5">
+        {trigger &&
+          search(filtered)?.map((x) => {
+            return (
+              q && (
+                <div
+                  onClick={() => {
+                    setQ(x.name);
+                    setTrigger(false);
+                  }}
+                  className=" bg-white w-[16rem] p-1 border border-grey-600 mr-40 min-h-10  sm:w-[59.6rem] md:h-8"
+                >
+                  {x.name}
+                </div>
+              )
+            );
+          })}
       </div>
+    </div>
+    <div className="flex justify-center">
+      <Filter
+        resources={resource}
+        setFiltered={setFiltered}
+        activeOption={activeOption}
+        setActiveOption={setActiveOption}
+      />
+    </div>
+
+    <div>
+      <AllCards data={filtered} search={search} />
+    </div>
+    </div>
+    </div>
+    </div>
+      </>
     );
   }
 }