Tooltips
This commit is contained in:
+2
-1
@@ -1,6 +1,7 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { TooltipProvider } from "@/components/ui/tooltip";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
@@ -27,7 +28,7 @@ export default function RootLayout({
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
>
|
||||
{children}
|
||||
<TooltipProvider>{children}</TooltipProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
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";
|
||||
import { Token, TokenLiveData } from "@/modules/tokens/types";
|
||||
@@ -35,7 +41,13 @@ export default function TokenCard({ token }: { token: Token }) {
|
||||
return (
|
||||
<div
|
||||
className="flex gap-4 cursor-pointer"
|
||||
onClick={() => router.push(`/token/${token.mint}`)}
|
||||
onClick={(e) => {
|
||||
if (e.ctrlKey || e.metaKey) {
|
||||
window.open(`/token/${token.mint}`, "_blank", "noopener,noreferrer");
|
||||
} else {
|
||||
router.push(`/token/${token.mint}`);
|
||||
}
|
||||
}}
|
||||
onContextMenu={() =>
|
||||
window.open(`/token/${token.mint}`, "_blank", "noopener,noreferrer")
|
||||
}
|
||||
@@ -70,48 +82,76 @@ export default function TokenCard({ token }: { token: Token }) {
|
||||
</div>
|
||||
<div className="items-center flex gap-3">
|
||||
<p className="text-green-500 text-sm">20m</p>
|
||||
<p className="text-sm flex gap-1 items-center">
|
||||
<UsersIcon className="w-3.5 h-3.5 text-muted-foreground" />
|
||||
10
|
||||
</p>
|
||||
<p className="text-sm flex gap-1 items-center">
|
||||
<EyeIcon className="w-3.5 h-3.5" />
|
||||
10
|
||||
</p>
|
||||
<MinimalTooltip label="Holders">
|
||||
<p className="text-sm 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">
|
||||
<EyeIcon className="w-3.5 h-3.5" />
|
||||
10
|
||||
</p>
|
||||
</MinimalTooltip>
|
||||
</div>
|
||||
<div className="flex gap-1.5 items-center text-xs text-[#5DBCFF]">
|
||||
{token.twitterPost ? (
|
||||
<>
|
||||
<Link
|
||||
className="hover:underline"
|
||||
target="_blank"
|
||||
href={`https://x.com/${token.twitterPost.author?.username}`}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
by @{token.twitterPost.author?.username}
|
||||
</Link>
|
||||
<p className="flex gap-0.5 items-center">
|
||||
<UserIcon className="w-3 h-3" />
|
||||
{humanizeNumber(token.twitterPost.author?.followers)}
|
||||
</p>
|
||||
<MinimalTooltip label="Twitter author">
|
||||
<Link
|
||||
className="hover:underline"
|
||||
target="_blank"
|
||||
href={`https://x.com/${token.twitterPost.author?.username}`}
|
||||
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">
|
||||
<TokenBadge value={live.topHolder} icon={UserStarIcon} />
|
||||
<TokenBadge value={live.devHold} icon={ChefHatIcon} />
|
||||
<TokenBadge value={live.snipersHold} icon={CrosshairIcon} />
|
||||
<TokenBadge value={live.insidersHold} icon={GhostIcon} />
|
||||
<TokenBadge value={live.bundleHold} icon={BoxesIcon} />
|
||||
<MinimalTooltip independent label="Top 10 holders">
|
||||
<TokenBadge value={live.topHolder} icon={UserStarIcon} />
|
||||
</MinimalTooltip>
|
||||
|
||||
<MinimalTooltip independent label="Developer holdings">
|
||||
<TokenBadge value={live.devHold} icon={ChefHatIcon} />
|
||||
</MinimalTooltip>
|
||||
|
||||
<MinimalTooltip independent label="Snipers">
|
||||
<TokenBadge value={live.snipersHold} icon={CrosshairIcon} />
|
||||
</MinimalTooltip>
|
||||
|
||||
<MinimalTooltip independent label="Insiders">
|
||||
<TokenBadge value={live.insidersHold} icon={GhostIcon} />
|
||||
</MinimalTooltip>
|
||||
|
||||
<MinimalTooltip independent label="Bundlers">
|
||||
<TokenBadge value={live.bundleHold} icon={BoxesIcon} />
|
||||
</MinimalTooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ml-auto flex flex-col">
|
||||
<TokenDigit name="MC" value="$15.6k" />
|
||||
<TokenDigit name="V" value="$42k" />
|
||||
<MinimalTooltip label="Market Cap">
|
||||
<TokenDigit name="MC" value="$15.6k" />
|
||||
</MinimalTooltip>
|
||||
|
||||
<MinimalTooltip label="Volume">
|
||||
<TokenDigit name="V" value="$42k" />
|
||||
</MinimalTooltip>
|
||||
|
||||
<Button
|
||||
className="mt-auto ml-auto p-1! h-max w-max rounded-full bg-primary/20 text-primary hover:text-black gap-1 text-xs"
|
||||
onClick={(e) => {
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import { Tooltip as TooltipPrimitive } from "radix-ui";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function TooltipProvider({
|
||||
delayDuration = 0,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
|
||||
return (
|
||||
<TooltipPrimitive.Provider
|
||||
data-slot="tooltip-provider"
|
||||
delayDuration={delayDuration}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function Tooltip({
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
|
||||
return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
|
||||
}
|
||||
|
||||
function TooltipTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
|
||||
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
|
||||
}
|
||||
|
||||
function TooltipContent({
|
||||
className,
|
||||
sideOffset = 0,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
|
||||
return (
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipPrimitive.Content
|
||||
data-slot="tooltip-content"
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"bg-background text-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<TooltipPrimitive.Arrow className="bg-background fill-background z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" />
|
||||
</TooltipPrimitive.Content>
|
||||
</TooltipPrimitive.Portal>
|
||||
);
|
||||
}
|
||||
|
||||
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
|
||||
@@ -0,0 +1,18 @@
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
|
||||
|
||||
export default function MinimalTooltip({
|
||||
children,
|
||||
label,
|
||||
independent = false,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
label: React.ReactNode;
|
||||
independent?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild={!independent}>{children}</TooltipTrigger>
|
||||
<TooltipContent>{label}</TooltipContent>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user