feat: opening channel empty state (#366)

getAlby · Jul 30, 2024 · ce83cbe · ce83cbe
1 parent ffb6188
commit ce83cbe
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/frontend/src/components/EmptyState.tsx b/frontend/src/components/EmptyState.tsx
@@ -19,7 +19,7 @@ const EmptyState: React.FC<Props> = ({
   buttonLink,
 }) => {
   return (
-    <div className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm py-8">
+    <div className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm p-8">
       <div className="flex flex-col items-center gap-1 text-center max-w-sm">
         <Icon className="w-10 h-10 text-muted-foreground" />
         <h3 className="mt-4 text-lg font-semibold">{message}</h3>

diff --git a/frontend/src/screens/channels/first/OpeningFirstChannel.tsx b/frontend/src/screens/channels/first/OpeningFirstChannel.tsx
@@ -1,5 +1,7 @@
+import { Footprints } from "lucide-react";
 import React from "react";
 import { useNavigate } from "react-router-dom";
+import EmptyState from "src/components/EmptyState";
 import Loading from "src/components/Loading";
 import {
   Card,
@@ -47,9 +49,14 @@ export function OpeningFirstChannel() {
             </div>
           </CardContent>
         </Card>
-        <div className="w-full mt-40 gap-20 flex flex-col items-center justify-center">
-          <p>Feel free to leave this page or browse around Alby Hub!</p>
-          <p>We'll send you an email as soon as your channel is active.</p>
+        <div className="w-full mt-40 flex flex-col items-center justify-center">
+          <EmptyState
+            icon={Footprints}
+            title="Browse While You Wait"
+            description="Feel free to leave this page or browse around Alby Hub! We'll send you an email as soon as your channel is active."
+            buttonText="Explore Apps"
+            buttonLink="/appstore"
+          />
         </div>
       </div>
     </>