From 942c5284630c589e21f370c1d4c03c39d84122dc Mon Sep 17 00:00:00 2001
From: Fred <hello@fredkiss.dev>
Date: Wed, 17 Apr 2024 05:01:36 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20added=20cards=20on=20top?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../[network]/blobstream/page.tsx             | 131 ++++++++++++++++--
 apps/web/public/images/arbitrum_one.svg       |  36 +++++
 apps/web/public/images/base.svg               |   5 +
 apps/web/ui/icon-svgs/ARCube.svg              |   2 +-
 apps/web/ui/icons/ArCube.tsx                  |   3 +-
 5 files changed, 160 insertions(+), 17 deletions(-)
 create mode 100644 apps/web/public/images/arbitrum_one.svg
 create mode 100644 apps/web/public/images/base.svg

diff --git a/apps/web/app/(blobstream)/[network]/blobstream/page.tsx b/apps/web/app/(blobstream)/[network]/blobstream/page.tsx
index 3a5b1b43..174e7868 100644
--- a/apps/web/app/(blobstream)/[network]/blobstream/page.tsx
+++ b/apps/web/app/(blobstream)/[network]/blobstream/page.tsx
@@ -1,12 +1,18 @@
 import type { Metadata } from "next";
+import Image from "next/image";
+import Link from "next/link";
 import { capitalize } from "~/lib/shared-utils";
 import { Button } from "~/ui/button";
+import { ArCube } from "~/ui/icons";
 import { cn } from "~/ui/shadcn/utils";
 
 export type BlobStreamPageProps = {
   params: {
     network: string;
   };
+  searchParams?: {
+    stream?: string;
+  };
 };
 
 export function generateMetadata(props: BlobStreamPageProps) {
@@ -17,10 +23,15 @@ export function generateMetadata(props: BlobStreamPageProps) {
   };
 }
 
