Design Finish Stage 1

1. Finish 3 pages design

src/components/shared/UrlDropdown.tsx

@@ -0,0 +1,56 @@
+// components/UrlDropdown.jsx
+import { useState } from "react";
+
+const urlOptions = [
+    "http://www.mysite.com",
+    "http://www.myseosucks.com",
+    "http://www.sribbble.com",
+    "http://www.myseosucks.com",
+    "http://www.myseosucks.com",
+    "http://www.myseosucks.com",
+];
+
+export default function UrlDropdown() {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selected, setSelected] = useState(urlOptions[0]);
+
+    const toggleDropdown = () => setIsOpen((prev) => !prev);
+    const handleSelect = (url) => {
+        setSelected(url);
+        setIsOpen(false);
+    };
+
+    return (
+        <div className="relative text-sm max-w-[400px] min-w-[220px]">
+            {/* Input box */}
+            <div
+                className="flex justify-between items-center border border-gray-300 bg-white px-2 py-1 rounded-xl cursor-pointer"
+                onClick={toggleDropdown}
+            >
+                <span className="truncate text-gray-800">{selected}</span>
+                <div className="flex items-center gap-2">
+                    <span className="text-gray-500 text-xs">▼</span>
+                </div>
+            </div>
+
+            {/* Dropdown list */}
+            {isOpen && (
+                <div className="absolute mt-1 w-full bg-white border border-gray-200 rounded shadow max-h-60 overflow-y-auto z-10">
+                    {urlOptions.map((url, index) => (
+                        <div
+                            key={index}
+                            onClick={() => handleSelect(url)}
+                            className={`flex justify-between items-center px-3 py-2 hover:bg-gray-100 cursor-pointer ${selected === url ? "font-bold text-black" : "text-gray-700"
+                                }`}
+                        >
+                            <span className="truncate">{url}</span>
+                            {selected === url && (
+                                <span className="text-green-500 text-sm">✔</span>
+                            )}
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}