From a7d124073f82b497e67bed665cef0c468fe715ac Mon Sep 17 00:00:00 2001
From: Juan Di Toro <ditorojuanf@gmail.com>
Date: Wed, 15 Nov 2023 10:35:32 +0100
Subject: [PATCH] feat: all features are covered

---
 src/app/page.tsx             | 132 +++++++++++++++++++++++++++++++----
 src/components/SearchBar.tsx |   5 +-
 2 files changed, 122 insertions(+), 15 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index dc6ddc9..cd08bf9 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -9,23 +9,35 @@ export default function Home() {
   return (
     <>
       <SearchBar />
-
-      <div className="flex flex-row flex-wrap justify-between w-full">
-        <Feed />
-        <Feed />
-        <Feed />
+      <div className="space-y-8 w-full my-10">
+        <div className="flex flex-row flex-wrap justify-between w-full">
+          <Feed title="Latest from the community" icon={PaperIcon} className="w-[calc(33%-16px)] max-w-md" />
+          <Feed title="Rising Posts" icon={TrendUpIcon} className="w-[calc(33%-16px)] max-w-md" />
+          <Feed title="Top Posts" icon={TopArrowLodashIcon} className="w-[calc(33%-16px)] max-w-md" />
+        </div>
+        <Feed title="Another heading" icon={TrendUpIcon} className="w-full" variant="row" />
       </div>
     </>
   )
 }
 
-const Feed = () => {
+const Feed = ({
+  className,
+  variant = "col",
+  icon: Icon,
+  title
+}: {
+  className?: string
+  variant?: "row" | "col"
+  title: string
+  icon: (props: React.HTMLAttributes<SVGAElement>) => React.ReactNode | JSX.Element
+}) => {
   return (
-    <section className="flex flex-col space-y-6 w-[calc(33%-24px)] max-w-md">
+    <section className={`flex flex-col space-y-6 ${className}`}>
       <header className="flex flex-row space-x-3 items-start">
-        <PaperIcon className="text-primary mt-1" />
+        <Icon className="text-primary mt-1" />
         <nav>
-          <h3 className="text-primary text-xl">Latest community posts</h3>
+          <h3 className="text-primary text-xl">{title}</h3>
           <ul className="text-gray-400 text-sm list-none [&>li:hover]:cursor-pointer [&>li:hover]:text-white">
             <li className="text-white inline after:content-['/'] after:mx-1 after:text-gray-400">
               latest
@@ -40,8 +52,40 @@ const Feed = () => {
           </ul>
         </nav>
       </header>
-      <div className="@container space-y-4 w-full">
-        <article className="flex bg-gray-800 flex-col @md:flex-row justify-between w-full py-4 px-6 rounded">
+      <div className={`w-full flex gap-4 max-h-[400px] flex-${variant} ${variant === 'col' ? "overflow-y-auto" : "overflow-x-auto"}`}>
+        <article className="flex bg-gray-800 flex-col justify-between w-full py-4 px-6 rounded">
+          <span className="inline-block text-gray-500 w-full flex-1">
+            1h ago
+          </span>
+          <p className="inline-block text-white w-[25ch] flex-auto">
+            Bitcoin (BTC) Price Prediction: When Will Bitcoin Reach $100,000?
+          </p>
+        </article>
+        <article className="flex bg-gray-800 flex-col justify-between w-full py-4 px-6 rounded">
+          <span className="inline-block text-gray-500 w-full flex-1">
+            1h ago
+          </span>
+          <p className="inline-block text-white w-[25ch] flex-auto">
+            Bitcoin (BTC) Price Prediction: When Will Bitcoin Reach $100,000?
+          </p>
+        </article>
+        <article className="flex bg-gray-800 flex-col justify-between w-full py-4 px-6 rounded">
+          <span className="inline-block text-gray-500 w-full flex-1">
+            1h ago
+          </span>
+          <p className="inline-block text-white w-[25ch] flex-auto">
+            Bitcoin (BTC) Price Prediction: When Will Bitcoin Reach $100,000?
+          </p>
+        </article>
+        <article className="flex bg-gray-800 flex-col justify-between w-full py-4 px-6 rounded">
+          <span className="inline-block text-gray-500 w-full flex-1">
+            1h ago
+          </span>
+          <p className="inline-block text-white w-[25ch] flex-auto">
+            Bitcoin (BTC) Price Prediction: When Will Bitcoin Reach $100,000?
+          </p>
+        </article>
+        <article className="flex bg-gray-800 flex-col justify-between w-full py-4 px-6 rounded">
           <span className="inline-block text-gray-500 w-full flex-1">
             1h ago
           </span>
@@ -54,7 +98,7 @@ const Feed = () => {
   )
 }
 
-const PaperIcon = ({ className }: { className: string }) => {
+const PaperIcon = ({ className }: { className?: string }) => {
   return (
     <svg
       width="24"
@@ -71,3 +115,67 @@ const PaperIcon = ({ className }: { className: string }) => {
     </svg>
   )
 }
+const TopArrowLodashIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.0001 4.97949L16.7458 9.72518H7.25439L12.0001 4.97949Z"
+        fill="currentColor"
+      />
+      <path
+        d="M12.7896 22.0004V8.23828H11.2106V22.0004H12.7896Z"
+        fill="currentColor"
+      />
+      <path
+        d="M16.7456 3.57846V1.99951L7.25423 1.99951V3.57846L16.7456 3.57846Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+const TrendUpIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="none"
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-path="url(#clip0_61_503)">
+        <path
+          d="M23.0769 6L13.5769 15.5L8.5769 10.5L1.0769 18"
+          stroke="#ACF9C0"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M17.0769 6H23.0769V12"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_61_503">
+          <rect
+            width="24"
+            height="24"
+            fill="white"
+            transform="translate(0.0769043)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index 2e11157..61237e0 100644
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
@@ -14,10 +14,9 @@ import { usePathname, useSearchParams, useRouter } from "next/navigation"
 import { formatDate, getResults } from "@/utils"
 
 type Props = {
-  variant: "default" | "simplified"
 }
 
-const SearchBar = ({ variant }: Props) => {
+const SearchBar = ({ }: Props) => {
   const searchParams = useSearchParams()
   const router = useRouter()
   const pathname = usePathname()
@@ -70,7 +69,7 @@ const SearchBar = ({ variant }: Props) => {
 
   return (
     <div
-      className={`w-full p-4 border-2 ${
+      className={`w-full mt-8  p-4 border-2 ${
         results.length > 0 ? "border-sky-300 bg-gray-950" : "border-primary"
       }`}
     >