osias-trade/nexa-trade
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Small changes

Browse Source
This commit is contained in:
selimaj-dev
2026-02-12 15:05:35 +01:00
parent 2e16ed4127
commit 582b706f68
1 changed files with 101 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/markets/components/TokenCard.tsx
+51 -37
View File
@@ -1,10 +1,5 @@
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
import MinimalTooltip from "@/components/utils/MinimalTooltip";
import { humanizeNumber } from "@/lib/renderUtils";
import { cn } from "@/lib/utils";
@@ -40,7 +35,10 @@ export default function TokenCard({ token }: { token: Token }) {
return (
<div
className="flex gap-4 cursor-pointer"
className="
flex flex-col gap-3 cursor-pointer
md:flex-row md:gap-4
"
onClick={(e) => {
if (e.ctrlKey || e.metaKey) {
window.open(`/token/${token.mint}`, "_blank", "noopener,noreferrer");
@@ -52,81 +50,89 @@ export default function TokenCard({ token }: { token: Token }) {
window.open(`/token/${token.mint}`, "_blank", "noopener,noreferrer")
}
>
<div className="h-full overflow-hidden min-w-0">
{/* Left: logo */}
<div className="flex gap-3 md:gap-4 min-w-0">
<div className="h-full overflow-hidden">
{token.logoURI ? (
<img
src={token.logoURI}
alt="Token"
className="w-16 h-16 rounded-lg"
className="w-14 h-14 md:w-16 md:h-16 rounded-lg"
/>
) : (
<div className="w-16 h-16 bg-primary/20 rounded-lg flex items-center justify-center">
<div className="w-14 h-14 md:w-16 md:h-16 bg-primary/20 rounded-lg flex items-center justify-center">
<CoinsIcon className="text-primary" />
</div>
)}
<p className="mt-1 truncate text-xs text-muted-foreground"></p>
</div>
<div className="flex flex-col gap-1">
<div className="flex gap-1.5">
{/* Main content */}
<div className="flex flex-col gap-1 min-w-0">
{/* Symbol + name */}
<div className="flex gap-1.5 items-center flex-wrap">
<p className="font-semibold">{token.symbol}</p>
<p
className="text-muted-foreground flex gap-1 items-center h-max cursor-pointer hover:text-accent"
className="text-muted-foreground flex gap-1 items-center cursor-pointer hover:text-accent truncate"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
navigator.clipboard.writeText(token.mint);
}}
>
{token.name} <CopyIcon className="w-4 h-4" />
{token.name}
<CopyIcon className="w-4 h-4 shrink-0" />
</p>
</div>
<div className="items-center flex gap-3">
<p className="text-green-500 text-sm">20m</p>
{/* Stats */}
<div className="items-center flex gap-3 flex-wrap text-xs md:text-sm">
<p className="text-green-500">20m</p>
<MinimalTooltip label="Holders">
<p className="text-sm flex gap-1 items-center">
<p className="flex gap-1 items-center">
<UsersIcon className="w-3.5 h-3.5 text-muted-foreground" />
10
</p>
</MinimalTooltip>
<MinimalTooltip label="Live NEXA viewers">
<p className="text-sm flex gap-1 items-center">
<p className="flex gap-1 items-center">
<EyeIcon className="w-3.5 h-3.5" />
10
</p>
</MinimalTooltip>
</div>
<div className="flex gap-1.5 items-center text-xs text-[#5DBCFF]">
{/* Twitter */}
<div className="flex gap-2 items-center text-xs text-[#5DBCFF] flex-wrap">
{token.twitterPost ? (
<>
<MinimalTooltip label="Twitter author">
<Link
className="hover:underline"
target="_blank"
href={`https://x.com/${token.twitterPost.author?.username}`}
onClick={(e) => {
e.stopPropagation();
}}
onClick={(e) => e.stopPropagation()}
>
by @{token.twitterPost.author?.username}
</Link>
</MinimalTooltip>
<MinimalTooltip label="Followers">
<p className="flex gap-0.5 items-center">
<UserIcon className="w-3 h-3" />
{humanizeNumber(token.twitterPost.author?.followers)}
</p>
</MinimalTooltip>
</>
) : (
<span className="invisible">by @username</span>
)}
</div>
<div className="items-center flex gap-2">
<MinimalTooltip independent label="Top 10 holders">
{/* Badges */}
<div className="flex gap-1.5 items-center flex-wrap">
<MinimalTooltip independent label="Top 10 Holders">
<TokenBadge value={live.topHolder} icon={UserStarIcon} />
</MinimalTooltip>
<MinimalTooltip independent label="Developer holdings">
<MinimalTooltip independent label="Dev Holdings">
<TokenBadge value={live.devHold} icon={ChefHatIcon} />
</MinimalTooltip>
@@ -143,23 +149,31 @@ export default function TokenCard({ token }: { token: Token }) {
</MinimalTooltip>
</div>
</div>
<div className="ml-auto flex flex-col">
<MinimalTooltip label="Market Cap">
<TokenDigit name="MC" value="$15.6k" />
</MinimalTooltip>
</div>
<MinimalTooltip label="Volume">
{/* Right column */}
<div
className="
flex flex-row justify-between items-center gap-3
md:ml-auto md:flex-col md:items-end
"
>
<div className="flex gap-4 md:flex-col md:gap-1">
<TokenDigit name="MC" value="$15.6k" />
<TokenDigit name="V" value="$42k" />
</MinimalTooltip>
</div>
<Button
className="mt-auto ml-auto p-1.5! h-max w-max rounded-full bg-primary/20 text-primary hover:text-black gap-1 text-xs"
className="
ml-auto rounded-full bg-primary/20 text-primary gap-1 text-xs
py-1.5! h-max md:rounded-full hover:text-accent-foreground
"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
}}
>
<ZapIcon />1 SOL
<ZapIcon className="w-4 h-4" />1 SOL
</Button>
</div>
</div>