diff --git a/rooch-portal-v1/src/common/interface.ts b/rooch-portal-v1/src/common/interface.ts index cbec0397e7..c667d1612c 100644 --- 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 index 8e2ac3c46f..94113cdf37 100644 --- 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 (
- Lorem ipsum dolor sit. SFT Name diff --git a/rooch-portal-v1/src/pages/mint/components/sft-tabs.tsx b/rooch-portal-v1/src/pages/mint/components/sft-tabs.tsx index c00e580ff6..4cdb302755 100644 --- 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('allTokens') - const handleTabClick = (id: string) => { - setActiveId(id) + const handleTabClick = (id: string, available: boolean) => { + if (available) { + setActiveId(id) + } } + const renderComingSoon = () => ( +
+ +

Coming Soon!

+

+ We're working hard to bring this feature to you. Stay tuned! +

+
+ ) + const renderTabContent = () => { + const activeTab = mintTabItems.find((item) => item.id === activeId) + if (activeTab && !activeTab.available) { + return renderComingSoon() + } + switch (activeId) { case 'allTokens': return @@ -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)} >

{item.label}

diff --git a/rooch-portal-v1/src/pages/mint/components/tokens.tsx b/rooch-portal-v1/src/pages/mint/components/tokens.tsx index 7ff3222ebf..e9538ec304 100644 --- 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 (
- Lorem ipsum dolor sit. SFT Name