Interaction area: UI consistency (#23)

Author: satelllte

.prettierrc.yml

@@ -8,3 +8,5 @@ semi: true
 singleQuote: true
 jsxSingleQuote: true
 bracketSpacing: false
+
+tailwindFunctions: ['clsx']

src/components/icons/SkeletonIcon.tsx

@@ -1,2 +1 @@
 export {PlayIcon} from './PlayIcon';
-export {SkeletonIcon} from './SkeletonIcon';

src/components/icons/index.ts

@@ -5,8 +5,12 @@ type SynthPageLayoutProps = {
 export function SynthPageLayout({children}: SynthPageLayoutProps) {
   return (
     <div className='flex min-h-screen flex-col items-center justify-center'>
-      <div className='max-w-full px-4 pt-8'>{children[0]}</div>
-      <div className='max-w-full px-4 pt-16'>{children[1]}</div>
+      <div className='flex w-full items-center justify-center px-4 pt-8'>
+        {children[0]}
+      </div>
+      <div className='flex w-full items-center justify-center px-4 pt-16'>
+        {children[1]}
+      </div>
     </div>
   );
 }

src/components/pages/SynthPage/SynthPageLayout.tsx

@@ -1,6 +1,5 @@
 import clsx from 'clsx';
 import {type ComponentProps} from 'react';
-import {SkeletonIcon} from '@/components/icons';
 
 type DivProps = ComponentProps<'div'>;
 
@@ -10,7 +9,7 @@ type InteractionAreaProps = Omit<DivProps, 'className' | 'children'> & {
 };
 
 const baseClass = clsx(
-  'flex select-none flex-col items-center gap-1 rounded-md border border-dashed border-gray-4 p-4 text-center text-gray-5 sm:p-8',
+  'flex h-32 w-full max-w-md select-none flex-col items-center justify-center gap-1 rounded-md border border-dashed border-gray-4 p-4 text-center text-gray-5 sm:p-8',
 );
 
 export function InteractionArea({icon, title, ...rest}: InteractionAreaProps) {
@@ -25,8 +24,7 @@ export function InteractionArea({icon, title, ...rest}: InteractionAreaProps) {
 export function InteractionAreaSkeleton() {
   return (
     <div className={baseClass}>
-      <SkeletonIcon />
-      <div className='h-6 w-80 max-w-full bg-gray-5 motion-safe:animate-pulse' />
+      <div className='h-full w-full bg-gray-5 motion-safe:animate-pulse' />
     </div>
   );
 }