Skeleton

import { css } from 'remix/component'

import { Skeleton } from '#app/ui/skeleton.tsx'

const line = css({ height: '1rem' })

import { css } from 'remix/component'

import { Skeleton } from '#app/ui/skeleton.tsx'

const line = css({ height: '1rem' })

export function SkeletonDemo() {
  return () => (
    <div
      mix={css({
        display: 'flex',
        alignItems: 'center',
        '& > :not(:last-child)': { marginInlineEnd: '1rem' },
      })}
    >
      <Skeleton mix={css({ height: '3rem', width: '3rem', borderRadius: '9999px' })} />
      <div mix={css({ '& > :not(:last-child)': { marginBottom: '0.5rem' } })}>
        <Skeleton mix={[line, css({ width: '250px' })]} />
        <Skeleton mix={[line, css({ width: '200px' })]} />
      </div>
    </div>
  )
}

import { css } from 'remix/component'

import { Skeleton } from '#app/ui/skeleton.tsx'

const line = css({ height: '1rem' })

import { css } from 'remix/component'

import { Skeleton } from '#app/ui/skeleton.tsx'

const line = css({ height: '1rem' })

export function SkeletonCard() {
  return () => (
    <div
      mix={css({
        display: 'flex',
        flexDirection: 'column',
        '& > :not(:last-child)': { marginBottom: '0.75rem' },
      })}
    >
      <Skeleton
        mix={css({ height: '125px', width: '250px', borderRadius: 'calc(var(--radius) + 4px)' })}
      />
      <div mix={css({ '& > :not(:last-child)': { marginBottom: '0.5rem' } })}>
        <Skeleton mix={[line, css({ width: '250px' })]} />
        <Skeleton mix={[line, css({ width: '200px' })]} />
      </div>
    </div>
  )
}