feat: update UI of Mint page

rooch-network · May 15, 2024 · b343295 · b343295
1 parent 9ead0bd
commit b343295
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 11 deletions.
diff --git a/rooch-portal-v1/src/common/interface.ts b/rooch-portal-v1/src/common/interface.ts
@@ -74,4 +74,5 @@ export type PaymentTypes = {
 export type TabItem = {
   id: string
   label: string
+  available: boolean
 }
diff --git a/rooch-portal-v1/src/pages/mint/components/featured-sfts.tsx b/rooch-portal-v1/src/pages/mint/components/featured-sfts.tsx
@@ -4,7 +4,6 @@ import { useEffect, useState } from 'react'
 import {
   Table,
   TableBody,
-  TableCaption,
   TableCell,
   TableHead,
   TableHeader,
@@ -72,7 +71,6 @@ export const FeaturedSfts = () => {
   return (
     <div className="rounded-lg border w-full">
       <Table>
-        <TableCaption className="text-left pl-2 mb-2">Lorem ipsum dolor sit.</TableCaption>
         <TableHeader>
           <TableRow>
             <TableHead className="w-[150px]">SFT Name</TableHead>

diff --git a/rooch-portal-v1/src/pages/mint/components/sft-tabs.tsx b/rooch-portal-v1/src/pages/mint/components/sft-tabs.tsx
@@ -1,25 +1,41 @@
 // Copyright (c) RoochNetwork
 // SPDX-License-Identifier: Apache-2.0
 import { useState } from 'react'
-
 import { FeaturedSfts } from './featured-sfts'
 import { Tokens } from './tokens'
-
 import { TabItem } from '@/common/interface'
+import { AlertCircle } from 'lucide-react'
 
 const mintTabItems: TabItem[] = [
-  { id: 'allTokens', label: 'All Tokens' },
-  { id: 'featuredTokens', label: 'Featured Tokens' },
+  { id: 'allTokens', label: 'All Tokens', available: false },
+  { id: 'featuredTokens', label: 'Featured Tokens', available: false },
 ]
 
 export const SftTabs = () => {
   const [activeId, setActiveId] = useState<string>('allTokens')
 
-  const handleTabClick = (id: string) => {
-    setActiveId(id)
+  const handleTabClick = (id: string, available: boolean) => {
+    if (available) {
+      setActiveId(id)
+    }
   }
 
+  const renderComingSoon = () => (
+    <div className="flex flex-col items-center justify-center text-center text-xl text-muted-foreground mt-10 animate-pulse">
+      <AlertCircle className="w-12 h-12 mb-4 text-blue-500" />
+      <p className="mb-2 font-semibold">Coming Soon!</p>
+      <p className="text-base text-gray-500">
+        We're working hard to bring this feature to you. Stay tuned!
+      </p>
+    </div>
+  )
+
   const renderTabContent = () => {
+    const activeTab = mintTabItems.find((item) => item.id === activeId)
+    if (activeTab && !activeTab.available) {
+      return renderComingSoon()
+    }
+
     switch (activeId) {
       case 'allTokens':
         return <FeaturedSfts />
@@ -41,7 +57,7 @@ export const SftTabs = () => {
                 ? 'border-b-2 border-blue-500 text-blue-500'
                 : 'border-b-2 border-transparent text-muted-foreground'
             } hover:text-blue-500 transition-all`}
-            onClick={() => handleTabClick(item.id)}
+            onClick={() => handleTabClick(item.id, item.available)}
           >
             <p className="font-semibold text-sm">{item.label}</p>
           </button>

diff --git a/rooch-portal-v1/src/pages/mint/components/tokens.tsx b/rooch-portal-v1/src/pages/mint/components/tokens.tsx
@@ -3,7 +3,6 @@
 import {
   Table,
   TableBody,
-  TableCaption,
   TableCell,
   TableHead,
   TableHeader,
@@ -59,7 +58,6 @@ export const Tokens = () => {
   return (
     <div className="rounded-lg border w-full">
       <Table>
-        <TableCaption className="text-left pl-2 mb-2">Lorem ipsum dolor sit.</TableCaption>
         <TableHeader>
           <TableRow>
             <TableHead className="w-[150px]">SFT Name</TableHead>