50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
import React, { useState } from "react";
|
|
import Search from "../../ui/inputs/Search";
|
|
import DropDownList from "../../ui/list/DropDownList";
|
|
|
|
const Outline: React.FC = () => {
|
|
const [searchValue, setSearchValue] = useState<string>("");
|
|
|
|
const handleSearchChange = (value: string) => {
|
|
setSearchValue(value);
|
|
console.log(value); // Log the search value if needed
|
|
};
|
|
|
|
const dropdownItems = [
|
|
{ id: "1", name: "Ground Floor" },
|
|
{ id: "2", name: "Floor 1" },
|
|
]; // Example dropdown items
|
|
|
|
return (
|
|
<div className="outline-container">
|
|
<Search onChange={handleSearchChange} />
|
|
{searchValue ? (
|
|
<div className="searched-content">
|
|
<p>Results for "{searchValue}"</p>
|
|
</div>
|
|
) : (
|
|
<div className="outline-content-container">
|
|
<DropDownList
|
|
value="Layers"
|
|
items={dropdownItems}
|
|
defaultOpen={true}
|
|
showKebabMenu={false}
|
|
showFocusIcon={true}
|
|
remove
|
|
/>
|
|
<DropDownList
|
|
value="Scene"
|
|
items={dropdownItems}
|
|
defaultOpen={true}
|
|
listType="outline"
|
|
showKebabMenu={false}
|
|
showAddIcon={false}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Outline;
|