57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
import { useMemo } from "react";
|
|
import { useState } from "react";
|
|
import { useParams } from "@tanstack/react-router";
|
|
import { useChainState } from "@/entities/chain/model";
|
|
|
|
import List from "@/shared/ui/List";
|
|
import { TextField } from "@mui/material";
|
|
import { AddChainButton } from "@/features/add-chain";
|
|
|
|
export default function Sidebar() {
|
|
const params = useParams({ strict: false });
|
|
const chains = useChainState((state) => state.chains || []);
|
|
const [query, setQuery] = useState("");
|
|
|
|
const filteredChains = useMemo(
|
|
() =>
|
|
chains.filter((value) =>
|
|
value.name?.toLowerCase().includes(query.toLocaleLowerCase()),
|
|
),
|
|
[query, chains],
|
|
);
|
|
|
|
// @ts-expect-error because i don't know why
|
|
const chainId: string | undefined = params.chainId;
|
|
|
|
return (
|
|
<div className="no-scrollbar relative flex h-screen w-[450px] flex-col bg-bg-color px-4 pb-2">
|
|
<div className="mt-3 flex w-full items-start gap-x-3 pb-2">
|
|
<TextField
|
|
fullWidth
|
|
color="primary"
|
|
sx={{ backgroundColor: "#23253B", input: { color: "white" } }}
|
|
variant="outlined"
|
|
size="small"
|
|
value={query}
|
|
onChange={(e) => setQuery(e.target.value)}
|
|
/>
|
|
<AddChainButton />
|
|
</div>
|
|
|
|
<div className="no-scrollbar grow overflow-y-scroll">
|
|
<List.Root className="space-y-2">
|
|
{filteredChains.map((chain) => (
|
|
<List.LinkItem
|
|
key={chain._id}
|
|
to={`/$namespace/${chain._id}`}
|
|
isSelected={chainId == chain._id}
|
|
>
|
|
{chain.name}
|
|
</List.LinkItem>
|
|
))}
|
|
</List.Root>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|