-export default function BlobStreamPage({ params }: BlobStreamPageProps) {
+export default function BlobStreamPage({ searchParams }: BlobStreamPageProps) {
+  const streamSources = ["arbitrum_one", "base"];
+
+  const selectedStream = streamSources.includes(searchParams?.stream ?? "")
+    ? searchParams?.stream
+    : streamSources[0];
   return (
     <main
-      className="max-w-3xl mx-auto my-12"
+      className="max-w-4xl mx-auto my-12"
       style={{
         "--color-primary": "212 100% 49%",
       }}
@@ -31,7 +42,28 @@ export default function BlobStreamPage({ params }: BlobStreamPageProps) {
           <h2 className="text-muted">Select to see blob streams:</h2>
         </div>
 
-        <div className="flex gap-6"></div>
+        <div className="flex gap-6">
+          <BlobStreamImageCard
+            image="/images/arbitrum_one.svg"
+            title="Arbitrum One"
+            subtitle="lorem ipsum dolor sit atmet"
+            link="?stream=arbitrum_one"
+            selected={selectedStream === "arbitrum_one"}
+          />
+          <BlobStreamImageCard
+            image="/images/base.svg"
+            title="Base"
+            subtitle="lorem ipsum dolor sit atmet"
+            link="?stream=base"
+            selected={selectedStream === "base"}
+          />
+          <BlobStreamImageCard
+            image="/images/ethereum.png"
+            title="Ethereum"
+            subtitle="lorem ipsum dolor sit atmet"
+            link="#"
+          />
+        </div>
         <div className="flex relative items-center justify-center border py-3 rounded-lg bg-primary/5 overflow-hidden">
           <div
             className="absolute top-0 bottom-0 left-0 right-2/3 bg-gradient-to-r from-primary to-transparent"
@@ -41,20 +73,20 @@ export default function BlobStreamPage({ params }: BlobStreamPageProps) {
             }}
           />
           <dl className="flex flex-col gap-2 items-center">
-            <div className="flex">
-              <dt>Latest Block on Celestia</dt>&nbsp;
+            <div className="flex items-center gap-1">
+              <ArCube className="h-4 w-4 text-primary" aria-hidden="true" />
+              <dt>Latest Block on Celestia</dt>
               <span className="" aria-hidden="true">
                 -
               </span>
-              &nbsp;
               <dd>1300</dd>
             </div>
-            <div className="flex">
-              <dt>Latest Synched Block </dt>&nbsp;
+            <div className="flex items-center gap-1">
+              <ArCube className="h-4 w-4 text-primary" aria-hidden="true" />
+              <dt>Latest Synched Block </dt>
               <span className="" aria-hidden="true">
                 -
               </span>
-              &nbsp;
               <dd>1000</dd>
             </div>
           </dl>
@@ -69,12 +101,18 @@ export default function BlobStreamPage({ params }: BlobStreamPageProps) {
           />
         </div>
 
-        <table>
+        <table className="rounded-lg text-left">
           <thead>
-            <tr>
-              <th className="font-medium">Transfer</th>
-              <th className="font-medium">File</th>
-              <th className="font-medium">Time</th>
+            <tr className="">
+              <th className="font-medium bg-muted-100 rounded-tl-lg px-3 py-2 border">
+                Transfer
+              </th>
+              <th className="font-medium bg-muted-100 px-3 py-2 border">
+                File
+              </th>
+              <th className="font-medium bg-muted-100 rounded-tr-lg px-3 py-2 border">
+                Time
+              </th>
             </tr>
           </thead>
           <tbody></tbody>
@@ -96,4 +134,69 @@ export default function BlobStreamPage({ params }: BlobStreamPageProps) {
   );
 }
 
+type BlobStreamImageCardProps = {
+  className?: string;
+  image: string;
+  title: string;
+  subtitle: string;
+  selected?: boolean;
+  link: string;
+  isUnavailable?: boolean;
+};
+
+function BlobStreamImageCard({
+  className,
+  image,
+  title,
+  subtitle,
+  link,
+  selected = false,
+  isUnavailable = false,
+}: BlobStreamImageCardProps) {
+  return (
+    <div
+      className={cn(
+        "relative flex items-start justify-between px-4 py-3 rounded-lg border-2",
+        "w-full focus-within:ring-2 focus-within:ring-primary/20 focus-within:border-primary",
+        selected && "border-primary",
+        className,
+      )}
+    >
+      <div className="flex flex-col gap-3 flex-grow">
+        <Image
+          src={image}
+          alt={`Logo ${title}`}
+          className="object-contain object-center h-8 w-8"
+          width={32}
+          height={32}
+        />
+
+        <div>
+          <Link
+            className="font-medium before:absolute before:inset-0 focus:outline-none"
+            href={link}
+            aria-current={selected && "page"}
+          >
+            {title}
+          </Link>
+          <p className="text-muted text-sm">{subtitle}</p>
+        </div>
+      </div>
+
+      <div className="w-12 relative" aria-hidden="true">
+        <div
+          className={cn(
+            "h-5 w-5 flex-none absolute top-0 right-0 rounded-full border flex items-center justify-center",
+            selected ? "bg-primary border-primary" : "bg-muted-100",
+          )}
+        >
+          {selected && (
+            <div className="bg-white shadow-md h-2 w-2 rounded-full"></div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export const runtime = "edge";
diff --git a/apps/web/public/images/arbitrum_one.svg b/apps/web/public/images/arbitrum_one.svg
new file mode 100644
index 00000000..a44288ba
--- /dev/null
+++ b/apps/web/public/images/arbitrum_one.svg
@@ -0,0 +1,36 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Layer_1" clip-path="url(#clip0_2580_4070)">
+<g id="Layer_x0020_1">
+<g id="_2405588477232">
+<g id="Group">
+<g id="Group_2">
+<path id="Vector" d="M0.978516 7.29595V16.7039C0.978516 17.3087 1.33372 17.8559 1.92572 18.1631L11.064 22.8671C11.6453 23.1647 12.3664 23.1647 12.9477 22.8671L22.086 18.1631C22.6672 17.8655 23.0332 17.3087 23.0332 16.7039V7.29595C23.0332 6.69115 22.678 6.14395 22.086 5.83675L12.9477 1.13275C12.3664 0.835146 11.6453 0.835146 11.064 1.13275L1.92572 5.83675C1.34448 6.13435 0.989279 6.69115 0.989279 7.29595H0.978516Z" fill="#213147"/>
+<g id="Group_3">
+<g id="Group_4">
+<g id="Group_5">
+<path id="Vector_2" d="M13.9907 13.8241L12.6883 17.0113C12.656 17.0977 12.656 17.1937 12.6883 17.2897L14.9271 22.7713L17.5212 21.4369L14.4105 13.8241C14.3351 13.6513 14.066 13.6513 13.9907 13.8241Z" fill="#12AAFF"/>
+</g>
+<g id="Group_6">
+<path id="Vector_3" d="M16.6058 8.46725C16.5304 8.29445 16.2613 8.29445 16.186 8.46725L14.8836 11.6544C14.8513 11.7408 14.8513 11.8368 14.8836 11.9328L18.554 20.9088L21.148 19.5744L16.6058 8.47685V8.46725Z" fill="#12AAFF"/>
+</g>
+</g>
+</g>
+<g id="Group_7">
+<path id="Vector_4" d="M12.0003 1.488C12.0649 1.488 12.1295 1.5072 12.1833 1.536L22.0643 6.624C22.1827 6.6816 22.2473 6.7968 22.2473 6.912V17.088C22.2473 17.2032 22.172 17.3184 22.0643 17.376L12.1833 22.464C12.1295 22.4928 12.0649 22.512 12.0003 22.512C11.9357 22.512 11.8712 22.4928 11.8173 22.464L1.93633 17.376C1.81793 17.3184 1.75335 17.2032 1.75335 17.088V6.9024C1.75335 6.7872 1.82869 6.672 1.93633 6.6144L11.8173 1.5264C11.8712 1.4976 11.9357 1.4784 12.0003 1.4784V1.488ZM12.0003 0C11.6451 0 11.3007 0.0768 10.9778 0.24L1.09676 5.328C0.46171 5.6544 0.0742188 6.2496 0.0742188 6.9024V17.0784C0.0742188 17.7312 0.46171 18.3264 1.09676 18.6528L10.9778 23.7408C11.2899 23.904 11.6451 23.9808 12.0003 23.9808C12.3555 23.9808 12.7 23.904 13.0229 23.7408L22.9039 18.6528C23.5389 18.3264 23.9264 17.7312 23.9264 17.0784V6.9024C23.9264 6.2496 23.5389 5.6544 22.9039 5.328L13.0121 0.24C12.7 0.0768 12.3448 0 11.9896 0H12.0003Z" fill="#9DCCED"/>
+</g>
+<path id="Vector_5" d="M5.45703 20.9184L6.37194 18.6912L8.20176 20.0448L6.49034 21.4464L5.45703 20.9184Z" fill="#213147"/>
+<g id="Group_8">
+<path id="Vector_6" d="M11.162 6.18245H8.65412C8.47114 6.18245 8.29892 6.28805 8.23434 6.44165L2.86328 19.5745L5.45732 20.9089L11.3773 6.44165C11.4311 6.30725 11.3235 6.17285 11.1728 6.17285L11.162 6.18245Z" fill="white"/>
+<path id="Vector_7" d="M15.5532 6.18245H13.0453C12.8623 6.18245 12.6901 6.28805 12.6255 6.44165L6.49023 21.4369L9.08427 22.7713L15.7577 6.44165C15.8115 6.30725 15.7039 6.17285 15.5532 6.17285V6.18245Z" fill="white"/>
+</g>
+</g>
+</g>
+</g>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_2580_4070">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/web/public/images/base.svg b/apps/web/public/images/base.svg
new file mode 100644
index 00000000..a814b760
--- /dev/null
+++ b/apps/web/public/images/base.svg
@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 513549">
+<path id="Vector" d="M11.9791 28C18.618 28 24 22.6274 24 16C24 9.37257 18.618 4 11.9791 4C5.6804 4 0.513182 8.8359 0 14.9913H15.8889V17.0087H8.6297e-08C0.513182 23.1641 5.6804 28 11.9791 28Z" fill="#0052FF"/>
+</g>
+</svg>
diff --git a/apps/web/ui/icon-svgs/ARCube.svg b/apps/web/ui/icon-svgs/ARCube.svg
index 457f6362..0d6661a2 100644
--- a/apps/web/ui/icon-svgs/ARCube.svg
+++ b/apps/web/ui/icon-svgs/ARCube.svg
@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M12.0002 12.0001V21.2814M12.0002 12.0001L20.25 7.3595M12.0002 12.0001L3.75 7.3595M11.5097 2.99464L4.25974 7.07276C3.94486 7.24988 3.75 7.58306 3.75 7.94434V16.0559C3.75 16.4172 3.94486 16.7503 4.25974 16.9275L11.5097 21.0056C11.8142 21.1768 12.1858 21.1768 12.4903 21.0056L19.7403 16.9275C20.0551 16.7503 20.25 16.4172 20.25 16.0559V7.94434C20.25 7.58306 20.0551 7.24988 19.7403 7.07276L12.4903 2.99464C12.1858 2.8234 11.8142 2.8234 11.5097 2.99464Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
 </svg>
\ No newline at end of file
diff --git a/apps/web/ui/icons/ArCube.tsx b/apps/web/ui/icons/ArCube.tsx
index 13a73b53..be7015f3 100644
--- a/apps/web/ui/icons/ArCube.tsx
+++ b/apps/web/ui/icons/ArCube.tsx
@@ -3,8 +3,7 @@ import type { SVGProps } from "react";
 const SvgArCube = (props: SVGProps<SVGSVGElement>) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width={24}
-    height={24}
+    viewBox="0 0 24 24"
     fill="none"
     {...props}
   >