69 lines
3.7 KiB
TypeScript
69 lines
3.7 KiB
TypeScript
import React from 'react';
|
|
import { Globe } from 'lucide-react';
|
|
import { BrandSource } from '../../../types';
|
|
|
|
/**
|
|
* PlatformIcons — Inline SVG icons for social platforms.
|
|
* Used by BrandStickerContent to render the icon portion of a sticker.
|
|
*/
|
|
|
|
/** Instagram icon */
|
|
const InstagramIcon: React.FC<{ size: number }> = ({ size }) => (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" />
|
|
</svg>
|
|
);
|
|
|
|
/** TikTok icon */
|
|
const TikTokIcon: React.FC<{ size: number }> = ({ size }) => (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.27 6.27 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V9.19a8.16 8.16 0 004.77 1.53V7.27a4.84 4.84 0 01-1-.58z" />
|
|
</svg>
|
|
);
|
|
|
|
/** X (Twitter) icon */
|
|
const XIcon: React.FC<{ size: number }> = ({ size }) => (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
|
|
</svg>
|
|
);
|
|
|
|
/** YouTube icon */
|
|
const YouTubeIcon: React.FC<{ size: number }> = ({ size }) => (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
|
|
</svg>
|
|
);
|
|
|
|
/** Website / Globe icon — reuses Lucide Globe */
|
|
const WebsiteIcon: React.FC<{ size: number }> = ({ size }) => (
|
|
<Globe size={size} />
|
|
);
|
|
|
|
/** Get the platform icon component for a given brand source */
|
|
export function getPlatformIcon(source: BrandSource | string | undefined, size: number): React.ReactNode {
|
|
switch (source) {
|
|
case 'instagram': return <InstagramIcon size={size} />;
|
|
case 'tiktok': return <TikTokIcon size={size} />;
|
|
case 'twitter': return <XIcon size={size} />;
|
|
case 'youtube': return <YouTubeIcon size={size} />;
|
|
case 'website': return <WebsiteIcon size={size} />;
|
|
default: return null;
|
|
}
|
|
}
|
|
|
|
/** Brand sources that produce stickers (icon + text) */
|
|
export const SOCIAL_SOURCES: string[] = ['instagram', 'tiktok', 'twitter', 'youtube', 'website'];
|
|
|
|
/** Check if a brand source should produce a sticker */
|
|
export const isSocialSource = (source?: string): boolean => SOCIAL_SOURCES.includes(source || '');
|
|
|
|
/** Default sticker configuration */
|
|
export const DEFAULT_STICKER = {
|
|
showIcon: true,
|
|
iconPosition: 'left' as const,
|
|
showAtPrefix: true,
|
|
stickerStyle: 'plain' as const,
|
|
gap: 6,
|
|
};
|