Merge pull request #20 from rohitg00/next13-appdir

Next13 appdir
rohitg00 · Jan 21, 2023 · ccb529c · ccb529c
2 parents 62b8149 + c4e58a4
commit ccb529c
Show file tree

Hide file tree

Showing 13 changed files with 897 additions and 182 deletions.
diff --git a/app/app/layout.js b/app/app/layout.js
@@ -1,11 +1,15 @@
 import 'styles/globals.css';
+import Footer from '../components/footer';
 
 export default function RootLayout({
   children,
 }) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body>
+        {children}
+        <Footer />
+      </body>
     </html>
   );
 }

diff --git a/app/app/page.js b/app/app/page.js
@@ -2,6 +2,7 @@ import Hero from "../components/Hero/Hero";
 import Nav from "../components/Hero/Nav";
 import { getTweets } from '../lib/twitterAPI.js';
 import Timeline from "../components/Timeline";
+import Footer from "../components/footer";
 
 let imgUrl = "bgdevops.gif";
 const gifStyle = {
@@ -10,7 +11,7 @@ const gifStyle = {
 };
 
 export default async function Home() {
-  const tweets = await getTweets(["1537460982582128641", "1581497472043536385", "1586751198962495489", "1523372831513673729", "1526398860389519361", "1555793156847063040", "1547812558295670784", "1560892185842941953"]);
+  const tweets = await getTweets(["1586751198962495489", "1555793156847063040", "1560892185842941953", "1591643164196372480", "1590550565142290432", "1602540813338423296", "1596569166349467648", "1581497472043536385"]);
 
   return (
     <>

diff --git a/app/app/resources/FilterResource.js b/app/app/resources/FilterResource.js
@@ -23,25 +23,46 @@ function FilterResource({ resource }) {
             }
         });
     }
