Shared/ContactThumb

Default

Large

Size Comparison

Small

Component Source

contact-thumb.tsx

import type { FunctionComponent } from 'preact';
const ContactThumb: FunctionComponent = () => {
  // Base styles matching news-thumb
  const baseStyles =
    'relative overflow-hidden bg-zd-literal-black text-zd-literal-white flex flex-col items-center justify-center w-full aspect-square';

  return (
    <div className={baseStyles}>
      <div className={'absolute inset-0 border-[2px] border-zd-white'} />

      {/* inside text bg */}
      <div
        className={
          'absolute top-[20%] bottom-[20%] right-[20%] left-[20%] select-none z-10 bg-zd-literal-black'
        }
      ></div>

      {/* Mail icon in the center */}
      <div
        className={
          'absolute top-[20%] bottom-[20%] right-[20%] left-[20%] select-none z-10 bg-zd-literal-black'
        }
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 392.04 392.04"
          className="w-full h-full fill-zd-white"
        >
          <path d="M57.42 57.43c107.87-107.88 292.51-56.1 328.77 91.36 35.46 144.23-96.03 274.01-239.8 236.81C.43 347.83-49.66 164.5 57.42 57.43Zm80.49 50.73c-22.44.03-45.08.79-67.6.37-4.55.9-7.96 4.58-8.25 9.23v168.85c.32 5.02 4.23 8.92 9.24 9.24h249.26c5.42-.48 8.76-4.44 9.24-9.74V118.76c0-4.76-2.62-8.35-7-9.98-61.54.04-123.54-.7-184.9-.62Z" />
          <path d="m293.33 128.02-96.14 87.28-96.65-87.28h192.79zM292.83 276.36H102.04l68.67-58.26c.51.18.92.54 1.35.85 6.38 4.57 13.04 13.57 19.4 17.68 4.72 3.05 9.29 1.79 13.2-1.74l19.42-17.43 68.74 58.9ZM81.56 267.87V137.51l74.41 67.18-74.41 63.18zM310.31 264.87l-71.91-60.68 71.91-64.68v125.36z" />
        </svg>
      </div>

      {/* Bold diagonal line 1 (top-left to bottom-right) */}
      <div className={'absolute top-0 left-0 w-[141%] transform rotate-45 origin-top-left'}>
        <div className={'w-full h-0 border-t-[2px] border-zd-white mt-[-1px]'}></div>
      </div>

      {/* Bold diagonal line 2 (top-right to bottom-left) */}
      <div className={'absolute top-0 right-0 w-[141%] transform -rotate-45 origin-top-right'}>
        <div className={'w-full h-0 border-t-[2px] border-zd-white mt-[-1px]'}></div>
      </div>
    </div>
  );
};

export default ContactThumb;

Story Source

contact-thumb.stories.tsx

import ContactThumb from './contact-thumb';

/**
 * ContactThumb Component
 *
 * A stylized thumbnail for the contact page, displaying a mail icon
 * with diagonal line decorations matching the NewsThumb style.
 * Features:
 * - Square aspect ratio
 * - Centered mail envelope icon
 * - Bold diagonal lines for visual interest
 */
export const meta = {
  title: 'Shared/ContactThumb',
};

/**
 * Default - Standard size
 */
export const Default = () => (
  <div className="w-[200px]">
    <ContactThumb />
  </div>
);

/**
 * Small size
 */
export const Small = () => (
  <div className="w-[100px]">
    <ContactThumb />
  </div>
);

/**
 * Large size
 */
export const Large = () => (
  <div className="w-[300px]">
    <ContactThumb />
  </div>
);

/**
 * Comparison with NewsThumb style
 */
export const SizeComparison = () => (
  <div className="flex items-end gap-hgap-md">
    <div className="w-[100px]">
      <p className="text-muted text-xs mb-vgap-xs text-center">Small</p>
      <ContactThumb />
    </div>
    <div className="w-[200px]">
      <p className="text-muted text-xs mb-vgap-xs text-center">Medium</p>
      <ContactThumb />
    </div>
    <div className="w-[300px]">
      <p className="text-muted text-xs mb-vgap-xs text-center">Large</p>
      <ContactThumb />
    </div>
  </div>
);