style: chart interval 버튼 스타일 수정

sipe-team · May 24, 2024 · 2a8a6e0 · 2a8a6e0
1 parent 17b1658
commit 2a8a6e0
Showing 1 changed file with 26 additions and 16 deletions.
diff --git a/frontend/src/components/SampleChart3/index.tsx b/frontend/src/components/SampleChart3/index.tsx
@@ -124,26 +124,36 @@ function SampleChart3() {
   }, [currentInterval, chartState, seriesState]);
 
   return (
-    <div className="w-full">
-      {intervals.map((interval) => (
-        <Button
-          key={interval}
-          color={currentInterval === interval ? 'primary' : 'default'}
-          type="button"
-          onClick={() => setCurrentInterval(interval)}
-        >
-          {interval}
-        </Button>
-      ))}
+    <div className="w-full flex flex-col gap-4">
+      <div className="flex flex-row align-middle justify-start gap-1">
+        {intervals.map((interval) => (
+          <Button
+            key={interval}
+            color={currentInterval === interval ? 'primary' : 'default'}
+            type="button"
+            radius="sm"
+            size="sm"
+            variant="flat"
+            // className="bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg"
+            onClick={() => setCurrentInterval(interval)}
+          >
+            {interval}
+          </Button>
+        ))}
+      </div>
       <div
         ref={chartContainerRef}
         className={styles.chartContainer}
       />
-      <Button
-        onClick={() => chartState?.timeScale().scrollToRealTime()}
-      >
-        Go to realtime
-      </Button>
+      <div>
+        <Button
+          variant="light"
+          color="primary"
+          onClick={() => chartState?.timeScale().scrollToRealTime()}
+        >
+          Go to realtime
+        </Button>
+      </div>
     </div>
   );
 }