All files / packages/components/src skeleton-input.tsx

100% Statements 2/2
50% Branches 1/2
100% Functions 1/1
100% Lines 2/2

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28                          8x 498x                          
import type React from "react";
 
import { Input } from "~components/input";
import { Skeleton } from "~components/skeleton";
import { cn } from "~components/utils";
 
export const SkeletonInput: React.FC<
	Pick<
		React.ComponentProps<typeof Input>,
		"multiline" | "startContent" | "label" | "endContent" | "className" | "size"
	> & {
		skeletonClassName?: string;
	}
> = ({ startContent, skeletonClassName, ...props }) => (
	<Input
		{...props}
		isDisabled
		isReadOnly
		startContent={
			startContent === undefined ? (
				<Skeleton className={cn("h-4 w-32 rounded-md", skeletonClassName)} />
			) : (
				startContent
			)
		}
	/>
);