🖼️ added images support

- Should investigate how to resize the image from .md specs

components/icons/IconWrapper.tsx

@@ -0,0 +1,38 @@
+import Image from 'next/image'
+
+interface IconWrapperProps {
+  name: string
+  alt?: string
+  size?: number
+  className?: string
+}
+
+export function IconWrapper({ name, alt, size = 32, className = '' }: IconWrapperProps) {
+  const iconPath = `/icons/${name}.png`
+
+  return <Image src={iconPath} alt={alt || name} width={size} height={size} className={className} />
+}
+
+export function EmailIcon({ size = 32, className = '' }: { size?: number; className?: string }) {
+  return <IconWrapper name="Email" size={size} className={className} />
+}
+
+export function TerminalIcon({ size = 32, className = '' }: { size?: number; className?: string }) {
+  return <IconWrapper name="Terminal" size={size} className={className} />
+}
+
+export function FolderIcon({ size = 32, className = '' }: { size?: number; className?: string }) {
+  return <IconWrapper name="Folder" size={size} className={className} />
+}
+
+export function DocumentIcon({ size = 32, className = '' }: { size?: number; className?: string }) {
+  return <IconWrapper name="Document" size={size} className={className} />
+}
+
+export function SettingsIcon({ size = 32, className = '' }: { size?: number; className?: string }) {
+  return <IconWrapper name="Settings" size={size} className={className} />
+}
+
+export function NetworkIcon({ size = 32, className = '' }: { size?: number; className?: string }) {
+  return <IconWrapper name="Network" size={size} className={className} />
+}

components/icons/index.tsx

@@ -0,0 +1,74 @@
+export {
+  IconWrapper,
+  EmailIcon,
+  TerminalIcon,
+  FolderIcon,
+  DocumentIcon,
+  SettingsIcon,
+  NetworkIcon,
+} from './IconWrapper'
+
+export function HomeIcon({ className = 'h-5 w-5' }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
+      />
+    </svg>
+  )
+}
+
+export function SearchIcon({ className = 'h-5 w-5' }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+      />
+    </svg>
+  )
+}
+
+export function TagIcon({ className = 'h-5 w-5' }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
+      />
+    </svg>
+  )
+}
+
+export function CalendarIcon({ className = 'h-5 w-5' }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+      />
+    </svg>
+  )
+}
+
+export function ClockIcon({ className = 'h-5 w-5' }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+      />
+    </svg>
+  )
+}