Files
Brancheneinstufung2/b2b-marketing-assistant/components/Icons.tsx

92 lines
8.2 KiB
TypeScript

import React from 'react';
export const LoadingSpinner: React.FC<{ className?: string }> = ({ className = '' }) => (
<svg className={`animate-spin h-5 w-5 text-white ${className}`} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
);
export const SparklesIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className={`h-5 w-5 ${className}`}>
<path fillRule="evenodd" d="M10.868 2.884c.321.772.117 1.671-.43 2.22l-.49.49a.45.45 0 01-.636 0l-.49-.49a1.5 1.5 0 01-.43-2.22c.321-.772 1.135-1.226 1.986-1.226s1.665.454 1.986 1.226zM5.334 5.334a.45.45 0 010 .636l-.49.49a1.5 1.5 0 01-2.22.43c-.772-.321-1.226-1.135-1.226-1.986s.454-1.665 1.226-1.986a1.5 1.5 0 012.22.43l.49.49a.45.45 0 01.636 0zm11.332 0a.45.45 0 01.636 0l.49.49a1.5 1.5 0 01.43 2.22c-.321.772-1.135 1.226-1.986 1.226s-1.665-.454-1.986-1.226a1.5 1.5 0 01.43-2.22l.49-.49a.45.45 0 010-.636zM14.666 14.666a.45.45 0 010-.636l.49-.49a1.5 1.5 0 012.22-.43c.772.321 1.226 1.135 1.226 1.986s-.454 1.665-1.226 1.986a1.5 1.5 0 01-2.22-.43l-.49-.49a.45.45 0 01-.636 0zM2.884 10.868a1.5 1.5 0 012.22-.43l.49.49a.45.45 0 010 .636l-.49.49a1.5 1.5 0 01-2.22.43c-.772-.321-1.226-1.135-1.226-1.986s.454-1.665 1.226-1.986z" clipRule="evenodd" />
</svg>
);
export const CopyIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={`h-6 w-6 ${className}`}>
<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" />
</svg>
);
export const BotIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={`h-6 w-6 ${className}`}>
<path strokeLinecap="round" strokeLinejoin="round" d="M8.25 7.5l.415-.207a.75.75 0 011.085.67V10.5m0 0h6m-6 0a.75.75 0 001.085.67l.415-.207M8.25 10.5V7.5m0 3H7.5m1.5 0a.75.75 0 01.67 1.085l-.207.415a.75.75 0 01-1.085.67L7.5 12.75m0-3h-1.5m1.5 0a.75.75 0 00-.67 1.085l.207.415a.75.75 0 001.085.67L8.25 12.75m0-3h1.5m-1.5 0a.75.75 0 01-.67-1.085l.207-.415a.75.75 0 011.085-.67L8.25 9m0 3h-1.5M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path strokeLinecap="round" strokeLinejoin="round" d="M2.25 13.5a11.25 11.25 0 0119.5 0v6.75c0 2.347-1.903 4.25-4.25 4.25H6.5c-2.347 0-4.25-1.903-4.25-4.25V13.5z" />
</svg>
);
export const DownloadIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={`h-6 w-6 ${className}`}>
<path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
</svg>
);
export const PrintIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={`h-6 w-6 ${className}`}>
<path strokeLinecap="round" strokeLinejoin="round" d="M6.72 13.829c-.24.03-.48.062-.72.096m.72-.096a42.415 42.415 0 0110.56 0m-10.56 0L6 18.25m0 0h12M6 18.25a42.415 42.415 0 0010.56 0m-10.56 0L6 13.829m0 0L6 18.25m6-13.5L12 3m0 0L12 3m0 0v18m0-18L12 3m0 0h6m-6 0H6" />
</svg>
);
export const MarkdownIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={`h-6 w-6 ${className}`}>
<path strokeLinecap="round" strokeLinejoin="round" d="M12 2.25a.75.75 0 01.75.75v18a.75.75 0 01-1.5 0v-18A.75.75 0 0112 2.25zM6 4.5A2.25 2.25 0 018.25 2.25h.5a2.25 2.25 0 012.25 2.25v.5A2.25 2.25 0 018.75 7.5h-.5A2.25 2.25 0 016 5.25v-.75zm12 0A2.25 2.25 0 0015.75 2.25h-.5a2.25 2.25 0 00-2.25 2.25v.5A2.25 2.25 0 0015.25 7.5h.5A2.25 2.25 0 0018 5.25v-.75zm-6 15a.75.75 0 01-.75-.75v-3a.75.75 0 011.5 0v3a.75.75 0 01-.75.75z" clipRule="evenodd" />
</svg>
);
export const ChevronDownIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className={`h-5 w-5 ${className}`}>
<path fillRule="evenodd" d="M5.22 8.22a.75.75 0 011.06 0L10 11.94l3.72-3.72a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.22 9.28a.75.75 0 010-1.06z" clipRule="evenodd" />
</svg>
);
export const ClipboardTableIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={`h-6 w-6 ${className}`}>
<path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-4.5 0V6.75A.75.75 0 0113.5 6z" />
<path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6V3.75A2.25 2.25 0 0115.75 1.5h1.5A2.25 2.25 0 0119.5 3.75V6" />
<path strokeLinecap="round" strokeLinejoin="round" d="M19.5 6h-6" />
</svg>
);
export const SearchIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={`h-6 w-6 ${className}`}>
<path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
</svg>
);
export const TrashIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={`h-6 w-6 ${className}`}>
<path strokeLinecap="round" strokeLinejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
</svg>
);
export const CheckIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className={`h-5 w-5 ${className}`}>
<polyline points="20 6 9 17 4 12" />
</svg>
);
export const XMarkIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className={`h-5 w-5 ${className}`}>
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
</svg>
);
export const RefreshIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={`h-6 w-6 ${className}`}>
<path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
</svg>
);