list component

src/shared/ui/List/LinkItem.tsx

@@ -0,0 +1,50 @@
+import { cn } from "@/shared/lib";
+
+import Button from "@mui/material/Button";
+import { Link } from "@tanstack/react-router";
+
+interface LinkItemProps extends React.HTMLAttributes<HTMLLIElement> {
+  children?: React.ReactNode;
+  className?: string;
+  to: string;
+  isSelected?: boolean;
+}
+
+export default function LinkItem({
+  children,
+  className,
+  to,
+  isSelected = false,
+  ...props
+}: LinkItemProps) {
+  return (
+    <li className={cn("", className)} {...props}>
+      <Link to={to}>
+        <Button
+          variant={isSelected ? "contained" : "text"}
+          sx={{
+            width: "100%",
+            justifyContent: "start",
+            textTransform: "none",
+            fontWeight: "semibold",
+            color: isSelected ? "white" : "#9B99B0",
+            borderRadius: "6px",
+            boxShadow: "none",
+            paddingInline: "16px",
+            ":hover": {
+              boxShadow: "none",
+            },
+          }}
+        >
+          <span
+            className={cn(
+              "bg-neutral mr-2 h-2 w-2 rounded-full",
+              isSelected && "bg-white",
+            )}
+          />
+          <span>{children}</span>
+        </Button>
+      </Link>
+    </li>
+  );
+}

src/shared/ui/List/Root.tsx

@@ -0,0 +1,9 @@
+import { cn } from "@/shared/lib";
+
+interface RootProps extends React.HTMLAttributes<HTMLUListElement> {
+  className?: string;
+}
+
+export default function Root({ className, ...props }: RootProps) {
+  return <ul className={cn("", className)} {...props} />;
+}

src/shared/ui/List/index.ts

@@ -0,0 +1,4 @@
+import Root from "./Root";
+import LinkItem from "./LinkItem";
+
+export default { Root, LinkItem };