/* SiliconPop — Shared UI Components */
/* Exports: BottomNav, TopBar, SPCard, SPBadge, SPButton, SPAvatar, SPSearch, HScroll, GradientText, PageShell, SPTabs */
const spUI = {};
/* ── Bottom Navigation ── */
spUI.BottomNav = function BottomNav({ active, onNav }) {
const tabs = [
{ id: 'home', label: '首页', icon: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-4 0a1 1 0 01-1-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 01-1 1' },
{ id: 'market', label: '市场', icon: 'M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10' },
{ id: 'create', label: '创作', icon: 'M12 4v16m8-8H4', isCenter: true },
{ id: 'community', label: '社区', icon: 'M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z' },
{ id: 'profile', label: '我的', icon: 'M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z' },
];
return (
);
};
/* ── Desktop Sidebar ── */
spUI.DesktopSidebar = function DesktopSidebar({ active, onNav, user }) {
const tabs = [
{ id: 'home', label: '首页', icon: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-4 0a1 1 0 01-1-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 01-1 1' },
{ id: 'market', label: '市场', icon: 'M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10' },
{ id: 'create', label: '创作', icon: 'M12 4v16m8-8H4' },
{ id: 'community', label: '社区', icon: 'M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z' },
{ id: 'profile', label: '我的', icon: 'M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z' },
];
return (
);
};
/* ── Top Bar (mobile) ── */
spUI.TopBar = function TopBar({ title, subtitle, showLogo, rightAction }) {
return (
);
};
/* ── Gradient Text ── */
spUI.GradientText = function GradientText({ children, className, style }) {
return {children};
};
/* ── Card ── */
spUI.SPCard = function SPCard({ children, className, style, onClick, glow }) {
return (
{children}
);
};
/* ── Badge ── */
spUI.SPBadge = function SPBadge({ children, variant, style }) {
return {children};
};
/* ── Button ── */
spUI.SPButton = function SPButton({ children, variant, onClick, style, className }) {
return (
);
};
/* ── Search ── */
spUI.SPSearch = function SPSearch({ placeholder }) {
return (
);
};
/* ── Horizontal Scroll ── */
spUI.HScroll = function HScroll({ children, className }) {
return {children}
;
};
/* ── Section Header ── */
spUI.SectionHead = function SectionHead({ title, action, actionLabel }) {
return (
{title}
{actionLabel && }
);
};
/* ── Tabs ── */
spUI.SPTabs = function SPTabs({ tabs, active, onChange }) {
return (
{tabs.map(t => (
))}
);
};
/* ── Stat Card ── */
spUI.StatCard = function StatCard({ label, value, accent }) {
return (
{label}
{value}
);
};
/* ── Page Shell ── */
spUI.PageShell = function PageShell({ children, className }) {
return {children}
;
};
/* ── IP Card (reusable) ── */
spUI.IPCard = function IPCard({ name, sub, tags, price, gradient, size }) {
const g = gradient || 'linear-gradient(135deg,#6366F1 0%,#00D4FF 100%)';
const isCompact = size === 'sm';
return (
{name}
{sub}
{tags &&
{tags.map((t,i) => {t})}
}
{price &&
{price}
}
);
};
/* ── Agent Card (reusable) ── */
spUI.AgentCard = function AgentCard({ name, desc, capability, price, gradient }) {
const g = gradient || 'linear-gradient(135deg,#EC4899,#F59E0B)';
return (
{name}
{desc}
{capability &&
{capability}
}
{price &&
{price}
}
);
};
/* ── Empty State ── */
spUI.EmptyState = function EmptyState({ icon, title, desc }) {
return (
{icon || '✦'}
{title}
{desc}
);
};
Object.assign(window, spUI);