Skip to content

Commit 4152bd8

Browse files
stevesarmientostevesarmiento
committed
chore: elements and hooks nits
1 parent 0275058 commit 4152bd8

File tree

2 files changed

+83
-104
lines changed

2 files changed

+83
-104
lines changed

‎examples/next-js/components/playground/element-examples.tsx‎

Lines changed: 81 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,14 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
1414
import { Wallet, Copy, Check, RefreshCw, LogOut, Coins, ExternalLink } from 'lucide-react';
1515
import { ExampleCard, type ExampleConfig } from './example-card';
1616

17-
// Helper component for displaying individual render props
18-
function PropCard({ label, children }: { label: string; children: React.ReactNode }) {
17+
// Helper component for displaying render props in badge style (matches hooks-examples)
18+
function RenderPropValue({ name, children }: { name: string; children: React.ReactNode }) {
1919
return (
20-
<div className="flex flex-col gap-1.5 p-3 rounded-xl border bg-card">
21-
<span className="text-[10px] font-mono text-muted-foreground uppercase tracking-wide">{label}</span>
22-
<div className="min-h-[32px] flex items-center">{children}</div>
20+
<div className="flex items-center justify-between py-1.5 gap-2">
21+
<span className="px-2 py-0.5 text-[11px] font-mono text-sand-700 bg-white border border-sand-300 rounded-md">
22+
{name}
23+
</span>
24+
<div className="flex items-center text-xs font-mono text-sand-600 truncate">{children}</div>
2325
</div>
2426
);
2527
}
@@ -63,35 +65,36 @@ import { Wallet, Copy, Check } from 'lucide-react';
6365
<span className="absolute -top-2.5 left-3 bg-sand-100 px-2 text-xs font-mono font-medium text-sand-700">
6466
{'<AccountElement />'}
6567
</span>
66-
<div className="grid grid-cols-2 gap-2">
67-
<PropCard label="walletIcon">
68-
<Avatar className="h-8 w-8">
68+
<div className="space-y-0.5 pt-1">
69+
<RenderPropValue name="walletIcon">
70+
<Avatar className="h-5 w-5">
6971
{walletIcon && <AvatarImage src={walletIcon} />}
7072
<AvatarFallback className="bg-muted">
71-
<Wallet className="h-4 w-4" />
73+
<Wallet className="h-3 w-3" />
7274
</AvatarFallback>
7375
</Avatar>
74-
</PropCard>
75-
<PropCard label="walletName">
76-
<span className="text-sm font-medium truncate">{walletName || '—'}</span>
77-
</PropCard>
78-
<PropCard label="formatted">
79-
<span className="text-xs font-mono text-muted-foreground truncate">
80-
{formatted || '—'}
81-
</span>
82-
</PropCard>
83-
<PropCard label="copy / copied">
76+
</RenderPropValue>
77+
<RenderPropValue name="walletName">
78+
{walletName || '—'}
79+
</RenderPropValue>
80+
<RenderPropValue name="formatted">
81+
{formatted || '—'}
82+
</RenderPropValue>
83+
<RenderPropValue name="copy">
8484
<button
8585
onClick={copy}
86-
className="p-1.5 hover:bg-muted rounded-md transition-colors"
86+
className="p-1 hover:bg-muted rounded-md transition-colors"
8787
>
8888
{copied ? (
89-
<Check className="h-4 w-4 text-green-500" />
89+
<Check className="h-3.5 w-3.5 text-green-500" />
9090
) : (
91-
<Copy className="h-4 w-4 text-muted-foreground" />
91+
<Copy className="h-3.5 w-3.5 text-muted-foreground" />
9292
)}
9393
</button>
94-
</PropCard>
94+
</RenderPropValue>
95+
<RenderPropValue name="copied">
96+
{String(copied)}
97+
</RenderPropValue>
9598
</div>
9699
</div>
97100

@@ -168,24 +171,22 @@ import { RefreshCw } from 'lucide-react';
168171
<span className="absolute -top-2.5 left-3 bg-sand-100 px-2 text-xs font-mono font-medium text-sand-700">
169172
{'<BalanceElement />'}
170173
</span>
171-
<div className="grid grid-cols-3 gap-2">
172-
<PropCard label="solBalance">
173-
<span className="text-sm font-bold">{solBalance?.toFixed(4) ?? '—'}</span>
174-
</PropCard>
175-
<PropCard label="isLoading">
176-
<span className="text-xs font-mono text-muted-foreground">
177-
{isLoading ? 'true' : 'false'}
178-
</span>
179-
</PropCard>
180-
<PropCard label="refetch">
174+
<div className="space-y-0.5 pt-1">
175+
<RenderPropValue name="solBalance">
176+
{solBalance?.toFixed(4) ?? '—'}
177+
</RenderPropValue>
178+
<RenderPropValue name="isLoading">
179+
{String(isLoading)}
180+
</RenderPropValue>
181+
<RenderPropValue name="refetch">
181182
<button
182183
onClick={refetch}
183184
disabled={isLoading}
184-
className="p-1.5 hover:bg-muted rounded-md transition-colors disabled:opacity-50"
185+
className="p-1 hover:bg-muted rounded-md transition-colors disabled:opacity-50"
185186
>
186-
<RefreshCw className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
187+
<RefreshCw className={`h-3.5 w-3.5 ${isLoading ? 'animate-spin' : ''}`} />
187188
</button>
188-
</PropCard>
189+
</RenderPropValue>
189190
</div>
190191
</div>
191192

@@ -280,25 +281,21 @@ const clusterColors: Record<string, string> = {
280281
<span className="absolute -top-2.5 left-3 bg-sand-100 px-2 text-xs font-mono font-medium text-sand-700">
281282
{'<ClusterElement />'}
282283
</span>
283-
<div className="grid grid-cols-3 gap-2">
284-
<PropCard label="cluster">
284+
<div className="space-y-0.5 pt-1">
285+
<RenderPropValue name="cluster">
285286
<div className="flex items-center gap-1.5">
286287
<span
287288
className={`h-2 w-2 rounded-full ${clusterColors[cluster?.id || ''] || 'bg-purple-500'}`}
288289
/>
289-
<span className="text-xs font-medium truncate">
290-
{cluster?.label || '—'}
291-
</span>
290+
{cluster?.label || '—'}
292291
</div>
293-
</PropCard>
294-
<PropCard label="clusters">
295-
<span className="text-xs font-mono text-muted-foreground">
296-
[{clusters.length}]
297-
</span>
298-
</PropCard>
299-
<PropCard label="setCluster">
300-
<span className="text-xs font-mono text-muted-foreground">fn()</span>
301-
</PropCard>
292+
</RenderPropValue>
293+
<RenderPropValue name="clusters">
294+
[{clusters.length} items]
295+
</RenderPropValue>
296+
<RenderPropValue name="setCluster">
297+
fn()
298+
</RenderPropValue>
302299
</div>
303300
</div>
304301

@@ -380,20 +377,18 @@ import { LogOut } from 'lucide-react';
380377
<span className="absolute -top-2.5 left-3 bg-sand-100 px-2 text-xs font-mono font-medium text-sand-700">
381378
{'<DisconnectElement />'}
382379
</span>
383-
<div className="grid grid-cols-2 gap-2">
384-
<PropCard label="disconnect">
380+
<div className="space-y-0.5 pt-1">
381+
<RenderPropValue name="disconnect">
385382
<button
386383
onClick={disconnect}
387-
className="p-1.5 hover:bg-muted rounded-md transition-colors"
384+
className="p-1 hover:bg-muted rounded-md transition-colors"
388385
>
389-
<LogOut className="h-4 w-4 text-muted-foreground" />
386+
<LogOut className="h-3.5 w-3.5 text-muted-foreground" />
390387
</button>
391-
</PropCard>
392-
<PropCard label="disconnecting">
393-
<span className="text-xs font-mono text-muted-foreground">
394-
{disconnecting ? 'true' : 'false'}
395-
</span>
396-
</PropCard>
388+
</RenderPropValue>
389+
<RenderPropValue name="disconnecting">
390+
{String(disconnecting)}
391+
</RenderPropValue>
397392
</div>
398393
</div>
399394

@@ -482,35 +477,31 @@ import { Coins, RefreshCw } from 'lucide-react';
482477
</span>
483478
<div className="space-y-3">
484479
{/* Top-level props */}
485-
<div className="grid grid-cols-3 gap-2">
486-
<PropCard label="tokens">
487-
<span className="text-xs font-mono text-muted-foreground">
488-
[{tokens.length} items]
489-
</span>
490-
</PropCard>
491-
<PropCard label="isLoading">
492-
<span className="text-xs font-mono text-muted-foreground">
493-
{isLoading ? 'true' : 'false'}
494-
</span>
495-
</PropCard>
496-
<PropCard label="refetch">
480+
<div className="space-y-0.5 pt-1">
481+
<RenderPropValue name="tokens">
482+
[{tokens.length} items]
483+
</RenderPropValue>
484+
<RenderPropValue name="isLoading">
485+
{String(isLoading)}
486+
</RenderPropValue>
487+
<RenderPropValue name="refetch">
497488
<button
498489
onClick={refetch}
499490
disabled={isLoading}
500-
className="p-1.5 hover:bg-muted rounded-md transition-colors disabled:opacity-50"
491+
className="p-1 hover:bg-muted rounded-md transition-colors disabled:opacity-50"
501492
>
502493
<RefreshCw
503-
className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`}
494+
className={`h-3.5 w-3.5 ${isLoading ? 'animate-spin' : ''}`}
504495
/>
505496
</button>
506-
</PropCard>
497+
</RenderPropValue>
507498
</div>
508499

509500
{/* Sample token item breakdown */}
510501
{sampleToken && (
511502
<div className="border border border-sand-300 rounded-xl p-2 bg-sand-50">
512503
<span className="text-[10px] font-mono text-sand-700 mb-2 block">
513-
tokens[0] properties:
504+
tokens properties:
514505
</span>
515506
<div className="grid grid-cols-2 gap-1.5">
516507
<div className="flex flex-col gap-1 p-2 rounded-lg border bg-card">
@@ -689,38 +680,26 @@ import { ExternalLink, Coins } from 'lucide-react';
689680
</span>
690681
<div className="space-y-3">
691682
{/* Top-level props */}
692-
<div className="grid grid-cols-2 gap-2">
693-
<PropCard label="transactions">
694-
<span className="text-xs font-mono text-muted-foreground">
695-
[{transactions.length} items]
696-
</span>
697-
</PropCard>
698-
<PropCard label="isLoading">
699-
<span className="text-xs font-mono text-muted-foreground">
700-
{isLoading ? 'true' : 'false'}
701-
</span>
702-
</PropCard>
703-
<PropCard label="hasMore">
704-
<span className="text-xs font-mono text-muted-foreground">
705-
{hasMore ? 'true' : 'false'}
706-
</span>
707-
</PropCard>
708-
<PropCard label="loadMore">
709-
<button
710-
onClick={loadMore}
711-
disabled={!hasMore || isLoading}
712-
className="text-xs font-mono text-muted-foreground hover:text-foreground disabled:opacity-50"
713-
>
714-
fn()
715-
</button>
716-
</PropCard>
683+
<div className="space-y-0.5 pt-1">
684+
<RenderPropValue name="transactions">
685+
[{transactions.length} items]
686+
</RenderPropValue>
687+
<RenderPropValue name="isLoading">
688+
{String(isLoading)}
689+
</RenderPropValue>
690+
<RenderPropValue name="hasMore">
691+
{String(hasMore)}
692+
</RenderPropValue>
693+
<RenderPropValue name="loadMore">
694+
fn()
695+
</RenderPropValue>
717696
</div>
718697

719698
{/* Sample transaction item breakdown */}
720699
{sampleTx && (
721700
<div className="border border border-sand-300 rounded-xl p-2 bg-sand-50">
722701
<span className="text-[10px] font-mono text-sand-700 mb-2 block">
723-
transactions[0] properties:
702+
transactions properties:
724703
</span>
725704
<div className="grid grid-cols-2 gap-1.5">
726705
<div className="flex flex-col gap-1 p-2 rounded-lg border bg-card">

‎examples/next-js/components/playground/hooks-examples.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -292,7 +292,7 @@ function UseTokensExample() {
292292
{sampleToken && (
293293
<div className="border border-sand-300 rounded-xl p-2 bg-sand-50">
294294
<span className="text-[10px] font-mono text-sand-700 mb-2 block">
295-
tokens[0] properties:
295+
tokens properties:
296296
</span>
297297
<div className="grid grid-cols-2 gap-1.5">
298298
<div className="flex flex-col gap-1 p-2 rounded-lg border bg-card">
@@ -410,7 +410,7 @@ function UseTransactionsExample() {
410410
{sampleTx && (
411411
<div className="border border-sand-300 rounded-xl p-2 bg-sand-50">
412412
<span className="text-[10px] font-mono text-sand-700 mb-2 block">
413-
transactions[0] properties:
413+
transactions properties:
414414
</span>
415415
<div className="grid grid-cols-2 gap-1.5">
416416
<div className="flex flex-col gap-1 p-2 rounded-lg border bg-card">

0 commit comments

Comments
 (0)