Initial commit: Tool Website with Password Generator, Image Converter and Bookmarks

app/components/AddWebsite.tsx

@@ -0,0 +1,98 @@
+'use client'
+import { useState } from 'react'
+import { PinnedWebsite } from '../types/types'
+
+export default function AddWebsite() {
+  const [url, setUrl] = useState('')
+  const [title, setTitle] = useState('')
+  const [isAdding, setIsAdding] = useState(false)
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    
+    // Validiere URL
+    try {
+      new URL(url)
+    } catch {
+      alert('Please enter a valid URL')
+      return
+    }
+
+    const newWebsite: PinnedWebsite = {
+      id: Date.now().toString(),
+      title: title || url,
+      url: url.startsWith('http') ? url : `https://${url}`,
+      addedAt: Date.now()
+    }
+
+    // Lade bestehende Websites
+    const existingWebsites = JSON.parse(localStorage.getItem('pinnedWebsites') || '[]')
+    
+    // Füge neue Website hinzu
+    localStorage.setItem('pinnedWebsites', JSON.stringify([...existingWebsites, newWebsite]))
+
+    // Setze Formular zurück
+    setUrl('')
+    setTitle('')
+    setIsAdding(false)
+
+    // Lade die Seite neu um die neue Website anzuzeigen
+    window.location.reload()
+  }
+
+  return (
+    <div className="mb-6">
+      {!isAdding ? (
+        <button
+          onClick={() => setIsAdding(true)}
+          className="w-full p-4 border border-dashed border-gray-700 rounded-lg text-gray-400 hover:border-blue-500 hover:text-blue-500 transition-colors"
+        >
+          + Add New Website
+        </button>
+      ) : (
+        <form onSubmit={handleSubmit} className="bg-zinc-800 p-4 rounded-lg space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-1">
+              URL
+            </label>
+            <input
+              type="text"
+              value={url}
+              onChange={(e) => setUrl(e.target.value)}
+              placeholder="https://example.com"
+              className="w-full bg-zinc-700 text-white rounded-md border border-gray-600 p-2"
+              required
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-1">
+              Title (optional)
+            </label>
+            <input
+              type="text"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="My Website"
+              className="w-full bg-zinc-700 text-white rounded-md border border-gray-600 p-2"
+            />
+          </div>
+          <div className="flex space-x-3">
+            <button
+              type="submit"
+              className="flex-1 bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 transition-colors"
+            >
+              Add
+            </button>
+            <button
+              type="button"
+              onClick={() => setIsAdding(false)}
+              className="flex-1 bg-zinc-700 text-white py-2 px-4 rounded-md hover:bg-zinc-600 transition-colors"
+            >
+              Cancel
+            </button>
+          </div>
+        </form>
+      )}
+    </div>
+  )
+}