yusur/coinstorge
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add Top Holders

Browse source
This commit is contained in:
Face 2025-06-10 18:42:41 +03:00
parent ff60529b3f
commit 36175c990d
13 changed files with 522 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

60
website/src/lib/components/self/skeletons/CoinSkeleton.svelte
View file

@ -1,32 +1,30 @@
<script lang="ts">
import * as Card from '$lib/components/ui/card';
import { Skeleton } from '$lib/components/ui/skeleton';
import HoldersSkeleton from './HoldersSkeleton.svelte';
</script>
<header class="mb-8">
<div class="mb-4 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
<div class="mb-4 flex flex-col gap-5 sm:flex-row sm:items-start sm:justify-between">
<div class="flex items-center gap-3 sm:gap-4">
<Skeleton class="h-12 w-12 rounded-lg sm:h-16 sm:w-16" />
<div class="min-w-0 flex-1">
<Skeleton class="mb-2 h-6 w-40 sm:h-10 sm:w-48" />
<div class="mt-1 flex flex-wrap items-center gap-2">
<Skeleton class="h-5 w-12 sm:h-6 sm:w-16" />
<Skeleton class="h-5 w-16 sm:h-6 sm:w-20" />
<Skeleton class="h-5 w-14" />
<Skeleton class="h-5 w-12 sm:h-6 sm:w-24" />
</div>
</div>
</div>
<div class="flex flex-col items-start gap-2 sm:items-end sm:text-right">
<Skeleton class="h-6 w-28 sm:h-8 sm:w-32" />
<div class="flex items-center gap-2">
<Skeleton class="h-4 w-4" />
<Skeleton class="h-5 w-12 sm:h-6 sm:w-16" />
<Skeleton class="h-5 w-12 sm:h-6 sm:w-24" />
</div>
</div>
</div>
<!-- Creator Info Skeleton -->
<div class="text-muted-foreground flex flex-wrap items-center gap-2 text-sm">
<div class="text-muted-foreground mt-6 flex flex-wrap items-center gap-2 text-sm">
<Skeleton class="h-4 w-20" />
<Skeleton class="h-4 w-4 rounded-full" />
<Skeleton class="h-4 w-40" />
@ -38,7 +36,7 @@
<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
<!-- Chart (2/3 width) -->
<div class="lg:col-span-2">
<Card.Root>
<Card.Root class="flex h-full flex-col">
<Card.Header class="pb-4">
<div class="flex items-center justify-between">
<Card.Title class="flex items-center gap-2">
@ -50,23 +48,22 @@
</div>
</div>
</Card.Header>
<Card.Content class="pt-0">
<Skeleton class="h-[500px] w-full" />
<Card.Content class="flex-1 pt-0">
<Skeleton class="h-full min-h-[500px] w-full" />
</Card.Content>
</Card.Root>
</div>
<!-- Right side - Trading Actions + Liquidity Pool (1/3 width) -->
<!-- Right side - Trading Actions + Liquidity Pool + Top Holders (1/3 width) -->
<div class="space-y-6 lg:col-span-1">
<!-- Trading Actions Skeleton -->
<Card.Root>
<Card.Header class="pb-4">
<Card.Root class="gap-3">
<Card.Header>
<Card.Title>
<Skeleton class="h-6 w-24" />
</Card.Title>
<Skeleton class="h-4 w-32" />
</Card.Header>
<Card.Content class="pt-0">
<Card.Content>
<div class="space-y-3">
<Skeleton class="h-11 w-full" />
<Skeleton class="h-11 w-full" />
@ -76,16 +73,11 @@
<!-- Liquidity Pool Skeleton -->
<Card.Root>
<Card.Header class="pb-4">
<Card.Title>
<Skeleton class="h-6 w-28" />
</Card.Title>
</Card.Header>
<Card.Content class="pt-0">
<div class="space-y-4">
<Card.Content>
<div class="space-y-5">
<div>
<Skeleton class="mb-3 h-5 w-32" />
<div class="space-y-2">
<div class="mt-4 space-y-3">
<div class="flex justify-between">
<Skeleton class="h-4 w-16" />
<Skeleton class="h-4 w-20" />
@ -98,7 +90,7 @@
</div>
<div>
<Skeleton class="mb-3 h-5 w-20" />
<div class="space-y-2">
<div class="mt-4 space-y-3">
<div class="flex justify-between">
<Skeleton class="h-4 w-24" />
<Skeleton class="h-4 w-20" />
@ -112,20 +104,30 @@
</div>
</Card.Content>
</Card.Root>
<!-- Top Holders Section Skeleton -->
<Card.Root class="gap-2">
<Card.Header>
<Card.Title class="flex items-center gap-2">Top Holders</Card.Title>
</Card.Header>
<Card.Content class="relative">
<HoldersSkeleton />
</Card.Content>
</Card.Root>
</div>
</div>
<!-- Statistics Grid Skeleton -->
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
{#each Array(4) as _}
<Card.Root>
<Card.Header class="pb-2">
<Card.Root class="gap-1">
<Card.Header>
<Card.Title class="flex items-center gap-2 text-sm font-medium">
<Skeleton class="h-4 w-4" />
<Skeleton class="h-4 w-20" />
</Card.Title>
</Card.Header>
<Card.Content class="pt-0">
<Card.Content>
<Skeleton class="mb-1 h-6 w-24" />
<Skeleton class="h-3 w-16" />
</Card.Content>
@ -135,13 +137,13 @@
<!-- Comments Section Skeleton -->
<Card.Root>
<Card.Header class="pb-4">
<Card.Header>
<Card.Title class="flex items-center gap-2">
<Skeleton class="h-5 w-5" />
<Skeleton class="h-6 w-20" />
</Card.Title>
</Card.Header>
<Card.Content class="pt-0">
<Card.Content>
<div class="space-y-4">
{#each Array(3) as _}
<div class="flex gap-3 border-b pb-4 last:border-b-0">

27
website/src/lib/components/self/skeletons/HoldersSkeleton.svelte Normal file
View file

@ -0,0 +1,27 @@
<script lang="ts">
import { Skeleton } from '$lib/components/ui/skeleton';
</script>
<div class="space-y-4">
{#each Array(3) as _}
<div class="flex items-center gap-2">
<div class="flex min-w-0 flex-1 items-center gap-3">
<Skeleton class="h-8 w-8 flex-shrink-0 rounded-full" />
<div class="min-w-0 flex-1 space-y-1">
<Skeleton class="h-4 w-24" />
<Skeleton class="h-3 w-16" />
</div>
</div>
<div class="flex flex-shrink-0 items-center gap-1.5">
<div class="hidden sm:block">
<Skeleton class="h-5 w-12 rounded-full" />
</div>
<div class="flex flex-col items-end gap-0.5">
<Skeleton class="h-3 w-16" />
<Skeleton class="h-3 w-12" />
</div>
</div>
</div>
{/each}
</div>