wehub-resource-sync
316 lines
17 KiB
TypeScript
316 lines
17 KiB
TypeScript
import { type ComponentType, type ReactNode } from "react";
|
|
import { AbacusIcon } from "~/assets/icons/AbacusIcon";
|
|
import { AIChatIcon } from "~/assets/icons/AIChatIcon";
|
|
import { AIMetricsIcon } from "~/assets/icons/AIMetricsIcon";
|
|
import { AIPenIcon } from "~/assets/icons/AIPenIcon";
|
|
import { AISparkleIcon } from "~/assets/icons/AISparkleIcon";
|
|
import {
|
|
AnthropicIcon,
|
|
AzureIcon,
|
|
CerebrasIcon,
|
|
DeepseekIcon,
|
|
GeminiIcon,
|
|
LlamaIcon,
|
|
MistralIcon,
|
|
OpenAIIcon,
|
|
PerplexityIcon,
|
|
XAIIcon,
|
|
} from "~/assets/icons/AiProviderIcons";
|
|
import { AnthropicLogoIcon } from "~/assets/icons/AnthropicLogoIcon";
|
|
import { ArchiveIcon, UnarchiveIcon } from "~/assets/icons/ArchiveIcon";
|
|
import { ArrowLeftRightIcon } from "~/assets/icons/ArrowLeftRightIcon";
|
|
import { ArrowRightSquareIcon } from "~/assets/icons/ArrowRightSquareIcon";
|
|
import { ArrowTopRightBottomLeftIcon } from "~/assets/icons/ArrowTopRightBottomLeftIcon";
|
|
import { AttemptIcon } from "~/assets/icons/AttemptIcon";
|
|
import { AvatarCircleIcon } from "~/assets/icons/AvatarCircleIcon";
|
|
import { BatchesIcon } from "~/assets/icons/BatchesIcon";
|
|
import { BeakerIcon } from "~/assets/icons/BeakerIcon";
|
|
import { BellIcon } from "~/assets/icons/BellIcon";
|
|
import { BookIcon } from "~/assets/icons/BookIcon";
|
|
import { Box3DIcon } from "~/assets/icons/Box3DIcon";
|
|
import { BugIcon } from "~/assets/icons/BugIcon";
|
|
import { BulbIcon } from "~/assets/icons/BulbIcon";
|
|
import { BunLogoIcon } from "~/assets/icons/BunLogoIcon";
|
|
import { ChartArrowIcon } from "~/assets/icons/ChartArrowIcon";
|
|
import { ChartBarIcon } from "~/assets/icons/ChartBarIcon";
|
|
import { ChevronExtraSmallDown } from "~/assets/icons/ChevronExtraSmallDown";
|
|
import { ChevronExtraSmallUp } from "~/assets/icons/ChevronExtraSmallUp";
|
|
import { ClockIcon } from "~/assets/icons/ClockIcon";
|
|
import { ClockRotateLeftIcon } from "~/assets/icons/ClockRotateLeftIcon";
|
|
import { AWS, DigitalOcean } from "~/assets/icons/CloudProviderIcon";
|
|
import { CodeSquareIcon } from "~/assets/icons/CodeSquareIcon";
|
|
import { ConcurrencyIcon } from "~/assets/icons/ConcurrencyIcon";
|
|
import {
|
|
CheckingConnectionIcon,
|
|
ConnectedIcon,
|
|
DisconnectedIcon,
|
|
} from "~/assets/icons/ConnectionIcons";
|
|
import { CubeSparkleIcon } from "~/assets/icons/CubeSparkleIcon";
|
|
import { DeploymentsIcon } from "~/assets/icons/DeploymentsIcon";
|
|
import { DialIcon } from "~/assets/icons/DialIcon";
|
|
import { DropdownIcon } from "~/assets/icons/DropdownIcon";
|
|
import { DynamicTriggerIcon } from "~/assets/icons/DynamicTriggerIcon";
|
|
import { EndpointIcon } from "~/assets/icons/EndpointIcon";
|
|
import { EnvelopeIcon } from "~/assets/icons/EnvelopeIcon";
|
|
import {
|
|
BranchEnvironmentIconSmall,
|
|
DeployedEnvironmentIcon,
|
|
DeployedEnvironmentIconSmall,
|
|
DevEnvironmentIcon,
|
|
DevEnvironmentIconSmall,
|
|
PreviewEnvironmentIconSmall,
|
|
ProdEnvironmentIcon,
|
|
ProdEnvironmentIconSmall,
|
|
} from "~/assets/icons/EnvironmentIcons";
|
|
import { ErrorIcon } from "~/assets/icons/ErrorIcon";
|
|
import { ExitIcon } from "~/assets/icons/ExitIcon";
|
|
import { FolderClosedIcon } from "~/assets/icons/FolderClosedIcon";
|
|
import { FolderOpenIcon } from "~/assets/icons/FolderOpenIcon";
|
|
import { FunctionIcon } from "~/assets/icons/FunctionIcon";
|
|
import { GlobeLinesIcon } from "~/assets/icons/GlobeLinesIcon";
|
|
import { HomeIcon } from "~/assets/icons/HomeIcon";
|
|
import { IDIcon } from "~/assets/icons/IDIcon";
|
|
import { InfoIcon } from "~/assets/icons/InfoIcon";
|
|
import { IntegrationsIcon } from "~/assets/icons/IntegrationsIcon";
|
|
import { KeyboardDownIcon } from "~/assets/icons/KeyboardDownIcon";
|
|
import { KeyboardEnterIcon } from "~/assets/icons/KeyboardEnterIcon";
|
|
import { KeyboardIcon } from "~/assets/icons/KeyboardIcon";
|
|
import { KeyboardLeftIcon } from "~/assets/icons/KeyboardLeftIcon";
|
|
import { KeyboardRightIcon } from "~/assets/icons/KeyboardRightIcon";
|
|
import { KeyboardUpIcon } from "~/assets/icons/KeyboardUpIcon";
|
|
import { KeyboardWindowsIcon } from "~/assets/icons/KeyboardWindowsIcon";
|
|
import { KeyIcon } from "~/assets/icons/KeyIcon";
|
|
import { KeyValueIcon } from "~/assets/icons/KeyValueIcon";
|
|
import { ListBulletIcon } from "~/assets/icons/ListBulletIcon";
|
|
import { ListCheckedIcon } from "~/assets/icons/ListCheckedIcon";
|
|
import { LogsIcon } from "~/assets/icons/LogsIcon";
|
|
import { MachineDefaultIcon } from "~/assets/icons/MachineIcon";
|
|
import { MiddlewareIcon } from "~/assets/icons/MiddlewareIcon";
|
|
import { MoveToBottomIcon } from "~/assets/icons/MoveToBottomIcon";
|
|
import { MoveToTopIcon } from "~/assets/icons/MoveToTopIcon";
|
|
import { MoveUpIcon } from "~/assets/icons/MoveUpIcon";
|
|
import { NodejsLogoIcon } from "~/assets/icons/NodejsLogoIcon";
|
|
import { OneTreeIcon } from "~/assets/icons/OneTreeIcon";
|
|
import { PadlockIcon } from "~/assets/icons/PadlockIcon";
|
|
import { PauseIcon } from "~/assets/icons/PauseIcon";
|
|
import { PlaygroundIcon } from "~/assets/icons/PlaygroundIcon";
|
|
import { PlusIcon } from "~/assets/icons/PlusIcon";
|
|
import { PrivateIcon } from "~/assets/icons/PrivateIcon";
|
|
import { PromoteIcon } from "~/assets/icons/PromoteIcon";
|
|
import { PythonLogoIcon } from "~/assets/icons/PythonLogoIcon";
|
|
import { QuestionMarkIcon } from "~/assets/icons/QuestionMarkIcon";
|
|
import { QueuesIcon } from "~/assets/icons/QueuesIcon";
|
|
import { RadarPulseIcon } from "~/assets/icons/RadarPulseIcon";
|
|
import { FlagEurope, FlagUSA } from "~/assets/icons/RegionIcons";
|
|
import { RightSideMenuIcon } from "~/assets/icons/RightSideMenuIcon";
|
|
import { RolesIcon } from "~/assets/icons/RolesIcon";
|
|
import { RunFunctionIcon } from "~/assets/icons/RunFunctionIcon";
|
|
import { RunsIcon, RunsIconExtraSmall, RunsIconSmall } from "~/assets/icons/RunsIcon";
|
|
import { SaplingIcon } from "~/assets/icons/SaplingIcon";
|
|
import { ScheduleIcon } from "~/assets/icons/ScheduleIcon";
|
|
import { ShieldIcon } from "~/assets/icons/ShieldIcon";
|
|
import { ShieldLockIcon } from "~/assets/icons/ShieldLockIcon";
|
|
import { ShowParentIcon, ShowParentIconSelected } from "~/assets/icons/ShowParentIcon";
|
|
import { SideMenuRightClosedIcon } from "~/assets/icons/SideMenuRightClosed";
|
|
import { SlackIcon } from "~/assets/icons/SlackIcon";
|
|
import { SlackMonoIcon } from "~/assets/icons/SlackMonoIcon";
|
|
import { SlidersIcon } from "~/assets/icons/SlidersIcon";
|
|
import { SnakedArrowIcon } from "~/assets/icons/SnakedArrowIcon";
|
|
import { SparkleListIcon } from "~/assets/icons/SparkleListIcon";
|
|
import { StarIcon } from "~/assets/icons/StarIcon";
|
|
import { StatusIcon } from "~/assets/icons/StatusIcon";
|
|
import { StreamsIcon } from "~/assets/icons/StreamsIcon";
|
|
import { TableIcon } from "~/assets/icons/TableIcon";
|
|
import { TaskCachedIcon, TaskIcon, TaskIconSmall } from "~/assets/icons/TaskIcon";
|
|
import { TestTubeIcon } from "~/assets/icons/TestTubeIcon";
|
|
import { TextInlineIcon } from "~/assets/icons/TextInlineIcon";
|
|
import { TextWrapIcon } from "~/assets/icons/TextWrapIcon";
|
|
import { TimedOutIcon } from "~/assets/icons/TimedOutIcon";
|
|
import { ToggleArrowIcon } from "~/assets/icons/ToggleArrowIcon";
|
|
import { TraceIcon } from "~/assets/icons/TraceIcon";
|
|
import { TriggerIcon } from "~/assets/icons/TriggerIcon";
|
|
import { TwoTreesIcon } from "~/assets/icons/TwoTreesIcon";
|
|
import { UserCrossIcon } from "~/assets/icons/UserCrossIcon";
|
|
import { UserGroupIcon } from "~/assets/icons/UserGroupIcon";
|
|
import { WaitpointTokenIcon } from "~/assets/icons/WaitpointTokenIcon";
|
|
import { WarmStartIcon } from "~/assets/icons/WarmStartIcon";
|
|
import { WebhookIcon } from "~/assets/icons/WebhookIcon";
|
|
|
|
type IconEntry = {
|
|
name: string;
|
|
render: (className: string) => ReactNode;
|
|
};
|
|
|
|
function simple(Component: ComponentType<{ className?: string }>): IconEntry["render"] {
|
|
return (className) => <Component className={className} />;
|
|
}
|
|
|
|
const icons: IconEntry[] = [
|
|
{ name: "AbacusIcon", render: simple(AbacusIcon) },
|
|
{ name: "AIChatIcon", render: simple(AIChatIcon) },
|
|
{ name: "AIMetricsIcon", render: simple(AIMetricsIcon) },
|
|
{ name: "AIPenIcon", render: simple(AIPenIcon) },
|
|
{ name: "AISparkleIcon", render: simple(AISparkleIcon) },
|
|
{ name: "AnthropicIcon", render: simple(AnthropicIcon) },
|
|
{ name: "AnthropicLogoIcon", render: simple(AnthropicLogoIcon) },
|
|
{ name: "ArchiveIcon", render: simple(ArchiveIcon) },
|
|
{ name: "ArrowLeftRightIcon", render: simple(ArrowLeftRightIcon) },
|
|
{ name: "ArrowRightSquareIcon", render: simple(ArrowRightSquareIcon) },
|
|
{ name: "ArrowTopRightBottomLeftIcon", render: simple(ArrowTopRightBottomLeftIcon) },
|
|
{ name: "AttemptIcon", render: simple(AttemptIcon) },
|
|
{ name: "AvatarCircleIcon", render: simple(AvatarCircleIcon) },
|
|
{ name: "AWS", render: simple(AWS) },
|
|
{ name: "AzureIcon", render: simple(AzureIcon) },
|
|
{ name: "BatchesIcon", render: simple(BatchesIcon) },
|
|
{ name: "BeakerIcon", render: simple(BeakerIcon) },
|
|
{ name: "BellIcon", render: simple(BellIcon) },
|
|
{ name: "BookIcon", render: simple(BookIcon) },
|
|
{ name: "Box3DIcon", render: simple(Box3DIcon) },
|
|
{ name: "BranchEnvironmentIconSmall", render: simple(BranchEnvironmentIconSmall) },
|
|
{ name: "BugIcon", render: simple(BugIcon) },
|
|
{ name: "BulbIcon", render: simple(BulbIcon) },
|
|
{ name: "BunLogoIcon", render: simple(BunLogoIcon) },
|
|
{ name: "CerebrasIcon", render: simple(CerebrasIcon) },
|
|
{ name: "ChartArrowIcon", render: simple(ChartArrowIcon) },
|
|
{ name: "ChartBarIcon", render: simple(ChartBarIcon) },
|
|
{ name: "CheckingConnectionIcon", render: simple(CheckingConnectionIcon) },
|
|
{ name: "ChevronExtraSmallDown", render: simple(ChevronExtraSmallDown) },
|
|
{ name: "ChevronExtraSmallUp", render: simple(ChevronExtraSmallUp) },
|
|
{ name: "ClockIcon", render: simple(ClockIcon) },
|
|
{ name: "ClockRotateLeftIcon", render: simple(ClockRotateLeftIcon) },
|
|
{ name: "CodeSquareIcon", render: simple(CodeSquareIcon) },
|
|
{ name: "ConcurrencyIcon", render: simple(ConcurrencyIcon) },
|
|
{ name: "ConnectedIcon", render: simple(ConnectedIcon) },
|
|
{ name: "CubeSparkleIcon", render: simple(CubeSparkleIcon) },
|
|
{ name: "DeepseekIcon", render: simple(DeepseekIcon) },
|
|
{ name: "DeployedEnvironmentIcon", render: simple(DeployedEnvironmentIcon) },
|
|
{ name: "DeployedEnvironmentIconSmall", render: simple(DeployedEnvironmentIconSmall) },
|
|
{ name: "DeploymentsIcon", render: simple(DeploymentsIcon) },
|
|
{ name: "DevEnvironmentIcon", render: simple(DevEnvironmentIcon) },
|
|
{ name: "DevEnvironmentIconSmall", render: simple(DevEnvironmentIconSmall) },
|
|
{ name: "DialIcon", render: simple(DialIcon) },
|
|
{ name: "DigitalOcean", render: simple(DigitalOcean) },
|
|
{ name: "DisconnectedIcon", render: simple(DisconnectedIcon) },
|
|
{ name: "DropdownIcon", render: simple(DropdownIcon) },
|
|
{ name: "DynamicTriggerIcon", render: simple(DynamicTriggerIcon) },
|
|
{ name: "EndpointIcon", render: simple(EndpointIcon) },
|
|
{ name: "EnvelopeIcon", render: simple(EnvelopeIcon) },
|
|
{ name: "ErrorIcon", render: simple(ErrorIcon) },
|
|
{ name: "ExitIcon", render: simple(ExitIcon) },
|
|
{ name: "FlagEurope", render: simple(FlagEurope) },
|
|
{ name: "FlagUSA", render: simple(FlagUSA) },
|
|
{ name: "FolderClosedIcon", render: simple(FolderClosedIcon) },
|
|
{ name: "FolderOpenIcon", render: simple(FolderOpenIcon) },
|
|
{ name: "FunctionIcon", render: simple(FunctionIcon) },
|
|
{ name: "GeminiIcon", render: simple(GeminiIcon) },
|
|
{ name: "GlobeLinesIcon", render: simple(GlobeLinesIcon) },
|
|
{ name: "HomeIcon", render: simple(HomeIcon) },
|
|
{ name: "IDIcon", render: simple(IDIcon) },
|
|
{ name: "InfoIcon", render: simple(InfoIcon) },
|
|
{ name: "IntegrationsIcon", render: simple(IntegrationsIcon) },
|
|
{ name: "KeyboardDownIcon", render: simple(KeyboardDownIcon) },
|
|
{ name: "KeyboardEnterIcon", render: simple(KeyboardEnterIcon) },
|
|
{ name: "KeyboardIcon", render: simple(KeyboardIcon) },
|
|
{ name: "KeyboardLeftIcon", render: simple(KeyboardLeftIcon) },
|
|
{ name: "KeyboardRightIcon", render: simple(KeyboardRightIcon) },
|
|
{ name: "KeyboardUpIcon", render: simple(KeyboardUpIcon) },
|
|
{ name: "KeyboardWindowsIcon", render: simple(KeyboardWindowsIcon) },
|
|
{ name: "KeyIcon", render: simple(KeyIcon) },
|
|
{ name: "KeyValueIcon", render: simple(KeyValueIcon) },
|
|
{ name: "ListBulletIcon", render: simple(ListBulletIcon) },
|
|
{ name: "ListCheckedIcon", render: simple(ListCheckedIcon) },
|
|
{ name: "LlamaIcon", render: simple(LlamaIcon) },
|
|
{ name: "LogsIcon", render: simple(LogsIcon) },
|
|
{ name: "MachineDefaultIcon", render: simple(MachineDefaultIcon) },
|
|
{ name: "MiddlewareIcon", render: simple(MiddlewareIcon) },
|
|
{ name: "MistralIcon", render: simple(MistralIcon) },
|
|
{ name: "MoveToBottomIcon", render: simple(MoveToBottomIcon) },
|
|
{ name: "MoveToTopIcon", render: simple(MoveToTopIcon) },
|
|
{ name: "MoveUpIcon", render: simple(MoveUpIcon) },
|
|
{ name: "NodejsLogoIcon", render: simple(NodejsLogoIcon) },
|
|
{ name: "OneTreeIcon", render: simple(OneTreeIcon) },
|
|
{ name: "OpenAIIcon", render: simple(OpenAIIcon) },
|
|
{ name: "PadlockIcon", render: simple(PadlockIcon) },
|
|
{ name: "PauseIcon", render: simple(PauseIcon) },
|
|
{ name: "PerplexityIcon", render: simple(PerplexityIcon) },
|
|
{ name: "PlaygroundIcon", render: simple(PlaygroundIcon) },
|
|
{ name: "PlusIcon", render: simple(PlusIcon) },
|
|
{ name: "PreviewEnvironmentIconSmall", render: simple(PreviewEnvironmentIconSmall) },
|
|
{ name: "PrivateIcon", render: simple(PrivateIcon) },
|
|
{ name: "ProdEnvironmentIcon", render: simple(ProdEnvironmentIcon) },
|
|
{ name: "ProdEnvironmentIconSmall", render: simple(ProdEnvironmentIconSmall) },
|
|
{ name: "PromoteIcon", render: simple(PromoteIcon) },
|
|
{ name: "PythonLogoIcon", render: simple(PythonLogoIcon) },
|
|
{ name: "QuestionMarkIcon", render: simple(QuestionMarkIcon) },
|
|
{ name: "QueuesIcon", render: simple(QueuesIcon) },
|
|
{ name: "RadarPulseIcon", render: simple(RadarPulseIcon) },
|
|
{ name: "RightSideMenuIcon", render: simple(RightSideMenuIcon) },
|
|
{ name: "RolesIcon", render: simple(RolesIcon) },
|
|
{ name: "RunFunctionIcon", render: simple(RunFunctionIcon) },
|
|
{ name: "RunsIcon", render: simple(RunsIcon) },
|
|
{ name: "RunsIconExtraSmall", render: simple(RunsIconExtraSmall) },
|
|
{ name: "RunsIconSmall", render: simple(RunsIconSmall) },
|
|
{ name: "SaplingIcon", render: simple(SaplingIcon) },
|
|
{ name: "ScheduleIcon", render: simple(ScheduleIcon) },
|
|
{ name: "ShieldIcon", render: simple(ShieldIcon) },
|
|
{ name: "ShieldLockIcon", render: simple(ShieldLockIcon) },
|
|
{ name: "ShowParentIcon", render: simple(ShowParentIcon) },
|
|
{ name: "ShowParentIconSelected", render: simple(ShowParentIconSelected) },
|
|
{ name: "SideMenuRightClosedIcon", render: simple(SideMenuRightClosedIcon) },
|
|
{ name: "SlackIcon", render: simple(SlackIcon) },
|
|
{ name: "SlackMonoIcon", render: simple(SlackMonoIcon) },
|
|
{ name: "SlidersIcon", render: simple(SlidersIcon) },
|
|
{ name: "SnakedArrowIcon", render: simple(SnakedArrowIcon) },
|
|
{ name: "SparkleListIcon", render: simple(SparkleListIcon) },
|
|
{ name: "StarIcon", render: simple(StarIcon) },
|
|
{ name: "StatusIcon", render: simple(StatusIcon) },
|
|
{ name: "StreamsIcon", render: simple(StreamsIcon) },
|
|
{ name: "TableIcon", render: simple(TableIcon) },
|
|
{ name: "TaskCachedIcon", render: simple(TaskCachedIcon) },
|
|
{ name: "TaskIcon", render: simple(TaskIcon) },
|
|
{ name: "TaskIconSmall", render: simple(TaskIconSmall) },
|
|
{ name: "TestTubeIcon", render: simple(TestTubeIcon) },
|
|
{ name: "TextInlineIcon", render: simple(TextInlineIcon) },
|
|
{ name: "TextWrapIcon", render: simple(TextWrapIcon) },
|
|
{ name: "TimedOutIcon", render: simple(TimedOutIcon) },
|
|
{ name: "ToggleArrowIcon", render: simple(ToggleArrowIcon) },
|
|
{ name: "TraceIcon", render: simple(TraceIcon) },
|
|
{ name: "TriggerIcon", render: simple(TriggerIcon) },
|
|
{ name: "TwoTreesIcon", render: simple(TwoTreesIcon) },
|
|
{ name: "UnarchiveIcon", render: simple(UnarchiveIcon) },
|
|
{ name: "UserCrossIcon", render: simple(UserCrossIcon) },
|
|
{ name: "UserGroupIcon", render: simple(UserGroupIcon) },
|
|
{ name: "WaitpointTokenIcon", render: simple(WaitpointTokenIcon) },
|
|
{
|
|
name: "WarmStartIcon",
|
|
render: (className) => <WarmStartIcon isWarmStart={false} className={className} />,
|
|
},
|
|
{ name: "WebhookIcon", render: simple(WebhookIcon) },
|
|
{ name: "XAIIcon", render: simple(XAIIcon) },
|
|
];
|
|
|
|
const sortedIcons = [...icons].sort((a, b) => a.name.localeCompare(b.name));
|
|
|
|
export default function Story() {
|
|
return (
|
|
<div className="flex flex-col gap-4 p-6">
|
|
<div className="text-sm text-text-dimmed">
|
|
{sortedIcons.length} custom icons, rendered at 24px.
|
|
</div>
|
|
<div className="grid grid-cols-[repeat(auto-fill,minmax(140px,1fr))] gap-2">
|
|
{sortedIcons.map((icon) => (
|
|
<div
|
|
key={icon.name}
|
|
className="flex flex-col items-center gap-3 rounded-md border border-grid-bright bg-background-bright p-4 text-text-bright"
|
|
>
|
|
<div className="flex h-6 w-6 items-center justify-center">{icon.render("size-6")}</div>
|
|
<div className="w-full truncate text-center text-xs text-text-dimmed" title={icon.name}>
|
|
{icon.name}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|