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>
);