feat: ui improvements

src/app/(editor)/page.tsx

@@ -3,11 +3,11 @@
 import { Plus } from "lucide-react";
 import { ChangeEvent } from "react";
 import LineInputGroup from "@/components/LineInputGroup";
-import IconButton from "@/components/ui/IconButton";
+import IconOnlyButton from "@/components/IconOnlyButton";
 
 export default function Home() {
   const saveChanges = (e: ChangeEvent) => {
-
+    // TODO
   };
 
   return (
@@ -15,7 +15,7 @@ export default function Home() {
       <div className="flex flex-col items-center px-4 max-w-2xl w-full gap-4">
         <input className="font-bold text-xl w-full text-center focus:outline-none" onChange={saveChanges} defaultValue="Song" />
         <LineInputGroup size={4} onChange={saveChanges} />
-        <IconButton icon={<Plus size={24} />} />
+        <IconOnlyButton icon={<Plus size={24} />} />
       </div>
     </div>
   );

src/components/Header.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { ArrowRightFromLine, CircleQuestionMark, List, Plus, UserRound } from "lucide-react";
-import HeaderButton from "./ui/HeaderButton";
+import HeaderButton from "./HeaderButton";
 
 export default function Header({ showToolbar = true }: { showToolbar?: boolean }) {
   return (

src/components/IconOnlyButton.tsx

@@ -0,0 +1,14 @@
+import { ButtonHTMLAttributes, ReactNode } from "react";
+
+interface IconOnlyButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  icon: ReactNode;
+  alwaysOn?: boolean;
+}
+
+export default function IconOnlyButton({ icon, alwaysOn = false, ...props }: IconOnlyButtonProps) {
+  return (
+    <button className={`rounded-full p-2 border cursor-pointer ${alwaysOn ? "border-neutral-400 text-neutral-400" : "border-neutral-500 hover:border-neutral-400 text-neutral-500 hover:text-neutral-400"}`} {...props}>
+      {icon}
+    </button>
+  );
+}

src/components/LineInputGroup.tsx

@@ -1,7 +1,9 @@
-import { LockOpen, X } from "lucide-react";
+"use client";
-import LineInput from "./ui/LineInput";
+
-import IconButton from "./ui/IconButton";
+import { Lock, LockOpen, Menu, X } from "lucide-react";
-import { ChangeEvent } from "react";
+import LineInput from "./LineInput";
+import IconOnlyButton from "./IconOnlyButton";
+import { ChangeEvent, useState } from "react";
 
 export default function LineInputGroup({
   size = 4,
@@ -10,15 +12,20 @@ export default function LineInputGroup({
   size: number;
   onChange: (e: ChangeEvent) => void;
 }) {
+  const [locked, setLocked] = useState(false);
+
+  const switchLock = () => setLocked((locked) => !locked);
+
   return (
     <div className="flex gap-2 w-full">
       <div className="border-2 border-neutral-800 rounded-lg p-3 w-full">
-        <input type="text" placeholder="tag line" className="w-full focus:outline-none" />
+        <input type="text" placeholder="enter tag..." className="w-full focus:outline-none" disabled={locked} />
-        {[...Array(size)].map((_, i) => <LineInput onChange={onChange} key={i} />)}
+        {[...Array(size)].map((_, i) => <LineInput key={i} onChange={onChange} disabled={locked} />)}
       </div>
       <div className="flex flex-col gap-3">
-        <IconButton icon={<X size={18} />} />
+        <IconOnlyButton icon={<X size={18} />} />
-        <IconButton icon={<LockOpen size={18} />} />
+        <IconOnlyButton alwaysOn={locked} icon={locked ? <Lock size={18} /> : <LockOpen size={18} />} onClick={switchLock} />
+        <IconOnlyButton icon={<Menu size={18} />} />
       </div>
     </div>
   );

src/components/ui/IconButton.tsx

@@ -1,9 +0,0 @@
-import { ReactNode } from "react";
-
-export default function IconButton({ icon }: { icon: ReactNode }) {
-  return (
-    <button className="rounded-full p-2 border cursor-pointer border-neutral-500 hover:border-neutral-400 text-neutral-500 hover:text-neutral-400">
-      {icon}
-    </button>
-  );
-}