+
     return (
         <>
-            <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-[2.25rem] justify-center">
-                    <input
-                        type="search"
-                        name="search-form"
-                        id="search-form"
-                        className="focus:outline-0 mt-5  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 className="relative flex flex-col items-center z-20 sm:items-start sm:flex-row sm:justify-around mt-[4vh] ">
+                <div className="sm:text-start text-center sm:mr-20 sm:max-w-[40vw] mt-[7vh] sm:mt-[10vh] ">
+                    <h1 className="mb-4 text-5xl sm:text-3xl  text-white  dark:text-white  md:text-6xl xl:text-7xl 2xl:text-8xl font-lato font-[900]">
+                        DevOps
+                        <br />
+                        <span className="bg-gradient-to-r from-[#CC03FE] to-[#E34B2E] bg-clip-text text-transparent font-lato font-[900] text-5xl md:text-6xl xl:text-7xl 2xl:text-8xl ">
+                            Resources
+                        </span>
+                    </h1>
+                </div>
+            </div>
+            <div className="m-auto">
+                <div className='max-w-xl mx-auto'>
+                    <div className="relative flex items-center w-full h-12 rounded-lg focus-within:shadow-lg bg-white overflow-hidden">
+                        <div className="grid place-items-center h-full w-12 text-gray-300">
+                            <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                            </svg>
+                        </div>
+
+                        <input
+                            className="peer h-full w-full outline-none text-sm text-gray-700 pr-2"
+                            type="text"
+                            id="search"
+                            value={q}
+                            placeholder="Search for resources..."
+                            onChange={(e) => {
+                                setQ(e.target.value);
+                                setTrigger(true);
+                            }}
+                            onKeyDown={e => {
+                                if (e.key === "Escape") {
+                                    setQ("")
+                                }
+                            }}
+                        />
+                    </div>
                 </div>
                 <div className="flex flex-col items-center">
                     {trigger &&
@@ -53,7 +74,7 @@ function FilterResource({ resource }) {
                                             setQ(x.name);
                                             setTrigger(false);
                                         }}
-                                        className=" bg-white p-1 w-64 border border-grey-600 min-h-10 md:h-8 sm:w-6/12 md:w-10/11"
+                                        className="bg-white p-1 border border-grey-600 min-h-10 md:h-8 w-full md:w-10/11 md:max-w-xl"
                                     >
                                         {x.name}
                                     </div>

diff --git a/app/components/Hero/Hero.js b/app/components/Hero/Hero.js
@@ -9,25 +9,25 @@ const Hero = () => {
   const box2Text = "Resources";
   return (
     <div className="relative flex min-h-[80vh] flex-col items-center z-20 sm:items-start sm:flex-row sm:justify-around mt-[12vh] ">
-    <div className="sm:text-start text-center sm:mr-20 sm:max-w-[40vw] mt-[7vh] sm:mt-[10vh] ">
-      <h1 className="mb-4 text-5xl sm:text-3xl  text-white  dark:text-white  md:text-6xl xl:text-7xl 2xl:text-8xl font-lato font-[900]">
-        DevOps
-        <br />
-        <span className="bg-gradient-to-r from-[#CC03FE] to-[#E34B2E] bg-clip-text text-transparent font-lato font-[900] text-5xl md:text-6xl xl:text-7xl 2xl:text-8xl ">
-          Community
-        </span>
-      </h1>
-      <p className="sm:text-lg  text-white dark:text-white lg:text-xl 2xl:text-4xl font-lato font-[400]">
-        DevOps/SRE community is for those folks who are trying to learn or
-        explore DevOps with the help of experienced professionals.
-        Opportunities are open to share.
-      </p>
+      <div className="sm:text-start text-center sm:mr-20 sm:max-w-[40vw] mt-[7vh] sm:mt-[10vh] ">
+        <h1 className="mb-4 text-5xl sm:text-3xl  text-white  dark:text-white  md:text-6xl xl:text-7xl 2xl:text-8xl font-lato font-[900]">
+          DevOps
+          <br />
+          <span className="bg-gradient-to-r from-[#CC03FE] to-[#E34B2E] bg-clip-text text-transparent font-lato font-[900] text-5xl md:text-6xl xl:text-7xl 2xl:text-8xl ">
+            Community
+          </span>
+        </h1>
+        <p className="sm:text-lg  text-white dark:text-white lg:text-xl 2xl:text-4xl font-lato font-[400]">
+          DevOps/SRE community is for those folks who are trying to learn or
+          explore DevOps with the help of experienced professionals.
+          Opportunities are open to share.
+        </p>
+      </div>
+      <div className="mt-10 sm:mt-0 sm:max-w-[40vw]  sm:align-baseline">
+        <Box1 img1Url={img1Url} box1Text={box1Text} />
+        <Box2 img2Url={img2Url} box2Text={box2Text} />
+      </div>
     </div>
-    <div className="mt-10 sm:mt-0 sm:max-w-[40vw]  sm:align-baseline">
-      <Box1 img1Url={img1Url} box1Text={box1Text} />
-      <Box2 img2Url={img2Url} box2Text={box2Text} />
-    </div>
-  </div>
   );
 };
 

diff --git a/app/components/Timeline.jsx b/app/components/Timeline.jsx
@@ -138,7 +138,7 @@ export default function Timeline({ tweets }) {
       <div className={styles.bg}>
         <VerticalTimeline lineColor={'#F3F3F3'}>
           {tweets.map((tweet) => {
-            return <div key={tweet}>{render(tweet)}</div>;
+            return <div key={tweet.id}>{render(tweet)}</div>;
           })}
           <VerticalTimelineElement
             iconStyle={{
@@ -157,14 +157,23 @@ export default function Timeline({ tweets }) {
     );
   } else {
     return (
-      <main
-        className="flex flex-col justify-center px-8 bg-gray-50 dark:bg-black"
-      >
-      <div className="flex flex-col justify-center items-start max-w-2xl mx-auto mb-16">
-        {tweets.map((tweet) => (
-          <Tweet key={tweet.id} {...tweet} />
-        ))}
-      </div>
+      <main className='flex flex-col justify-center bg-gray-50 dark:bg-black'>
+        <div className='flex flex-col justify-center items-start max-w-2xl mx-auto mb-4'>
+          {tweets.map((tweet) => (
+            <div
+              key={tweet.id}
+              className='rounded border border-gray-300 dark:border-gray-800 m-2'
+            >
+              <Tweet
+                key={tweet.id}
+                {...tweet}
+              />
+            </div>
+          ))}
+        </div>
+        <Link href={'/resources'}>
+          <div className={styles.button1}>See All</div>
+        </Link>
       </main>
     );
   }