style: style with constant

P-r4Tes · Mar 13, 2024 · b099b46 · b099b46
1 parent d6e88af
commit b099b46
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/src/components/Sidebar/Pointer.tsx b/src/components/Sidebar/Pointer.tsx
@@ -1,11 +1,12 @@
 "use client";
 import { motion } from "framer-motion";
+import { CSSProperties } from "react";
 
-const Pointer = ({ top }: { top: number }) => {
+const Pointer = ({ top, style }: { top: number; style?: CSSProperties }) => {
   return (
     <motion.div
-      className="absolute left-1 w-2 h-2 rounded-full bg-white"
-      style={{ top: top }}
+      className={"absolute left-1 w-2 h-2 rounded-full bg-white"}
+      style={{ ...style, top: top }}
       layout
       transition={{ type: "spring", stiffness: 700, damping: 30 }}
     />

diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
@@ -7,15 +7,22 @@ import Pointer from "@/components/Sidebar/Pointer";
 type SidebarProps = {
   groups: (group & id)[];
 };
+
+const ASIDE_WIDTH = 80;
+const ASIDE_PADDING = 16;
+const GROUP_HEIGHT = ASIDE_WIDTH - ASIDE_PADDING * 2; // 48
+const GROUP_REDIUS = GROUP_HEIGHT / 2; // 24
+const POINTER_REDIUS = 4;
+
 const Sidebar = ({ groups }: SidebarProps) => {
   const [selectedIdx, setSelectedIdx] = useState(0);
-  const height = groups.length * 80 + 80;
-  const pointerY = selectedIdx * 64 + 24 - 4;
+  const height = groups.length * (GROUP_HEIGHT + ASIDE_PADDING) + 80;
+  const pointerY = selectedIdx * (GROUP_HEIGHT + ASIDE_PADDING) + GROUP_REDIUS - POINTER_REDIUS;
 
   return (
     <div className="flex h-screen">
-      <aside className={"flex items-center w-20 bg-[#383A57] rounded-l-3xl"} style={{ height: height }}>
-        <div className="relative flex flex-col items-center space-y-4 p-4">
+      <aside className="flex items-center  bg-[#383A57] rounded-l-3xl" style={{ height: height, width: ASIDE_WIDTH }}>
+        <div className="relative flex flex-col items-center space-y-4" style={{ padding: ASIDE_PADDING }}>
           {groups.map((group, idx) => {
             const onSelect: MouseEventHandler<HTMLAnchorElement> = () => {
               setSelectedIdx(idx);
@@ -31,7 +38,7 @@ const Sidebar = ({ groups }: SidebarProps) => {
             );
           })}
           <AddGroup href="." />
-          <Pointer top={pointerY} />
+          <Pointer top={pointerY} style={{ width: POINTER_REDIUS * 2, height: POINTER_REDIUS * 2 }} />
         </div>
       </aside>
     </div>