fix: svg animation on system theme (#84)

* fix: svg animation on system theme

* chore: change prettier config

* chore: rename prettier config name

components/landing-svg/index.tsx

@@ -2,7 +2,8 @@ import { useTheme } from "next-themes";
 import { SVGProps, useEffect } from "react";
 
 const LandingSvg = (props: SVGProps<SVGSVGElement>) => {
-    const { theme } = useTheme();
+    const { theme, systemTheme } = useTheme();
+    const currentTheme = theme === "system" ? systemTheme : theme;
 
     useEffect(() => {
         const paths = document.querySelectorAll<SVGPathElement>("#landing-svg path");
@@ -16,13 +17,13 @@ const LandingSvg = (props: SVGProps<SVGSVGElement>) => {
             const delay = Math.random() * 50000;
 
             setTimeout(() => {
-                path.style.animation = `landing-svg-anim-${theme} 5s ease-in-out infinite`;
+                path.style.animation = `landing-svg-anim-${currentTheme} 5s ease-in-out infinite`;
                 path.style.strokeDashoffset = length;
             }, delay);
         }
 
         paths.forEach((path) => animatePath(path));
-    }, [theme]);
+    }, [currentTheme]);
 
     return (
         <svg viewBox="0 0 750 750" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>

prettier.config.js

@@ -0,0 +1,13 @@
+/** @type {import("prettier").Options} */
+const config = {
+    printWidth: 120,
+    trailingComma: "none",
+    importOrderSeparation: true,
+    importOrderSortSpecifiers: true,
+    importOrderCaseInsensitive: true,
+    importOrderParserPlugins: ["typescript", "jsx", "mdx"],
+    importOrder: ["^@/constants/(.*)$", "^@/stores/(.*)$", "^@/utils/(.*)$", "^@/components/(.*)$", "^[./]"],
+    plugins: [require.resolve("@trivago/prettier-plugin-sort-imports"), require.resolve("prettier-plugin-tailwindcss")]
+};
+
+export default config;