DefaultImagePlaceholder.tsx

import { chakra } from '@chakra-ui/react';

export const DefaultImagePlaceholder: React.FC = (props) => (
  <chakra.svg width="auto" viewBox="0 0 1600 900" bgColor="#F1F5F9" {...props}>
    <g clipPath="url(#a)">
      <path d="M1600 0 0 900M0 0l1600 900" stroke="#CBD5E1" strokeWidth={5} />
      <path fill="#F1F5F9" d="M616 266h368v368H616z" />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M691.875 327.5c-8.491 0-15.375 6.884-15.375 15.375v215.25c0 8.491 6.884 15.375 15.375 15.375h215.25c8.491 0 15.375-6.884 15.375-15.375v-215.25c0-8.491-6.884-15.375-15.375-15.375h-215.25Zm-46.125 15.375c0-25.474 20.651-46.125 46.125-46.125h215.25c25.474 0 46.125 20.651 46.125 46.125v215.25c0 25.474-20.651 46.125-46.125 46.125h-215.25c-25.474 0-46.125-20.651-46.125-46.125v-215.25Z"
        fill="#94A3B8"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M745.688 389a7.688 7.688 0 1 0 0 15.376 7.688 7.688 0 0 0 0-15.376Zm-38.438 7.688c0-21.229 17.209-38.438 38.438-38.438 21.228 0 38.437 17.209 38.437 38.438 0 21.228-17.209 38.437-38.437 38.437-21.229 0-38.438-17.209-38.438-38.437ZM850.128 408.878c6.005-6.004 15.739-6.004 21.744 0l76.875 76.875c6.004 6.005 6.004 15.739 0 21.744-6.005 6.004-15.739 6.004-21.744 0L861 441.494 702.747 599.747c-6.005 6.004-15.739 6.004-21.744 0-6.004-6.004-6.004-15.739 0-21.744l169.125-169.125Z"
        fill="#94A3B8"
      />
    </g>
    <defs>
      <clipPath id="a">
        <path fill="#fff" d="M0 0h1600v900H0z" />
      </clipPath>
    </defs>
  </chakra.svg>
);