1 files changed, 1 insertions, 44 deletions
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,