You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
25 lines
737 B
25 lines
737 B
import type { ComponentProps } from "react";
|
|
|
|
export function LoadingBorderSpinner({
|
|
className = "",
|
|
...props
|
|
}: ComponentProps<"span">) {
|
|
const hasBorder = className.split(" ").some((c) => c.startsWith("border-"));
|
|
const borderClasses = hasBorder
|
|
? ""
|
|
: "border-2 border-rose-500/25 border-t-rose-500 dark:border-rose-400/20 dark:border-t-rose-400";
|
|
|
|
const hasSize = className
|
|
.split(" ")
|
|
.some(
|
|
(c) => c.startsWith("size-") || c.startsWith("w-") || c.startsWith("h-"),
|
|
);
|
|
const sizeClasses = hasSize ? "" : "size-5";
|
|
|
|
return (
|
|
<span
|
|
className={`animate-spin rounded-full inline-block animate-fade-in ${borderClasses} ${sizeClasses} ${className}`.trim()}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|