@restnfeel/agentc-starter-kit
Version:
한국어 기업용 CMS 모듈 - Task Master AI와 함께 빠르게 웹사이트를 구현할 수 있는 재사용 가능한 컴포넌트 시스템
78 lines (75 loc) • 4.05 kB
JavaScript
"use client";
import { jsxs, jsx } from 'react/jsx-runtime';
import { forwardRef } from 'react';
const Loading = forwardRef(({ className = "", size = "md", variant = "spinner", text, center = false, color = "primary", overlay = false, ...props }, ref) => {
const sizeClasses = {
xs: "w-3 h-3",
sm: "w-4 h-4",
md: "w-8 h-8",
lg: "w-12 h-12",
xl: "w-16 h-16",
};
const colorClasses = {
primary: "text-primary",
secondary: "text-secondary",
muted: "text-muted-foreground",
};
const containerClasses = [
center ? "flex items-center justify-center" : "inline-flex items-center",
overlay ? "fixed inset-0 bg-background/80 backdrop-blur-sm z-50" : "",
colorClasses[color],
]
.filter(Boolean)
.join(" ");
const renderSpinner = () => (jsxs("svg", { className: `animate-spin ${sizeClasses[size]} ${className}`, fill: "none", viewBox: "0 0 24 24", "aria-hidden": "true", children: [jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", className: "opacity-25" }), jsx("path", { fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z", className: "opacity-75" })] }));
const renderDots = () => (jsx("div", { className: `flex space-x-1 ${className}`, "aria-hidden": "true", children: [0, 1, 2].map((i) => (jsx("div", { className: `rounded-full bg-current ${size === "xs"
? "w-1 h-1"
: size === "sm"
? "w-1.5 h-1.5"
: size === "md"
? "w-2 h-2"
: size === "lg"
? "w-3 h-3"
: "w-4 h-4"}`, style: {
animation: `loading-dots 1.4s ease-in-out ${i * 0.2}s infinite both`,
} }, i))) }));
const renderPulse = () => (jsx("div", { className: `rounded bg-current animate-pulse ${sizeClasses[size]} ${className}`, "aria-hidden": "true" }));
const renderBars = () => (jsx("div", { className: `flex space-x-1 items-end ${className}`, "aria-hidden": "true", children: [0, 1, 2, 3].map((i) => (jsx("div", { className: `bg-current ${size === "xs"
? "w-0.5"
: size === "sm"
? "w-0.5"
: size === "md"
? "w-1"
: size === "lg"
? "w-1.5"
: "w-2"} ${size === "xs"
? "h-2"
: size === "sm"
? "h-3"
: size === "md"
? "h-4"
: size === "lg"
? "h-6"
: "h-8"}`, style: {
animation: `loading-bars 1s ease-in-out ${i * 0.1}s infinite`,
} }, i))) }));
const renderRing = () => (jsxs("div", { className: `relative ${sizeClasses[size]} ${className}`, "aria-hidden": "true", children: [jsx("div", { className: "absolute inset-0 rounded-full border-2 border-current opacity-25" }), jsx("div", { className: "absolute inset-0 rounded-full border-2 border-transparent border-t-current animate-spin" })] }));
const renderVariant = () => {
switch (variant) {
case "dots":
return renderDots();
case "pulse":
return renderPulse();
case "bars":
return renderBars();
case "ring":
return renderRing();
default:
return renderSpinner();
}
};
return (jsxs("div", { ref: ref, className: containerClasses, role: "status", "aria-live": "polite", "aria-label": text || "Loading", ...props, children: [renderVariant(), text && jsx("span", { className: "ml-2 text-sm font-medium", children: text })] }));
});
Loading.displayName = "Loading";
export { Loading };
//# sourceMappingURL=Loading.js.map