All files / src/components/common/MobileUnsupportedMessage index.tsx

100% Statements 15/15
100% Branches 1/1
100% Functions 1/1
100% Lines 15/15

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  1x     1x           1x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x    
// Constants
import { CONTENT_MESSAGE } from '@/constants/messages';
 
// Icons
import { LightBulbIcon } from '@/components/icons/reacts';
 
interface MobileUnsupportedMessageProps {
  pageName: string;
}
 
export const MobileUnsupportedMessage = ({
  pageName,
}: MobileUnsupportedMessageProps) => (
  <div className="lg:hidden mt-[35vh] sm:mt-[30vh] px-6 mx-auto">
    <div className="flex flex-row gap-2.5 items-center bg-white rounded-xl p-3 px-4 sm:p-5 border border-border-400 dark:bg-gray-800 dark:border-border-450">
      <div className="shrink-0 flex items-center justify-center size-8 sm:size-10 rounded-full bg-secondary-600">
        <LightBulbIcon className="size-5 sm:size-6" />
      </div>
      <p className="text-4xs sm:text-3xs text-muted-foreground dark:text-background">
        {CONTENT_MESSAGE.RESPONSIVE_UNSUPPORTED(pageName)}
      </p>
    </div>
  </div>
);