65 أسطر
3.0 KiB
TypeScript
65 أسطر
3.0 KiB
TypeScript
// components/UrlDropdown.jsx
|
|
import { useState } from "react";
|
|
|
|
const urlOptions = [
|
|
"http://www.mysite.com",
|
|
"http://www.myseosucks.com",
|
|
"http://www.sribbble.com",
|
|
"http://onekeyword.com"
|
|
];
|
|
|
|
export default function UrlDropdown() {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [selected, setSelected] = useState(urlOptions[0]);
|
|
|
|
const toggleDropdown = () => setIsOpen((prev) => !prev);
|
|
const handleSelect = (url: string) => {
|
|
setSelected(url);
|
|
setIsOpen(false);
|
|
};
|
|
|
|
return (
|
|
<div className="relative text-sm max-w-[400px] min-w-[220px] mb:mb-0 mb-4">
|
|
{/* Input box */}
|
|
<div
|
|
className={`flex justify-between items-center border-2 bg-white px-2 py-1 rounded-lg cursor-pointer ${isOpen ? "border-blue-500" : "border-gray-300"} transition-all duration-100`}
|
|
onClick={toggleDropdown}
|
|
>
|
|
<span className="truncate text-gray-800">{selected}</span>
|
|
<div className="flex items-center gap-2">
|
|
{isOpen ? (
|
|
<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M9 5L5 1L1 5" stroke="#65677D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
) : (
|
|
<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M1 1L5 5L9 1" stroke="#65677D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Dropdown list */}
|
|
{isOpen && (
|
|
<div className="absolute mt-1 bg-white border border-gray-200 rounded shadow max-h-60 overflow-y-auto z-10 w-[110%]">
|
|
{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 && (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="12" viewBox="0 0 15 12" fill="none">
|
|
<path d="M1 6.25L5 10.25L13.5 1.75" stroke="#4C60E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
} |