@unicitylabs/sphere-ui 0.1.20 → 0.1.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +30 -5
- package/dist/index.js +220 -179
- package/package.json +1 -1
- package/src/styles/tokens.css +13 -0
package/dist/index.d.ts
CHANGED
|
@@ -413,13 +413,38 @@ interface InstalledProjectIconProps {
|
|
|
413
413
|
/**
|
|
414
414
|
* InstalledProjectIcon — desktop tile for an installed app/skill.
|
|
415
415
|
*
|
|
416
|
-
*
|
|
417
|
-
*
|
|
418
|
-
*
|
|
419
|
-
*
|
|
416
|
+
* Composes the shared ProjectLogo visual with a button wrapper that
|
|
417
|
+
* adds hover/tap animation, a glow halo, and a name label underneath.
|
|
418
|
+
* Behavior is driven entirely by props: pass `onClick` for the
|
|
419
|
+
* primary action, `onContextMenu` for right-click, and
|
|
420
|
+
* `topRightAction` to overlay a small action button on the tile.
|
|
420
421
|
*/
|
|
421
422
|
declare function InstalledProjectIcon({ name, logoUrl, accentColor, onClick, onContextMenu, topRightAction, showLabel, buttonRef, buttonProps, }: InstalledProjectIconProps): react_jsx_runtime.JSX.Element;
|
|
422
423
|
|
|
424
|
+
type ProjectLogoSize = 'sm' | 'md' | 'lg';
|
|
425
|
+
interface ProjectLogoProps {
|
|
426
|
+
name: string;
|
|
427
|
+
logoUrl?: string | null;
|
|
428
|
+
/** Hex like "#FF6F00". Drives the gradient + fallback letter background. */
|
|
429
|
+
accentColor?: string;
|
|
430
|
+
/** Tile size — sm 36px / md 44px / lg 56–64px (desktop dock). */
|
|
431
|
+
size?: ProjectLogoSize;
|
|
432
|
+
/** Extra classes on the outer tile (e.g. ring, border). */
|
|
433
|
+
className?: string;
|
|
434
|
+
/** Absolute-positioned overlay slot (e.g. context-menu trigger, install badge). */
|
|
435
|
+
children?: ReactNode;
|
|
436
|
+
}
|
|
437
|
+
/**
|
|
438
|
+
* ProjectLogo — the canonical "app icon" visual: gradient tile +
|
|
439
|
+
* mesh overlay + corner accent + edge-to-edge logo image. Pure
|
|
440
|
+
* presentation, no behavior — wrap it in a button/link if interactive.
|
|
441
|
+
*
|
|
442
|
+
* Used everywhere a project logo appears (desktop dock, marketplace
|
|
443
|
+
* cards, install previews) so the icon looks the same regardless of
|
|
444
|
+
* surrounding chrome.
|
|
445
|
+
*/
|
|
446
|
+
declare function ProjectLogo({ name, logoUrl, accentColor, size, className, children, }: ProjectLogoProps): react_jsx_runtime.JSX.Element;
|
|
447
|
+
|
|
423
448
|
interface QuestPreviewSummary {
|
|
424
449
|
slug: string;
|
|
425
450
|
title: string;
|
|
@@ -472,4 +497,4 @@ declare function isMimeAllowed(kind: MediaKind, mime: string): mime is MediaMime
|
|
|
472
497
|
declare function isSizeAllowed(kind: MediaKind, size: number): boolean;
|
|
473
498
|
declare function humanSize(bytes: number): string;
|
|
474
499
|
|
|
475
|
-
export { type AchievementPreviewSummary, AddressDisplay, AlertBanner, AppLogo, Button, type ButtonProps, type ButtonVariant, ChainInput, ConfirmDialog, CustomSelect, DashboardLayout, DataTable, EmptyState, FeaturedProjectCard, type FeaturedProjectCardProps, Field, FormModal, IconArrowRight, IconBack, IconChain, IconCheck, IconChevronDown, IconChevronUp, IconChevronsDown, IconChevronsRight, IconCircle, IconDiamond, IconEdit, IconPlay, IconPlus, IconQuests, IconSearch, IconSettings, IconStar, IconTracks, IconTrash, IconUndo, IconX, Input, type InputProps, InstalledProjectIcon, type InstalledProjectIconProps, JsonPanel, JsonToggleButton, MEDIA_LIMITS, MarketplaceProjectCard, type MarketplaceProjectCardProps, MediaGallery, type MediaGalleryProps, type MediaItem, type MediaKind, type MediaLimit, type MediaMime, type MediaUploadFn, type MediaUploadResult, MediaUploader, type MediaUploaderProps, type MemoCondition, MemoConditionsEditor, type NavGroup, type NavItem, PageShell, ProjectPagePreview, type ProjectPagePreviewProps, type QuestPreviewSummary, SearchInput, Section, Select, type SelectOption, type SelectProps, SidebarNav, Skeleton, SkeletonCircle, type SkeletonCircleProps, type SkeletonCircleSize, type SkeletonProps, SkeletonText, type SkeletonTextProps, StatusBadge, Textarea, type TextareaProps, humanSize, isMimeAllowed, isSizeAllowed, tagColor };
|
|
500
|
+
export { type AchievementPreviewSummary, AddressDisplay, AlertBanner, AppLogo, Button, type ButtonProps, type ButtonVariant, ChainInput, ConfirmDialog, CustomSelect, DashboardLayout, DataTable, EmptyState, FeaturedProjectCard, type FeaturedProjectCardProps, Field, FormModal, IconArrowRight, IconBack, IconChain, IconCheck, IconChevronDown, IconChevronUp, IconChevronsDown, IconChevronsRight, IconCircle, IconDiamond, IconEdit, IconPlay, IconPlus, IconQuests, IconSearch, IconSettings, IconStar, IconTracks, IconTrash, IconUndo, IconX, Input, type InputProps, InstalledProjectIcon, type InstalledProjectIconProps, JsonPanel, JsonToggleButton, MEDIA_LIMITS, MarketplaceProjectCard, type MarketplaceProjectCardProps, MediaGallery, type MediaGalleryProps, type MediaItem, type MediaKind, type MediaLimit, type MediaMime, type MediaUploadFn, type MediaUploadResult, MediaUploader, type MediaUploaderProps, type MemoCondition, MemoConditionsEditor, type NavGroup, type NavItem, PageShell, ProjectLogo, type ProjectLogoProps, type ProjectLogoSize, ProjectPagePreview, type ProjectPagePreviewProps, type QuestPreviewSummary, SearchInput, Section, Select, type SelectOption, type SelectProps, SidebarNav, Skeleton, SkeletonCircle, type SkeletonCircleProps, type SkeletonCircleSize, type SkeletonProps, SkeletonText, type SkeletonTextProps, StatusBadge, Textarea, type TextareaProps, humanSize, isMimeAllowed, isSizeAllowed, tagColor };
|
package/dist/index.js
CHANGED
|
@@ -1762,7 +1762,72 @@ function MediaGallery({ ownerType, ownerId, items, onChange, uploadFn, max = 10
|
|
|
1762
1762
|
// src/components/media/MarketplaceProjectCard.tsx
|
|
1763
1763
|
import { motion } from "framer-motion";
|
|
1764
1764
|
import { Users, Target, ThumbsUp, Plus, Check } from "lucide-react";
|
|
1765
|
+
|
|
1766
|
+
// src/components/media/ProjectLogo.tsx
|
|
1767
|
+
import { useState as useState9 } from "react";
|
|
1765
1768
|
import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
1769
|
+
var SIZE_CLASSES = {
|
|
1770
|
+
sm: "w-9 h-9 rounded-xl",
|
|
1771
|
+
md: "w-11 h-11 rounded-xl",
|
|
1772
|
+
lg: "w-14 h-14 sm:w-16 sm:h-16 rounded-2xl"
|
|
1773
|
+
};
|
|
1774
|
+
var FALLBACK_TEXT_CLASSES = {
|
|
1775
|
+
sm: "text-xs",
|
|
1776
|
+
md: "text-sm",
|
|
1777
|
+
lg: "text-lg sm:text-xl"
|
|
1778
|
+
};
|
|
1779
|
+
function getInitials(name) {
|
|
1780
|
+
if (!name) return "?";
|
|
1781
|
+
const words = name.trim().split(/\s+/).filter(Boolean);
|
|
1782
|
+
if (words.length >= 2) {
|
|
1783
|
+
return (words[0][0] + words[1][0]).toUpperCase();
|
|
1784
|
+
}
|
|
1785
|
+
return name.slice(0, 2).toUpperCase();
|
|
1786
|
+
}
|
|
1787
|
+
function ProjectLogo({
|
|
1788
|
+
name,
|
|
1789
|
+
logoUrl,
|
|
1790
|
+
accentColor = "#FF6F00",
|
|
1791
|
+
size = "lg",
|
|
1792
|
+
className,
|
|
1793
|
+
children
|
|
1794
|
+
}) {
|
|
1795
|
+
const [imgError, setImgError] = useState9(false);
|
|
1796
|
+
const showImage = logoUrl && !imgError;
|
|
1797
|
+
const tileBackground = `linear-gradient(to bottom right, ${accentColor}, color-mix(in srgb, ${accentColor} 60%, white))`;
|
|
1798
|
+
return /* @__PURE__ */ jsxs20(
|
|
1799
|
+
"div",
|
|
1800
|
+
{
|
|
1801
|
+
className: `relative ${SIZE_CLASSES[size]} flex items-center justify-center shadow-lg group-hover:shadow-xl transition-all duration-200 overflow-hidden${className ? " " + className : ""}`,
|
|
1802
|
+
style: { background: tileBackground },
|
|
1803
|
+
children: [
|
|
1804
|
+
/* @__PURE__ */ jsx25(
|
|
1805
|
+
"div",
|
|
1806
|
+
{
|
|
1807
|
+
className: "absolute inset-0 opacity-30 group-hover:opacity-50 transition-opacity duration-500 pointer-events-none",
|
|
1808
|
+
style: {
|
|
1809
|
+
backgroundImage: "radial-gradient(at 27% 37%, rgba(255,255,255,0.15) 0px, transparent 50%),radial-gradient(at 97% 21%, rgba(255,255,255,0.10) 0px, transparent 50%)"
|
|
1810
|
+
}
|
|
1811
|
+
}
|
|
1812
|
+
),
|
|
1813
|
+
/* @__PURE__ */ jsx25("div", { className: "absolute top-0 right-0 w-1/2 h-1/2 bg-white/10 rounded-bl-full pointer-events-none" }),
|
|
1814
|
+
showImage ? /* @__PURE__ */ jsx25(
|
|
1815
|
+
"img",
|
|
1816
|
+
{
|
|
1817
|
+
src: logoUrl ?? void 0,
|
|
1818
|
+
alt: name,
|
|
1819
|
+
onError: () => setImgError(true),
|
|
1820
|
+
className: "absolute inset-0 w-full h-full object-cover z-10"
|
|
1821
|
+
}
|
|
1822
|
+
) : /* @__PURE__ */ jsx25("span", { className: `text-white font-bold relative z-10 tracking-tight drop-shadow-sm ${FALLBACK_TEXT_CLASSES[size]}`, children: getInitials(name) }),
|
|
1823
|
+
children
|
|
1824
|
+
]
|
|
1825
|
+
}
|
|
1826
|
+
);
|
|
1827
|
+
}
|
|
1828
|
+
|
|
1829
|
+
// src/components/media/MarketplaceProjectCard.tsx
|
|
1830
|
+
import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
1766
1831
|
var categoryLabels = {
|
|
1767
1832
|
game: "Game",
|
|
1768
1833
|
defi: "DeFi",
|
|
@@ -1794,15 +1859,14 @@ function MarketplaceProjectCard({
|
|
|
1794
1859
|
e.stopPropagation();
|
|
1795
1860
|
onInstallClick?.();
|
|
1796
1861
|
};
|
|
1797
|
-
const
|
|
1798
|
-
const card = /* @__PURE__ */ jsxs20(
|
|
1862
|
+
const card = /* @__PURE__ */ jsxs21(
|
|
1799
1863
|
motion.div,
|
|
1800
1864
|
{
|
|
1801
1865
|
whileHover: { y: -4 },
|
|
1802
1866
|
className: "no-text-shadow group rounded-2xl border border-neutral-200 dark:border-white/8 hover:border-orange-500/60 dark:hover:border-brand-orange/60 hover:shadow-lg hover:shadow-orange-500/10 dark:hover:shadow-brand-orange/15 transition-all duration-200 cursor-pointer relative overflow-hidden",
|
|
1803
1867
|
children: [
|
|
1804
|
-
/* @__PURE__ */
|
|
1805
|
-
/* @__PURE__ */
|
|
1868
|
+
/* @__PURE__ */ jsxs21("div", { className: "relative h-24 overflow-hidden", "data-testid": "banner", children: [
|
|
1869
|
+
/* @__PURE__ */ jsx26(
|
|
1806
1870
|
"div",
|
|
1807
1871
|
{
|
|
1808
1872
|
className: "absolute inset-0 bg-cover bg-center transition-transform duration-500 group-hover:scale-105",
|
|
@@ -1812,54 +1876,53 @@ function MarketplaceProjectCard({
|
|
|
1812
1876
|
}
|
|
1813
1877
|
}
|
|
1814
1878
|
),
|
|
1815
|
-
/* @__PURE__ */
|
|
1879
|
+
/* @__PURE__ */ jsx26("div", { className: "absolute inset-0", style: {
|
|
1816
1880
|
background: hasBanner ? `linear-gradient(to bottom, transparent 0%, ${accentColor}66 100%)` : `linear-gradient(135deg, ${accentColor}cc 0%, ${accentColor}44 100%)`
|
|
1817
1881
|
} }),
|
|
1818
|
-
showInstall && /* @__PURE__ */
|
|
1882
|
+
showInstall && /* @__PURE__ */ jsx26(
|
|
1819
1883
|
"button",
|
|
1820
1884
|
{
|
|
1821
1885
|
onClick: handleInstall,
|
|
1822
1886
|
title: installed ? "Remove from Desktop" : "Add to Desktop",
|
|
1823
1887
|
className: `absolute top-3 right-3 z-10 w-8 h-8 rounded-lg flex items-center justify-center backdrop-blur-sm transition-all ${installed ? "bg-green-500/30 text-white border border-green-400/40" : "bg-black/30 text-white/70 border border-white/15 hover:bg-orange-500/40 hover:text-white hover:border-orange-400/40"}`,
|
|
1824
|
-
children: installed ? /* @__PURE__ */
|
|
1888
|
+
children: installed ? /* @__PURE__ */ jsx26(Check, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx26(Plus, { className: "w-4 h-4" })
|
|
1825
1889
|
}
|
|
1826
1890
|
)
|
|
1827
1891
|
] }),
|
|
1828
|
-
/* @__PURE__ */
|
|
1829
|
-
/* @__PURE__ */
|
|
1830
|
-
/* @__PURE__ */
|
|
1831
|
-
|
|
1892
|
+
/* @__PURE__ */ jsxs21("div", { className: "p-4 bg-white dark:bg-white/4 dark:backdrop-blur-2xl", children: [
|
|
1893
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex items-start gap-3", children: [
|
|
1894
|
+
/* @__PURE__ */ jsx26("div", { className: "shrink-0 -mt-8 ring-2 ring-white dark:ring-[#0a0a0a] rounded-xl relative z-10", children: /* @__PURE__ */ jsx26(
|
|
1895
|
+
ProjectLogo,
|
|
1832
1896
|
{
|
|
1833
|
-
|
|
1834
|
-
|
|
1835
|
-
|
|
1836
|
-
|
|
1837
|
-
|
|
1838
|
-
}
|
|
1897
|
+
name,
|
|
1898
|
+
logoUrl,
|
|
1899
|
+
accentColor,
|
|
1900
|
+
size: "md",
|
|
1901
|
+
className: "border border-neutral-200 dark:border-white/10"
|
|
1839
1902
|
}
|
|
1840
|
-
),
|
|
1841
|
-
/* @__PURE__ */
|
|
1842
|
-
/* @__PURE__ */
|
|
1843
|
-
/* @__PURE__ */
|
|
1903
|
+
) }),
|
|
1904
|
+
/* @__PURE__ */ jsxs21("div", { className: "min-w-0 flex-1", children: [
|
|
1905
|
+
/* @__PURE__ */ jsx26("h3", { className: "font-semibold text-neutral-900 dark:text-white text-sm truncate", children: name }),
|
|
1906
|
+
/* @__PURE__ */ jsx26("p", { className: "text-neutral-500 dark:text-white/45 text-xs mt-0.5 h-8 line-clamp-2", children: tagline })
|
|
1844
1907
|
] })
|
|
1845
1908
|
] }),
|
|
1846
|
-
/* @__PURE__ */
|
|
1847
|
-
category ? /* @__PURE__ */
|
|
1909
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex items-center justify-between mt-3 pt-3 border-t border-neutral-100 dark:border-white/5", children: [
|
|
1910
|
+
category ? /* @__PURE__ */ jsx26("span", { className: "inline-flex px-2 py-0.5 rounded-md text-[10px] font-semibold uppercase tracking-wider border", style: {
|
|
1848
1911
|
backgroundColor: `${accentColor}15`,
|
|
1849
1912
|
color: accentColor,
|
|
1850
1913
|
borderColor: `${accentColor}30`
|
|
1851
|
-
}, children: categoryLabels[category] ?? category }) : /* @__PURE__ */
|
|
1852
|
-
/* @__PURE__ */
|
|
1853
|
-
/* @__PURE__ */
|
|
1854
|
-
/* @__PURE__ */
|
|
1914
|
+
}, children: categoryLabels[category] ?? category }) : /* @__PURE__ */ jsx26("span", {}),
|
|
1915
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-3 text-[11px] text-neutral-400 dark:text-white/35", children: [
|
|
1916
|
+
/* @__PURE__ */ jsxs21("span", { className: "flex items-center gap-1", title: "Users", children: [
|
|
1917
|
+
/* @__PURE__ */ jsx26(Users, { className: "w-3 h-3" }),
|
|
1855
1918
|
users.toLocaleString()
|
|
1856
1919
|
] }),
|
|
1857
|
-
/* @__PURE__ */
|
|
1858
|
-
/* @__PURE__ */
|
|
1920
|
+
/* @__PURE__ */ jsxs21("span", { className: "flex items-center gap-1", title: "Active quests", children: [
|
|
1921
|
+
/* @__PURE__ */ jsx26(Target, { className: "w-3 h-3" }),
|
|
1859
1922
|
quests.toLocaleString()
|
|
1860
1923
|
] }),
|
|
1861
|
-
ratingCount > 0 && /* @__PURE__ */
|
|
1862
|
-
/* @__PURE__ */
|
|
1924
|
+
ratingCount > 0 && /* @__PURE__ */ jsxs21("span", { className: "flex items-center gap-1", title: `${ratingCount} reviews`, children: [
|
|
1925
|
+
/* @__PURE__ */ jsx26(ThumbsUp, { className: "w-3 h-3" }),
|
|
1863
1926
|
positivePercent,
|
|
1864
1927
|
"%"
|
|
1865
1928
|
] })
|
|
@@ -1870,7 +1933,7 @@ function MarketplaceProjectCard({
|
|
|
1870
1933
|
}
|
|
1871
1934
|
);
|
|
1872
1935
|
if (onClick) {
|
|
1873
|
-
return /* @__PURE__ */
|
|
1936
|
+
return /* @__PURE__ */ jsx26("button", { type: "button", onClick, className: "block w-full text-left", children: card });
|
|
1874
1937
|
}
|
|
1875
1938
|
return card;
|
|
1876
1939
|
}
|
|
@@ -1878,7 +1941,7 @@ function MarketplaceProjectCard({
|
|
|
1878
1941
|
// src/components/media/FeaturedProjectCard.tsx
|
|
1879
1942
|
import { motion as motion2 } from "framer-motion";
|
|
1880
1943
|
import { Star, Users as Users2, Target as Target2, ThumbsUp as ThumbsUp2 } from "lucide-react";
|
|
1881
|
-
import { jsx as
|
|
1944
|
+
import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
1882
1945
|
function FeaturedProjectCard({
|
|
1883
1946
|
name,
|
|
1884
1947
|
tagline,
|
|
@@ -1891,15 +1954,14 @@ function FeaturedProjectCard({
|
|
|
1891
1954
|
ratingCount = 0,
|
|
1892
1955
|
onClick
|
|
1893
1956
|
}) {
|
|
1894
|
-
const
|
|
1895
|
-
const card = /* @__PURE__ */ jsxs21(
|
|
1957
|
+
const card = /* @__PURE__ */ jsxs22(
|
|
1896
1958
|
motion2.div,
|
|
1897
1959
|
{
|
|
1898
1960
|
whileHover: { scale: 1.02, y: -2 },
|
|
1899
1961
|
whileTap: { scale: 0.98 },
|
|
1900
1962
|
className: "relative w-72 sm:w-80 h-44 rounded-2xl overflow-hidden shrink-0 cursor-pointer group",
|
|
1901
1963
|
children: [
|
|
1902
|
-
/* @__PURE__ */
|
|
1964
|
+
/* @__PURE__ */ jsx27(
|
|
1903
1965
|
"div",
|
|
1904
1966
|
{
|
|
1905
1967
|
className: "absolute inset-0 bg-cover bg-center transition-transform duration-500 group-hover:scale-105",
|
|
@@ -1910,43 +1972,42 @@ function FeaturedProjectCard({
|
|
|
1910
1972
|
}
|
|
1911
1973
|
}
|
|
1912
1974
|
),
|
|
1913
|
-
/* @__PURE__ */
|
|
1975
|
+
/* @__PURE__ */ jsx27("div", { className: "absolute inset-0", style: {
|
|
1914
1976
|
background: bannerUrl ? `linear-gradient(135deg, ${accentColor}66 0%, transparent 60%)` : `linear-gradient(135deg, ${accentColor}cc 0%, ${accentColor}44 100%)`
|
|
1915
1977
|
} }),
|
|
1916
|
-
/* @__PURE__ */
|
|
1917
|
-
/* @__PURE__ */
|
|
1918
|
-
/* @__PURE__ */
|
|
1978
|
+
/* @__PURE__ */ jsx27("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" }),
|
|
1979
|
+
/* @__PURE__ */ jsxs22("div", { className: "absolute top-3 right-3 flex items-center gap-1 px-2 py-1 rounded-full bg-amber-500/90 text-white text-[10px] font-bold uppercase tracking-wider", children: [
|
|
1980
|
+
/* @__PURE__ */ jsx27(Star, { className: "w-3 h-3", fill: "currentColor" }),
|
|
1919
1981
|
"Featured"
|
|
1920
1982
|
] }),
|
|
1921
|
-
/* @__PURE__ */
|
|
1922
|
-
/* @__PURE__ */
|
|
1923
|
-
/* @__PURE__ */
|
|
1924
|
-
|
|
1983
|
+
/* @__PURE__ */ jsxs22("div", { className: "absolute bottom-0 left-0 right-0 p-4", children: [
|
|
1984
|
+
/* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-3", children: [
|
|
1985
|
+
/* @__PURE__ */ jsx27(
|
|
1986
|
+
ProjectLogo,
|
|
1925
1987
|
{
|
|
1926
|
-
|
|
1927
|
-
|
|
1928
|
-
|
|
1929
|
-
|
|
1930
|
-
|
|
1931
|
-
}
|
|
1988
|
+
name,
|
|
1989
|
+
logoUrl,
|
|
1990
|
+
accentColor,
|
|
1991
|
+
size: "sm",
|
|
1992
|
+
className: "border-2 border-white/20"
|
|
1932
1993
|
}
|
|
1933
1994
|
),
|
|
1934
|
-
/* @__PURE__ */
|
|
1935
|
-
/* @__PURE__ */
|
|
1936
|
-
/* @__PURE__ */
|
|
1995
|
+
/* @__PURE__ */ jsxs22("div", { className: "min-w-0", children: [
|
|
1996
|
+
/* @__PURE__ */ jsx27("h3", { className: "font-semibold text-white text-sm truncate", children: name }),
|
|
1997
|
+
/* @__PURE__ */ jsx27("p", { className: "text-white/70 text-xs truncate", children: tagline })
|
|
1937
1998
|
] })
|
|
1938
1999
|
] }),
|
|
1939
|
-
/* @__PURE__ */
|
|
1940
|
-
/* @__PURE__ */
|
|
1941
|
-
/* @__PURE__ */
|
|
2000
|
+
/* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-3 mt-2 text-[11px] text-white/60", children: [
|
|
2001
|
+
/* @__PURE__ */ jsxs22("span", { className: "flex items-center gap-1", title: "Users", children: [
|
|
2002
|
+
/* @__PURE__ */ jsx27(Users2, { className: "w-3 h-3" }),
|
|
1942
2003
|
users.toLocaleString()
|
|
1943
2004
|
] }),
|
|
1944
|
-
/* @__PURE__ */
|
|
1945
|
-
/* @__PURE__ */
|
|
2005
|
+
/* @__PURE__ */ jsxs22("span", { className: "flex items-center gap-1", title: "Active quests", children: [
|
|
2006
|
+
/* @__PURE__ */ jsx27(Target2, { className: "w-3 h-3" }),
|
|
1946
2007
|
quests.toLocaleString()
|
|
1947
2008
|
] }),
|
|
1948
|
-
ratingCount > 0 && /* @__PURE__ */
|
|
1949
|
-
/* @__PURE__ */
|
|
2009
|
+
ratingCount > 0 && /* @__PURE__ */ jsxs22("span", { className: "flex items-center gap-1", title: `${ratingCount} reviews`, children: [
|
|
2010
|
+
/* @__PURE__ */ jsx27(ThumbsUp2, { className: "w-3 h-3" }),
|
|
1950
2011
|
positivePercent,
|
|
1951
2012
|
"%"
|
|
1952
2013
|
] })
|
|
@@ -1956,15 +2017,14 @@ function FeaturedProjectCard({
|
|
|
1956
2017
|
}
|
|
1957
2018
|
);
|
|
1958
2019
|
if (onClick) {
|
|
1959
|
-
return /* @__PURE__ */
|
|
2020
|
+
return /* @__PURE__ */ jsx27("button", { type: "button", onClick, className: "block text-left", draggable: false, children: card });
|
|
1960
2021
|
}
|
|
1961
2022
|
return card;
|
|
1962
2023
|
}
|
|
1963
2024
|
|
|
1964
2025
|
// src/components/media/InstalledProjectIcon.tsx
|
|
1965
|
-
import { useState as useState9 } from "react";
|
|
1966
2026
|
import { motion as motion3 } from "framer-motion";
|
|
1967
|
-
import { jsx as
|
|
2027
|
+
import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
1968
2028
|
function InstalledProjectIcon({
|
|
1969
2029
|
name,
|
|
1970
2030
|
logoUrl,
|
|
@@ -1976,8 +2036,7 @@ function InstalledProjectIcon({
|
|
|
1976
2036
|
buttonRef,
|
|
1977
2037
|
buttonProps
|
|
1978
2038
|
}) {
|
|
1979
|
-
|
|
1980
|
-
return /* @__PURE__ */ jsx27("div", { className: "relative", children: /* @__PURE__ */ jsxs22(
|
|
2039
|
+
return /* @__PURE__ */ jsx28("div", { className: "relative", children: /* @__PURE__ */ jsxs23(
|
|
1981
2040
|
motion3.button,
|
|
1982
2041
|
{
|
|
1983
2042
|
ref: buttonRef,
|
|
@@ -1991,46 +2050,27 @@ function InstalledProjectIcon({
|
|
|
1991
2050
|
className: `flex flex-col items-center gap-2 p-3 rounded-2xl group cursor-pointer relative${buttonProps?.className ? " " + buttonProps.className : ""}`,
|
|
1992
2051
|
style: { touchAction: "none", ...buttonProps?.style },
|
|
1993
2052
|
children: [
|
|
1994
|
-
/* @__PURE__ */
|
|
1995
|
-
/* @__PURE__ */
|
|
2053
|
+
/* @__PURE__ */ jsxs23("div", { className: "relative", children: [
|
|
2054
|
+
/* @__PURE__ */ jsx28(
|
|
1996
2055
|
"div",
|
|
1997
2056
|
{
|
|
1998
|
-
className: "absolute -inset-1 blur-xl opacity-0 group-hover:opacity-50 transition-all duration-300 rounded-2xl",
|
|
2057
|
+
className: "absolute -inset-1 blur-xl opacity-0 group-hover:opacity-50 transition-all duration-300 rounded-2xl pointer-events-none",
|
|
1999
2058
|
style: { backgroundColor: accentColor }
|
|
2000
2059
|
}
|
|
2001
2060
|
),
|
|
2002
|
-
/* @__PURE__ */
|
|
2003
|
-
|
|
2061
|
+
/* @__PURE__ */ jsx28(
|
|
2062
|
+
ProjectLogo,
|
|
2004
2063
|
{
|
|
2005
|
-
|
|
2006
|
-
|
|
2007
|
-
|
|
2008
|
-
|
|
2009
|
-
|
|
2010
|
-
|
|
2011
|
-
className: "absolute inset-0 opacity-30 group-hover:opacity-50 transition-opacity duration-500",
|
|
2012
|
-
style: {
|
|
2013
|
-
backgroundImage: `radial-gradient(at 27% 37%, rgba(255,255,255,0.15) 0px, transparent 50%),
|
|
2014
|
-
radial-gradient(at 97% 21%, rgba(255,255,255,0.1) 0px, transparent 50%)`
|
|
2015
|
-
}
|
|
2016
|
-
}
|
|
2017
|
-
),
|
|
2018
|
-
/* @__PURE__ */ jsx27("div", { className: "absolute top-0 right-0 w-8 h-8 bg-white/10 rounded-bl-full group-hover:w-10 group-hover:h-10 transition-all duration-300" }),
|
|
2019
|
-
logoUrl && !imgError ? /* @__PURE__ */ jsx27(
|
|
2020
|
-
"img",
|
|
2021
|
-
{
|
|
2022
|
-
src: logoUrl,
|
|
2023
|
-
alt: name,
|
|
2024
|
-
onError: () => setImgError(true),
|
|
2025
|
-
className: "absolute inset-0 w-full h-full object-cover z-10"
|
|
2026
|
-
}
|
|
2027
|
-
) : /* @__PURE__ */ jsx27("span", { className: "text-white font-bold text-2xl sm:text-3xl relative z-10", children: name[0] ?? "?" })
|
|
2028
|
-
]
|
|
2064
|
+
name,
|
|
2065
|
+
logoUrl,
|
|
2066
|
+
accentColor,
|
|
2067
|
+
size: "lg",
|
|
2068
|
+
className: "group-hover:shadow-xl transition-all duration-200",
|
|
2069
|
+
children: topRightAction
|
|
2029
2070
|
}
|
|
2030
|
-
)
|
|
2031
|
-
topRightAction
|
|
2071
|
+
)
|
|
2032
2072
|
] }),
|
|
2033
|
-
showLabel && /* @__PURE__ */
|
|
2073
|
+
showLabel && /* @__PURE__ */ jsx28("span", { className: "text-xs sm:text-sm font-medium text-neutral-500 dark:text-[rgba(255,255,255,0.45)] group-hover:text-neutral-900 dark:group-hover:text-white transition-colors truncate max-w-20 sm:max-w-24 text-center leading-tight", children: name })
|
|
2034
2074
|
]
|
|
2035
2075
|
}
|
|
2036
2076
|
) });
|
|
@@ -2052,7 +2092,7 @@ import {
|
|
|
2052
2092
|
Twitter,
|
|
2053
2093
|
Zap
|
|
2054
2094
|
} from "lucide-react";
|
|
2055
|
-
import { jsx as
|
|
2095
|
+
import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
2056
2096
|
var categoryLabels2 = {
|
|
2057
2097
|
game: "Game",
|
|
2058
2098
|
defi: "DeFi",
|
|
@@ -2092,16 +2132,16 @@ function ProjectPagePreview({
|
|
|
2092
2132
|
tags = []
|
|
2093
2133
|
}) {
|
|
2094
2134
|
const placeholderLogo = `https://placehold.co/80x80/${accentColor.slice(1)}/white?text=${name[0] ?? "?"}`;
|
|
2095
|
-
return /* @__PURE__ */
|
|
2135
|
+
return /* @__PURE__ */ jsxs24(
|
|
2096
2136
|
motion4.div,
|
|
2097
2137
|
{
|
|
2098
2138
|
initial: { opacity: 0 },
|
|
2099
2139
|
animate: { opacity: 1 },
|
|
2100
2140
|
className: "text-neutral-900 dark:text-white pb-12",
|
|
2101
2141
|
children: [
|
|
2102
|
-
/* @__PURE__ */
|
|
2103
|
-
/* @__PURE__ */
|
|
2104
|
-
/* @__PURE__ */
|
|
2142
|
+
/* @__PURE__ */ jsxs24("div", { className: "relative mx-4 sm:mx-6 mt-2", children: [
|
|
2143
|
+
/* @__PURE__ */ jsxs24("div", { className: "relative h-48 sm:h-64 rounded-2xl overflow-hidden", children: [
|
|
2144
|
+
/* @__PURE__ */ jsx29(
|
|
2105
2145
|
"div",
|
|
2106
2146
|
{
|
|
2107
2147
|
className: "absolute inset-0 bg-cover bg-center",
|
|
@@ -2112,13 +2152,13 @@ function ProjectPagePreview({
|
|
|
2112
2152
|
}
|
|
2113
2153
|
}
|
|
2114
2154
|
),
|
|
2115
|
-
/* @__PURE__ */
|
|
2116
|
-
/* @__PURE__ */
|
|
2117
|
-
/* @__PURE__ */
|
|
2155
|
+
/* @__PURE__ */ jsx29("div", { className: "absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" }),
|
|
2156
|
+
/* @__PURE__ */ jsxs24("div", { className: "absolute top-4 left-4 flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-black/40 backdrop-blur-sm text-white/80 text-sm", children: [
|
|
2157
|
+
/* @__PURE__ */ jsx29(ArrowLeft, { className: "w-4 h-4" }),
|
|
2118
2158
|
"Explore"
|
|
2119
2159
|
] })
|
|
2120
2160
|
] }),
|
|
2121
|
-
/* @__PURE__ */
|
|
2161
|
+
/* @__PURE__ */ jsx29("div", { className: "absolute -bottom-6 left-6 sm:left-8 z-10", children: /* @__PURE__ */ jsx29(
|
|
2122
2162
|
"img",
|
|
2123
2163
|
{
|
|
2124
2164
|
src: logoUrl ?? placeholderLogo,
|
|
@@ -2130,13 +2170,13 @@ function ProjectPagePreview({
|
|
|
2130
2170
|
}
|
|
2131
2171
|
) })
|
|
2132
2172
|
] }),
|
|
2133
|
-
/* @__PURE__ */
|
|
2134
|
-
/* @__PURE__ */
|
|
2135
|
-
/* @__PURE__ */
|
|
2136
|
-
/* @__PURE__ */
|
|
2137
|
-
tagline && /* @__PURE__ */
|
|
2138
|
-
(category || tags.length > 0) && /* @__PURE__ */
|
|
2139
|
-
category && /* @__PURE__ */
|
|
2173
|
+
/* @__PURE__ */ jsx29("section", { className: "px-4 sm:px-6 pt-10 pb-6", children: /* @__PURE__ */ jsxs24("div", { className: "no-text-shadow max-w-5xl mx-auto bg-neutral-50 dark:bg-white/4 dark:backdrop-blur-2xl rounded-2xl border border-neutral-200 dark:border-white/8 p-6 sm:p-8", children: [
|
|
2174
|
+
/* @__PURE__ */ jsxs24("div", { className: "flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4", children: [
|
|
2175
|
+
/* @__PURE__ */ jsxs24("div", { children: [
|
|
2176
|
+
/* @__PURE__ */ jsx29("h1", { className: "text-2xl sm:text-3xl font-bold", children: name }),
|
|
2177
|
+
tagline && /* @__PURE__ */ jsx29("p", { className: "text-neutral-500 dark:text-white/55 mt-1", children: tagline }),
|
|
2178
|
+
(category || tags.length > 0) && /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-2 mt-3", children: [
|
|
2179
|
+
category && /* @__PURE__ */ jsx29(
|
|
2140
2180
|
"span",
|
|
2141
2181
|
{
|
|
2142
2182
|
className: "inline-flex px-2.5 py-0.5 rounded-lg text-xs font-semibold uppercase tracking-wider",
|
|
@@ -2148,7 +2188,7 @@ function ProjectPagePreview({
|
|
|
2148
2188
|
children: categoryLabels2[category] ?? category
|
|
2149
2189
|
}
|
|
2150
2190
|
),
|
|
2151
|
-
tags.slice(0, 3).map((tag) => /* @__PURE__ */
|
|
2191
|
+
tags.slice(0, 3).map((tag) => /* @__PURE__ */ jsx29(
|
|
2152
2192
|
"span",
|
|
2153
2193
|
{
|
|
2154
2194
|
className: "px-2 py-0.5 rounded-md bg-neutral-100 dark:bg-white/6 text-neutral-500 dark:text-white/40 text-[10px] font-mono",
|
|
@@ -2158,30 +2198,30 @@ function ProjectPagePreview({
|
|
|
2158
2198
|
))
|
|
2159
2199
|
] })
|
|
2160
2200
|
] }),
|
|
2161
|
-
/* @__PURE__ */
|
|
2162
|
-
/* @__PURE__ */
|
|
2201
|
+
/* @__PURE__ */ jsxs24("div", { className: "flex gap-2 shrink-0 flex-wrap", children: [
|
|
2202
|
+
/* @__PURE__ */ jsxs24(
|
|
2163
2203
|
"button",
|
|
2164
2204
|
{
|
|
2165
2205
|
type: "button",
|
|
2166
2206
|
className: "inline-flex items-center gap-2 px-5 py-2.5 rounded-xl font-semibold text-sm transition-all cursor-pointer bg-orange-500 dark:bg-brand-orange hover:bg-orange-600 dark:hover:bg-brand-orange-dark text-white shadow-lg shadow-orange-500/20",
|
|
2167
2207
|
children: [
|
|
2168
|
-
/* @__PURE__ */
|
|
2208
|
+
/* @__PURE__ */ jsx29(Plus2, { className: "w-4 h-4" }),
|
|
2169
2209
|
" Add to Desktop"
|
|
2170
2210
|
]
|
|
2171
2211
|
}
|
|
2172
2212
|
),
|
|
2173
|
-
/* @__PURE__ */
|
|
2213
|
+
/* @__PURE__ */ jsxs24(
|
|
2174
2214
|
"button",
|
|
2175
2215
|
{
|
|
2176
2216
|
type: "button",
|
|
2177
2217
|
className: "inline-flex items-center gap-2 px-5 py-2.5 rounded-xl text-sm font-medium border border-neutral-200 dark:border-white/8 text-neutral-600 dark:text-white/55 hover:text-neutral-900 dark:hover:text-white hover:border-neutral-300 dark:hover:border-white/15 transition-colors cursor-pointer",
|
|
2178
2218
|
children: [
|
|
2179
2219
|
"Open ",
|
|
2180
|
-
/* @__PURE__ */
|
|
2220
|
+
/* @__PURE__ */ jsx29(ExternalLink, { className: "w-3.5 h-3.5" })
|
|
2181
2221
|
]
|
|
2182
2222
|
}
|
|
2183
2223
|
),
|
|
2184
|
-
websiteUrl && /* @__PURE__ */
|
|
2224
|
+
websiteUrl && /* @__PURE__ */ jsxs24(
|
|
2185
2225
|
"a",
|
|
2186
2226
|
{
|
|
2187
2227
|
href: websiteUrl,
|
|
@@ -2190,36 +2230,36 @@ function ProjectPagePreview({
|
|
|
2190
2230
|
className: "inline-flex items-center gap-2 px-5 py-2.5 rounded-xl text-sm font-medium border border-neutral-200 dark:border-white/8 text-neutral-600 dark:text-white/55 hover:text-neutral-900 dark:hover:text-white hover:border-neutral-300 dark:hover:border-white/15 transition-colors",
|
|
2191
2231
|
children: [
|
|
2192
2232
|
"Website ",
|
|
2193
|
-
/* @__PURE__ */
|
|
2233
|
+
/* @__PURE__ */ jsx29(Globe, { className: "w-3.5 h-3.5" })
|
|
2194
2234
|
]
|
|
2195
2235
|
}
|
|
2196
2236
|
)
|
|
2197
2237
|
] })
|
|
2198
2238
|
] }),
|
|
2199
|
-
/* @__PURE__ */
|
|
2200
|
-
/* @__PURE__ */
|
|
2201
|
-
/* @__PURE__ */
|
|
2202
|
-
/* @__PURE__ */
|
|
2203
|
-
/* @__PURE__ */
|
|
2239
|
+
/* @__PURE__ */ jsxs24("div", { className: "flex gap-6 sm:gap-10 border-t border-neutral-200 dark:border-white/8 mt-6 pt-5", children: [
|
|
2240
|
+
/* @__PURE__ */ jsxs24("div", { className: "text-center sm:text-left", children: [
|
|
2241
|
+
/* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-1.5 justify-center sm:justify-start", children: [
|
|
2242
|
+
/* @__PURE__ */ jsx29(Users3, { className: "w-4 h-4 text-neutral-400 dark:text-white/30" }),
|
|
2243
|
+
/* @__PURE__ */ jsx29("span", { className: "text-xl sm:text-2xl font-bold font-mono", children: users.toLocaleString() })
|
|
2204
2244
|
] }),
|
|
2205
|
-
/* @__PURE__ */
|
|
2245
|
+
/* @__PURE__ */ jsx29("span", { className: "text-xs text-neutral-400 dark:text-white/35 uppercase tracking-wider", children: "Users" })
|
|
2206
2246
|
] }),
|
|
2207
|
-
/* @__PURE__ */
|
|
2208
|
-
/* @__PURE__ */
|
|
2209
|
-
/* @__PURE__ */
|
|
2210
|
-
/* @__PURE__ */
|
|
2247
|
+
/* @__PURE__ */ jsxs24("div", { className: "text-center sm:text-left", children: [
|
|
2248
|
+
/* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-1.5 justify-center sm:justify-start", children: [
|
|
2249
|
+
/* @__PURE__ */ jsx29(Target3, { className: "w-4 h-4 text-neutral-400 dark:text-white/30" }),
|
|
2250
|
+
/* @__PURE__ */ jsx29("span", { className: "text-xl sm:text-2xl font-bold font-mono", children: activeQuests.toLocaleString() })
|
|
2211
2251
|
] }),
|
|
2212
|
-
/* @__PURE__ */
|
|
2252
|
+
/* @__PURE__ */ jsx29("span", { className: "text-xs text-neutral-400 dark:text-white/35 uppercase tracking-wider", children: "Active Quests" })
|
|
2213
2253
|
] }),
|
|
2214
|
-
ratingCount > 0 && /* @__PURE__ */
|
|
2215
|
-
/* @__PURE__ */
|
|
2216
|
-
/* @__PURE__ */
|
|
2217
|
-
/* @__PURE__ */
|
|
2254
|
+
ratingCount > 0 && /* @__PURE__ */ jsxs24("div", { className: "text-center sm:text-left", children: [
|
|
2255
|
+
/* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-1.5 justify-center sm:justify-start", children: [
|
|
2256
|
+
/* @__PURE__ */ jsx29(ThumbsUp3, { className: "w-4 h-4 text-neutral-400 dark:text-white/30" }),
|
|
2257
|
+
/* @__PURE__ */ jsxs24("span", { className: "text-xl sm:text-2xl font-bold font-mono", children: [
|
|
2218
2258
|
positivePercent,
|
|
2219
2259
|
"%"
|
|
2220
2260
|
] })
|
|
2221
2261
|
] }),
|
|
2222
|
-
/* @__PURE__ */
|
|
2262
|
+
/* @__PURE__ */ jsxs24("span", { className: "text-xs text-neutral-400 dark:text-white/35 uppercase tracking-wider", children: [
|
|
2223
2263
|
ratingCount.toLocaleString(),
|
|
2224
2264
|
" ",
|
|
2225
2265
|
ratingCount === 1 ? "review" : "reviews"
|
|
@@ -2227,16 +2267,16 @@ function ProjectPagePreview({
|
|
|
2227
2267
|
] })
|
|
2228
2268
|
] })
|
|
2229
2269
|
] }) }),
|
|
2230
|
-
media.length > 0 && /* @__PURE__ */
|
|
2231
|
-
/* @__PURE__ */
|
|
2232
|
-
/* @__PURE__ */
|
|
2270
|
+
media.length > 0 && /* @__PURE__ */ jsx29("section", { className: "px-4 sm:px-6 pb-8", children: /* @__PURE__ */ jsxs24("div", { className: "max-w-5xl mx-auto", children: [
|
|
2271
|
+
/* @__PURE__ */ jsx29("h2", { className: "text-lg font-semibold mb-4", children: "Media" }),
|
|
2272
|
+
/* @__PURE__ */ jsx29("div", { className: "flex gap-3 overflow-x-auto scrollbar-hide pb-2", children: media.map((item, i) => {
|
|
2233
2273
|
const isVideo = item.type === "video";
|
|
2234
|
-
return /* @__PURE__ */
|
|
2274
|
+
return /* @__PURE__ */ jsxs24(
|
|
2235
2275
|
"div",
|
|
2236
2276
|
{
|
|
2237
2277
|
className: "shrink-0 rounded-xl overflow-hidden border border-neutral-200 dark:border-white/8 relative",
|
|
2238
2278
|
children: [
|
|
2239
|
-
/* @__PURE__ */
|
|
2279
|
+
/* @__PURE__ */ jsx29(
|
|
2240
2280
|
"img",
|
|
2241
2281
|
{
|
|
2242
2282
|
src: getMediaThumb(item),
|
|
@@ -2245,40 +2285,40 @@ function ProjectPagePreview({
|
|
|
2245
2285
|
className: "h-44 sm:h-52 w-72 sm:w-80 object-cover"
|
|
2246
2286
|
}
|
|
2247
2287
|
),
|
|
2248
|
-
isVideo && /* @__PURE__ */
|
|
2288
|
+
isVideo && /* @__PURE__ */ jsx29("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsx29("div", { className: "w-14 h-14 rounded-full bg-black/60 backdrop-blur-sm flex items-center justify-center", children: /* @__PURE__ */ jsx29("svg", { className: "w-6 h-6 text-white ml-1", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx29("path", { d: "M8 5v14l11-7z" }) }) }) })
|
|
2249
2289
|
]
|
|
2250
2290
|
},
|
|
2251
2291
|
i
|
|
2252
2292
|
);
|
|
2253
2293
|
}) })
|
|
2254
2294
|
] }) }),
|
|
2255
|
-
description && /* @__PURE__ */
|
|
2256
|
-
/* @__PURE__ */
|
|
2257
|
-
/* @__PURE__ */
|
|
2295
|
+
description && /* @__PURE__ */ jsx29("section", { className: "px-4 sm:px-6 pb-8", children: /* @__PURE__ */ jsxs24("div", { className: "max-w-5xl mx-auto", children: [
|
|
2296
|
+
/* @__PURE__ */ jsx29("h2", { className: "text-lg font-semibold mb-4", children: "About" }),
|
|
2297
|
+
/* @__PURE__ */ jsx29("div", { className: "no-text-shadow bg-neutral-50 dark:bg-white/4 dark:backdrop-blur-2xl rounded-2xl border border-neutral-200 dark:border-white/8 p-6", children: /* @__PURE__ */ jsx29("p", { className: "text-neutral-600 dark:text-white/55 text-sm leading-relaxed whitespace-pre-line", children: description }) })
|
|
2258
2298
|
] }) }),
|
|
2259
|
-
quests.length > 0 && /* @__PURE__ */
|
|
2260
|
-
/* @__PURE__ */
|
|
2299
|
+
quests.length > 0 && /* @__PURE__ */ jsx29("section", { className: "px-4 sm:px-6 pb-8", children: /* @__PURE__ */ jsxs24("div", { className: "max-w-5xl mx-auto", children: [
|
|
2300
|
+
/* @__PURE__ */ jsxs24("h2", { className: "text-lg font-semibold mb-4", children: [
|
|
2261
2301
|
"Quests ",
|
|
2262
|
-
/* @__PURE__ */
|
|
2302
|
+
/* @__PURE__ */ jsxs24("span", { className: "text-neutral-400 dark:text-white/35 font-normal", children: [
|
|
2263
2303
|
"(",
|
|
2264
2304
|
quests.length,
|
|
2265
2305
|
")"
|
|
2266
2306
|
] })
|
|
2267
2307
|
] }),
|
|
2268
|
-
/* @__PURE__ */
|
|
2308
|
+
/* @__PURE__ */ jsx29("div", { className: "grid sm:grid-cols-2 gap-3", children: quests.map((quest) => /* @__PURE__ */ jsxs24(
|
|
2269
2309
|
"div",
|
|
2270
2310
|
{
|
|
2271
2311
|
className: "no-text-shadow bg-white dark:bg-white/4 dark:backdrop-blur-2xl rounded-xl border border-neutral-200 dark:border-white/8 p-4 relative overflow-hidden",
|
|
2272
2312
|
children: [
|
|
2273
|
-
/* @__PURE__ */
|
|
2274
|
-
/* @__PURE__ */
|
|
2275
|
-
/* @__PURE__ */
|
|
2276
|
-
/* @__PURE__ */
|
|
2277
|
-
quest.description && /* @__PURE__ */
|
|
2278
|
-
quest.difficulty && /* @__PURE__ */
|
|
2313
|
+
/* @__PURE__ */ jsx29("div", { className: "absolute left-0 top-0 bottom-0 w-0.5", style: { backgroundColor: accentColor } }),
|
|
2314
|
+
/* @__PURE__ */ jsxs24("div", { className: "flex items-start gap-3", children: [
|
|
2315
|
+
/* @__PURE__ */ jsxs24("div", { className: "min-w-0 flex-1", children: [
|
|
2316
|
+
/* @__PURE__ */ jsx29("h4", { className: "font-medium text-sm text-neutral-900 dark:text-white", children: quest.title }),
|
|
2317
|
+
quest.description && /* @__PURE__ */ jsx29("p", { className: "text-xs text-neutral-500 dark:text-white/40 mt-0.5 line-clamp-2", children: quest.description }),
|
|
2318
|
+
quest.difficulty && /* @__PURE__ */ jsx29("span", { className: `inline-flex mt-2 px-2 py-0.5 rounded-md text-[10px] font-semibold uppercase tracking-wider border ${difficultyStyles[quest.difficulty]}`, children: quest.difficulty })
|
|
2279
2319
|
] }),
|
|
2280
|
-
typeof quest.points === "number" && /* @__PURE__ */
|
|
2281
|
-
/* @__PURE__ */
|
|
2320
|
+
typeof quest.points === "number" && /* @__PURE__ */ jsxs24("div", { className: "shrink-0 flex items-center gap-1 px-2 py-1 rounded-lg bg-orange-500/10 dark:bg-brand-orange-dim text-orange-600 dark:text-brand-orange text-xs font-semibold", children: [
|
|
2321
|
+
/* @__PURE__ */ jsx29(Zap, { className: "w-3 h-3" }),
|
|
2282
2322
|
quest.points
|
|
2283
2323
|
] })
|
|
2284
2324
|
] })
|
|
@@ -2287,27 +2327,27 @@ function ProjectPagePreview({
|
|
|
2287
2327
|
quest.slug
|
|
2288
2328
|
)) })
|
|
2289
2329
|
] }) }),
|
|
2290
|
-
achievements.length > 0 && /* @__PURE__ */
|
|
2291
|
-
/* @__PURE__ */
|
|
2330
|
+
achievements.length > 0 && /* @__PURE__ */ jsx29("section", { className: "px-4 sm:px-6 pb-8", children: /* @__PURE__ */ jsxs24("div", { className: "max-w-5xl mx-auto", children: [
|
|
2331
|
+
/* @__PURE__ */ jsxs24("h2", { className: "text-lg font-semibold mb-4", children: [
|
|
2292
2332
|
"Achievements ",
|
|
2293
|
-
/* @__PURE__ */
|
|
2333
|
+
/* @__PURE__ */ jsxs24("span", { className: "text-neutral-400 dark:text-white/35 font-normal", children: [
|
|
2294
2334
|
"(",
|
|
2295
2335
|
achievements.length,
|
|
2296
2336
|
")"
|
|
2297
2337
|
] })
|
|
2298
2338
|
] }),
|
|
2299
|
-
/* @__PURE__ */
|
|
2339
|
+
/* @__PURE__ */ jsx29("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3", children: achievements.map((ach) => /* @__PURE__ */ jsxs24(
|
|
2300
2340
|
"div",
|
|
2301
2341
|
{
|
|
2302
2342
|
className: "no-text-shadow bg-white dark:bg-white/4 dark:backdrop-blur-2xl rounded-xl border border-neutral-200 dark:border-white/8 p-4 flex flex-col items-center text-center",
|
|
2303
2343
|
children: [
|
|
2304
|
-
/* @__PURE__ */
|
|
2344
|
+
/* @__PURE__ */ jsx29("div", { className: "w-16 h-16 rounded-xl overflow-hidden flex items-center justify-center mb-3", style: {
|
|
2305
2345
|
backgroundColor: `${accentColor}15`,
|
|
2306
2346
|
border: `1px solid ${accentColor}30`
|
|
2307
|
-
}, children: ach.imageUrl ? /* @__PURE__ */
|
|
2308
|
-
/* @__PURE__ */
|
|
2309
|
-
typeof ach.points === "number" && /* @__PURE__ */
|
|
2310
|
-
/* @__PURE__ */
|
|
2347
|
+
}, children: ach.imageUrl ? /* @__PURE__ */ jsx29("img", { src: ach.imageUrl, alt: ach.title, className: "w-full h-full object-cover" }) : /* @__PURE__ */ jsx29(Trophy, { className: "w-8 h-8", style: { color: accentColor } }) }),
|
|
2348
|
+
/* @__PURE__ */ jsx29("h4", { className: "text-sm font-medium text-neutral-900 dark:text-white line-clamp-2", children: ach.title }),
|
|
2349
|
+
typeof ach.points === "number" && /* @__PURE__ */ jsxs24("div", { className: "mt-2 flex items-center gap-1 text-xs font-semibold text-orange-600 dark:text-brand-orange", children: [
|
|
2350
|
+
/* @__PURE__ */ jsx29(Zap, { className: "w-3 h-3" }),
|
|
2311
2351
|
ach.points
|
|
2312
2352
|
] })
|
|
2313
2353
|
]
|
|
@@ -2315,15 +2355,15 @@ function ProjectPagePreview({
|
|
|
2315
2355
|
ach.slug
|
|
2316
2356
|
)) })
|
|
2317
2357
|
] }) }),
|
|
2318
|
-
/* @__PURE__ */
|
|
2319
|
-
/* @__PURE__ */
|
|
2320
|
-
/* @__PURE__ */
|
|
2321
|
-
/* @__PURE__ */
|
|
2322
|
-
/* @__PURE__ */
|
|
2358
|
+
/* @__PURE__ */ jsx29("section", { className: "px-4 sm:px-6 pb-8", children: /* @__PURE__ */ jsxs24("div", { className: "max-w-5xl mx-auto", children: [
|
|
2359
|
+
/* @__PURE__ */ jsx29("h2", { className: "text-lg font-semibold mb-4", children: "Reviews" }),
|
|
2360
|
+
/* @__PURE__ */ jsxs24("div", { className: "no-text-shadow bg-neutral-50 dark:bg-white/4 dark:backdrop-blur-2xl rounded-2xl border border-neutral-200 dark:border-white/8 p-6 flex flex-col items-center text-center", children: [
|
|
2361
|
+
/* @__PURE__ */ jsx29(Star2, { className: "w-8 h-8 text-neutral-300 dark:text-white/20 mb-2" }),
|
|
2362
|
+
/* @__PURE__ */ jsx29("p", { className: "text-sm text-neutral-500 dark:text-white/40", children: "Reviews coming soon" })
|
|
2323
2363
|
] })
|
|
2324
2364
|
] }) }),
|
|
2325
|
-
(websiteUrl || discordUrl || twitterUrl) && /* @__PURE__ */
|
|
2326
|
-
websiteUrl && /* @__PURE__ */
|
|
2365
|
+
(websiteUrl || discordUrl || twitterUrl) && /* @__PURE__ */ jsx29("section", { className: "px-4 sm:px-6 pb-8", children: /* @__PURE__ */ jsxs24("div", { className: "max-w-5xl mx-auto flex items-center gap-4", children: [
|
|
2366
|
+
websiteUrl && /* @__PURE__ */ jsx29(
|
|
2327
2367
|
"a",
|
|
2328
2368
|
{
|
|
2329
2369
|
href: websiteUrl,
|
|
@@ -2331,10 +2371,10 @@ function ProjectPagePreview({
|
|
|
2331
2371
|
rel: "noopener noreferrer",
|
|
2332
2372
|
"aria-label": "Website",
|
|
2333
2373
|
className: "text-neutral-400 dark:text-white/35 hover:text-orange-500 dark:hover:text-brand-orange transition-colors",
|
|
2334
|
-
children: /* @__PURE__ */
|
|
2374
|
+
children: /* @__PURE__ */ jsx29(Globe, { className: "w-5 h-5" })
|
|
2335
2375
|
}
|
|
2336
2376
|
),
|
|
2337
|
-
twitterUrl && /* @__PURE__ */
|
|
2377
|
+
twitterUrl && /* @__PURE__ */ jsx29(
|
|
2338
2378
|
"a",
|
|
2339
2379
|
{
|
|
2340
2380
|
href: twitterUrl,
|
|
@@ -2342,10 +2382,10 @@ function ProjectPagePreview({
|
|
|
2342
2382
|
rel: "noopener noreferrer",
|
|
2343
2383
|
"aria-label": "Twitter / X",
|
|
2344
2384
|
className: "text-neutral-400 dark:text-white/35 hover:text-orange-500 dark:hover:text-brand-orange transition-colors",
|
|
2345
|
-
children: /* @__PURE__ */
|
|
2385
|
+
children: /* @__PURE__ */ jsx29(Twitter, { className: "w-5 h-5" })
|
|
2346
2386
|
}
|
|
2347
2387
|
),
|
|
2348
|
-
discordUrl && /* @__PURE__ */
|
|
2388
|
+
discordUrl && /* @__PURE__ */ jsx29(
|
|
2349
2389
|
"a",
|
|
2350
2390
|
{
|
|
2351
2391
|
href: discordUrl,
|
|
@@ -2353,7 +2393,7 @@ function ProjectPagePreview({
|
|
|
2353
2393
|
rel: "noopener noreferrer",
|
|
2354
2394
|
"aria-label": "Discord",
|
|
2355
2395
|
className: "text-neutral-400 dark:text-white/35 hover:text-orange-500 dark:hover:text-brand-orange transition-colors",
|
|
2356
|
-
children: /* @__PURE__ */
|
|
2396
|
+
children: /* @__PURE__ */ jsx29(MessageCircle, { className: "w-5 h-5" })
|
|
2357
2397
|
}
|
|
2358
2398
|
)
|
|
2359
2399
|
] }) })
|
|
@@ -2406,6 +2446,7 @@ export {
|
|
|
2406
2446
|
MediaUploader,
|
|
2407
2447
|
MemoConditionsEditor,
|
|
2408
2448
|
PageShell,
|
|
2449
|
+
ProjectLogo,
|
|
2409
2450
|
ProjectPagePreview,
|
|
2410
2451
|
SearchInput,
|
|
2411
2452
|
Section,
|
package/package.json
CHANGED
package/src/styles/tokens.css
CHANGED
|
@@ -55,6 +55,19 @@
|
|
|
55
55
|
--radius-lg: 14px;
|
|
56
56
|
}
|
|
57
57
|
|
|
58
|
+
/* ─── Tailwind 4 theme map ────────────────────────────────────────────────
|
|
59
|
+
Expose the brand palette as Tailwind color tokens so consumers don't have
|
|
60
|
+
to repeat the @theme block themselves. Without these, classes like
|
|
61
|
+
`bg-brand-orange`, `dark:hover:shadow-brand-orange/15` silently no-op in
|
|
62
|
+
apps that don't redeclare the colors (e.g. sphere-dev-portal). */
|
|
63
|
+
@theme {
|
|
64
|
+
--color-brand-black: #020202;
|
|
65
|
+
--color-brand-white: #FEFEFE;
|
|
66
|
+
--color-brand-orange: #FF6F00;
|
|
67
|
+
--color-brand-orange-dark: #932D00;
|
|
68
|
+
--color-brand-orange-dim: rgba(255, 111, 0, 0.08);
|
|
69
|
+
}
|
|
70
|
+
|
|
58
71
|
/* ─── Base ─────────────────────────────────────────────────────────────── */
|
|
59
72
|
|
|
60
73
|
body {
|