Use prettier-plugin-tailwindcss (#11373)

* use prettier-plugin-tailwindcss to keep class names organized

* use prettierrc file to ensure formatting on save works with vscode

* classname reorder with prettier-plugin-tailwindcss
This commit is contained in:
Josh Hawkins
2024-05-14 10:06:44 -05:00
committed by GitHub
parent b10ae68c1f
commit 1757f4cb04
80 changed files with 682 additions and 597 deletions

View File

@@ -240,7 +240,7 @@ function PreviewVideoPlayer({
return (
<div
className={cn(
"relative rounded-lg md:rounded-2xl w-full flex justify-center bg-black overflow-hidden",
"relative flex w-full justify-center overflow-hidden rounded-lg bg-black md:rounded-2xl",
onClick && "cursor-pointer",
className,
)}
@@ -288,11 +288,11 @@ function PreviewVideoPlayer({
)}
</video>
{cameraPreviews && !currentPreview && (
<div className="absolute inset-0 text-white rounded-lg md:rounded-2xl flex justify-center items-center">
<div className="absolute inset-0 flex items-center justify-center rounded-lg text-white md:rounded-2xl">
No Preview Found
</div>
)}
{firstLoad && <Skeleton className="absolute size-full aspect-video" />}
{firstLoad && <Skeleton className="absolute aspect-video size-full" />}
</div>
);
}
@@ -482,7 +482,7 @@ function PreviewFramesPlayer({
return (
<div
className={cn(
"relative w-full flex justify-center",
"relative flex w-full justify-center",
className,
onClick && "cursor-pointer",
)}
@@ -490,15 +490,15 @@ function PreviewFramesPlayer({
>
<img
ref={imgRef}
className={`size-full object-contain rounded-lg md:rounded-2xl bg-black`}
className={`size-full rounded-lg bg-black object-contain md:rounded-2xl`}
onLoad={onImageLoaded}
/>
{previewFrames?.length === 0 && (
<div className="absolute inset-x-0 top-1/2 -y-translate-1/2 bg-black text-white rounded-lg md:rounded-2xl align-center text-center">
<div className="-y-translate-1/2 align-center absolute inset-x-0 top-1/2 rounded-lg bg-black text-center text-white md:rounded-2xl">
No Preview Found
</div>
)}
{firstLoad && <Skeleton className="absolute size-full aspect-video" />}
{firstLoad && <Skeleton className="absolute aspect-video size-full" />}
</div>
);
}