This commit is contained in:
openhands committed
1 parent
8efd032cc6
commit
df38dccbf1
735 files changed
+128321
-120870
No files matched your search
+135
-91
@@ -9,118 +9,162 @@ import type { ReactNode } from "react";
|
||||
*/
|
||||
|
||||
export function ContentCard({
|
||||
icon,
|
||||
title,
|
||||
subtitle,
|
||||
action,
|
||||
children,
|
||||
className,
|
||||
padded = true,
|
||||
icon,
|
||||
title,
|
||||
subtitle,
|
||||
action,
|
||||
children,
|
||||
className,
|
||||
padded = true,
|
||||
}: {
|
||||
icon?: string;
|
||||
title?: ReactNode;
|
||||
subtitle?: ReactNode;
|
||||
action?: ReactNode;
|
||||
children?: ReactNode;
|
||||
className?: string;
|
||||
padded?: boolean;
|
||||
icon?: string;
|
||||
title?: ReactNode;
|
||||
subtitle?: ReactNode;
|
||||
action?: ReactNode;
|
||||
children?: ReactNode;
|
||||
className?: string;
|
||||
padded?: boolean;
|
||||
}) {
|
||||
const hasHead = title != null || icon != null || subtitle != null || action != null;
|
||||
return (
|
||||
<div className={`content-card${className ? ` ${className}` : ""}`}>
|
||||
{hasHead ? (
|
||||
<div className="content-card-head">
|
||||
{icon ? (
|
||||
<span className="content-card-icon" aria-hidden>
|
||||
{icon}
|
||||
</span>
|
||||
) : null}
|
||||
<div className="content-card-head-text">
|
||||
{title != null ? <p className="content-card-title">{title}</p> : null}
|
||||
{subtitle != null ? <p className="content-card-subtitle">{subtitle}</p> : null}
|
||||
</div>
|
||||
{action ? <div className="content-card-action">{action}</div> : null}
|
||||
</div>
|
||||
) : null}
|
||||
<div className={padded ? "content-card-body" : undefined}>{children}</div>
|
||||
</div>
|
||||
);
|
||||
const hasHead =
|
||||
title != null || icon != null || subtitle != null || action != null;
|
||||
return (
|
||||
<div className={`content-card${className ? ` ${className}` : ""}`}>
|
||||
{hasHead ? (
|
||||
<div className="content-card-head">
|
||||
{icon ? (
|
||||
<span className="content-card-icon" aria-hidden>
|
||||
{icon}
|
||||
</span>
|
||||
) : null}
|
||||
<div className="content-card-head-text">
|
||||
{title != null ? (
|
||||
<p className="content-card-title">{title}</p>
|
||||
) : null}
|
||||
{subtitle != null ? (
|
||||
<p className="content-card-subtitle">{subtitle}</p>
|
||||
) : null}
|
||||
</div>
|
||||
{action ? <div className="content-card-action">{action}</div> : null}
|
||||
</div>
|
||||
) : null}
|
||||
<div className={padded ? "content-card-body" : undefined}>{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** A value + label tile (profile stats, rare-value summaries, …). */
|
||||
export function StatBlock({ value, label, icon }: { value: ReactNode; label: string; icon?: string }) {
|
||||
return (
|
||||
<div className="stat-block">
|
||||
<div className="stat-block-value">
|
||||
{icon ? <span aria-hidden>{icon} </span> : null}
|
||||
{value}
|
||||
</div>
|
||||
<div className="stat-block-label">{label}</div>
|
||||
</div>
|
||||
);
|
||||
export function StatBlock({
|
||||
value,
|
||||
label,
|
||||
icon,
|
||||
}: {
|
||||
value: ReactNode;
|
||||
label: string;
|
||||
icon?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="stat-block">
|
||||
<div className="stat-block-value">
|
||||
{icon ? <span aria-hidden>{icon} </span> : null}
|
||||
{value}
|
||||
</div>
|
||||
<div className="stat-block-label">{label}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** Friendly empty state with an icon and a muted line. */
|
||||
export function EmptyState({ icon = "📭", children }: { icon?: string; children: ReactNode }) {
|
||||
return (
|
||||
<div className="empty-state">
|
||||
<div className="empty-state-icon" aria-hidden>
|
||||
{icon}
|
||||
</div>
|
||||
<p className="muted" style={{ margin: 0 }}>
|
||||
{children}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
export function EmptyState({
|
||||
icon = "📭",
|
||||
children,
|
||||
}: {
|
||||
icon?: string;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="empty-state">
|
||||
<div className="empty-state-icon" aria-hidden>
|
||||
{icon}
|
||||
</div>
|
||||
<p className="muted" style={{ margin: 0 }}>
|
||||
{children}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** Online / offline pill with a status dot. */
|
||||
export function OnlineBadge({ online }: { online: boolean }) {
|
||||
return (
|
||||
<span className={`online-badge${online ? " online" : ""}`}>
|
||||
<span className="online-dot" aria-hidden />
|
||||
{online ? "Online" : "Offline"}
|
||||
</span>
|
||||
);
|
||||
return (
|
||||
<span className={`online-badge${online ? " online" : ""}`}>
|
||||
<span className="online-dot" aria-hidden />
|
||||
{online ? "Online" : "Offline"}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
/** Leaderboard rank chip — medals for the top three, number otherwise. */
|
||||
export function RankBadge({ position }: { position: number }) {
|
||||
const medal = position === 1 ? "🥇" : position === 2 ? "🥈" : position === 3 ? "🥉" : null;
|
||||
return (
|
||||
<span className={`rank-badge rank-${position <= 3 ? position : "n"}`}>{medal ?? `#${position}`}</span>
|
||||
);
|
||||
const medal =
|
||||
position === 1
|
||||
? "🥇"
|
||||
: position === 2
|
||||
? "🥈"
|
||||
: position === 3
|
||||
? "🥉"
|
||||
: null;
|
||||
return (
|
||||
<span className={`rank-badge rank-${position <= 3 ? position : "n"}`}>
|
||||
{medal ?? `#${position}`}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
/* ── Skeleton loaders ────────────────────────────────────────── */
|
||||
|
||||
export function Skeleton({ className, style }: { className?: string; style?: React.CSSProperties }) {
|
||||
return (
|
||||
<div
|
||||
className={className}
|
||||
style={{
|
||||
...style,
|
||||
backgroundColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
|
||||
borderRadius: "6px",
|
||||
animation: "shimmer 1.5s ease-in-out infinite",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
export function Skeleton({
|
||||
className,
|
||||
style,
|
||||
}: {
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={className}
|
||||
style={{
|
||||
...style,
|
||||
backgroundColor:
|
||||
"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
|
||||
borderRadius: "6px",
|
||||
animation: "shimmer 1.5s ease-in-out infinite",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function SkeletonCard({ lines = 3 }: { lines?: number }) {
|
||||
return (
|
||||
<div className="content-card" style={{ padding: "1rem" }}>
|
||||
<div className="content-card-head" style={{ margin: "-1rem -1rem 1rem" }}>
|
||||
<Skeleton style={{ width: "44px", height: "44px", borderRadius: "999px" }} />
|
||||
<div style={{ flex: 1, display: "grid", gap: "0.35rem" }}>
|
||||
<Skeleton style={{ height: "16px", width: "60%" }} />
|
||||
<Skeleton style={{ height: "12px", width: "40%" }} />
|
||||
</div>
|
||||
</div>
|
||||
{Array.from({ length: lines }).map((_, i) => (
|
||||
<Skeleton key={i} style={{ height: "12px", width: `${85 - i * 10}%`, marginBottom: "0.6rem" }} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="content-card" style={{ padding: "1rem" }}>
|
||||
<div className="content-card-head" style={{ margin: "-1rem -1rem 1rem" }}>
|
||||
<Skeleton
|
||||
style={{ width: "44px", height: "44px", borderRadius: "999px" }}
|
||||
/>
|
||||
<div style={{ flex: 1, display: "grid", gap: "0.35rem" }}>
|
||||
<Skeleton style={{ height: "16px", width: "60%" }} />
|
||||
<Skeleton style={{ height: "12px", width: "40%" }} />
|
||||
</div>
|
||||
</div>
|
||||
{Array.from({ length: lines }).map((_, i) => (
|
||||
<Skeleton
|
||||
key={i}
|
||||
style={{
|
||||
height: "12px",
|
||||
width: `${85 - i * 10}%`,
|
||||
marginBottom: "0.6rem",
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user