refactor: move styled components to their own style.ts file

2 files changed, 45 insertions, 44 deletions

diff --git a/src/app/components/LRCPlayer.styles.ts b/src/app/components/LRCPlayer.styles.ts
new file mode 100644
index 0000000..560db2d
--- /dev/null
+++ b/src/app/components/LRCPlayer.styles.ts
@@ -0,0 +1,44 @@
+import styled, { css } from "styled-components";
+
+interface LineProps {
+  $active: boolean;
+  $next: boolean;
+  $animate: boolean;
+  $lrcColor: string;
+  $fontColor: string;
+}
+
+export const Line = styled.div<LineProps>`
+  min-height: 10px;
+  padding: 14px 30px;
+
+  font-size: 40px;
+  font-family: "Roboto", sans-serif;
+  font-weight: 500;
+  text-align: center;
+  color: ${({ $fontColor }) => $fontColor};
+
+  background: ${({ $lrcColor }) => `linear-gradient(
+    to right,
+    rgba(0, 0, 0, 0) 50%,
+    ${$lrcColor} 50%
+  )`};
+  background-size: 200% 100%;
+  background-position: right bottom;
+
+  ${({ $animate }) =>
+    $animate &&
+    css`
+      transition:
+        color 0.3s ease,
+        background-position 0.5s ease;
+    `}
+
+  ${({ $active }) =>
+    $active &&
+    css`
+      color: rgb(50, 50, 50);
+      font-weight: 700;
+      background-position: left bottom;
+    `}
+`;
diff --git a/src/app/components/LRCPlayer.tsx b/src/app/components/LRCPlayer.tsx
index 684a6b7..7c80320 100644
--- a/src/app/components/LRCPlayer.tsx
+++ b/src/app/components/LRCPlayer.tsx
@@ -1,49 +1,6 @@
 import React, { CSSProperties, useCallback } from "react";
-import styled, { css } from "styled-components";
 import { Lrc, LrcLine } from "react-lrc";
-
-interface LineProps {
-    $active: boolean;
-    $next: boolean;
-    $animate: boolean;
-    $lrcColor: string;
-    $fontColor: string;
-}
-
-const Line = styled.div<LineProps>`
-    min-height: 10px;
-    padding: 14px 30px;
-
-    font-size: 40px;
-    font-family: "Roboto", sans-serif;
-    font-weight: 500;
-    text-align: center;
-    color: ${({ $fontColor }) => $fontColor};
-
-    background: ${({ $lrcColor }) => `linear-gradient(
-        to right,
-        rgba(0, 0, 0, 0) 50%,
-        ${$lrcColor} 50%
-    )`};
-    background-size: 200% 100%;
-    background-position: right bottom;
-
-    ${({ $animate }) =>
-        $animate &&
-        css`
-            transition:
-                color 0.3s ease,
-                background-position 0.5s ease;
-        `}
-
-    ${({ $active }) =>
-        $active &&
-        css`
-            color: rgb(50, 50, 50);
-            font-weight: 700;
-            background-position: left bottom;
-        `}
-`;
+import { Line } from "./LRCPlayer.styles";
 
 const lrcStyle: CSSProperties = {
     flex: 1,