Format code with prettier

.prettierrc.json

@@ -1,6 +1,6 @@
 {
-    "trailingComma": "all",
-    "tabWidth": 2,
-    "semi": false,
-    "singleQuote": true
-}
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true
+}

README.md

@@ -2,35 +2,34 @@
 
 ![](./svgwavecover.png)
 
-
-----
+---
 
 SVG Wave is a **tiny, free and beautiful gradient SVG waves generator** for your UI or website desgin. It offers dead simple UI to customize, and style your waves based on your theme specifications.
 
 SVG Wave is a tiny UI tool built with **Preact, tailwind and bundled with Webpack**. ⚛
 
 ---
 
-
 ### 💡 Update 1 - Added animation support, enable animation by simple click and export as SVG.
+
 ### 💡 Update 2 ! - New Gradient Wave Support 🌈
 
 ### Features
 
- - Adjust number of layers of waves 🏢
- - Modify the number of crest and trough ➰
- - Change Colors of waves 🎨
- - Export as SVG or PNG ⬇
- - Randomize 🔁
- - New cool Dark mode 🖤
- - Gradient fill to waves 🌈
- - Added Animations
- - Coming soon...
-
+- Adjust number of layers of waves 🏢
+- Modify the number of crest and trough ➰
+- Change Colors of waves 🎨
+- Export as SVG or PNG ⬇
+- Randomize 🔁
+- New cool Dark mode 🖤
+- Gradient fill to waves 🌈
+- Added Animations
+- Coming soon...
 
 ---
 
 ### App ⭐
+
 ![](updated_svg_wave.png)
 ![](bg.png)
 

postcss.config.js

@@ -1,3 +1,3 @@
-module.exports = {
-  plugins: [require('tailwindcss'), require('autoprefixer')],
-}
+module.exports = {
+  plugins: [require('tailwindcss'), require('autoprefixer')],
+}

src/App.jsx

@@ -1,21 +1,21 @@
-import { h } from 'preact'
-import Home from './components/home'
-import { useDarkMode } from './stores/useDarkMode'
-import './styles/main.css'
-
-function App() {
-  const { theme, setTheme } = useDarkMode(({ theme, setTheme }) => ({
-    theme,
-    setTheme,
-  }))
-
-  const currentTheme = theme === 'dark' ? true : false
-
-  return (
-    <div className={`main-container ${currentTheme && 'dark-mode'}`}>
-      <Home isDark={currentTheme} toggleDarkMode={setTheme} />
-    </div>
-  )
-}
-
-export default App
+import { h } from 'preact'
+import Home from './components/home'
+import { useDarkMode } from './stores/useDarkMode'
+import './styles/main.css'
+
+function App() {
+  const { theme, setTheme } = useDarkMode(({ theme, setTheme }) => ({
+    theme,
+    setTheme,
+  }))
+
+  const currentTheme = theme === 'dark' ? true : false
+
+  return (
+    <div className={`main-container ${currentTheme && 'dark-mode'}`}>
+      <Home isDark={currentTheme} toggleDarkMode={setTheme} />
+    </div>
+  )
+}
+
+export default App

src/components/alerts.jsx

@@ -1,4 +1,4 @@
-import { h } from 'preact';
+import { h } from 'preact'
 
 function Alert({ content, color }) {
   return (

src/components/canvas.jsx

@@ -1,32 +1,31 @@
-import { h } from 'preact';
-import { useRef } from 'preact/hooks'
-import SVGCode from './svgCode'
-
-function Canvas({ svg, invert }) {
-
-  return (
-    <div className="relative z-10 w-4/5 overflow-hidden bg-white sm:shadow-lg sm:rounded-md sm:m-5 sm:w-7/10 md:w-3/5 h-1/5 sm:h-4/5 dark:bg-darkish-black dark:text-white">
-      {!invert ?
-      <div className=".fade-in">
-        <h1 className="absolute top-0 hidden w-full p-6 font-sans text-4xl font-extrabold text-center opacity-75 sm:block">
-            Generate SVG Waves 🌊
-        </h1>
-        <div className="absolute bottom-0 w-full transition-all duration-300 ease-in-out delay-150">
-          {svg}
-        </div>
-      </div>
-      :
-      <div className=".fade-in">
-        <div className="absolute top-0 w-full transition-all duration-300 ease-in-out delay-150">
-          {svg}
-        </div>
-        <h1 className="absolute bottom-0 hidden w-full p-6 font-sans text-4xl font-extrabold text-center opacity-75 sm:block">
-          Generate SVG Waves 🌊
-        </h1>
-      </div>
-      }
-    </div>
-  )
-}
-
-export default Canvas
+import { h } from 'preact'
+import { useRef } from 'preact/hooks'
+import SVGCode from './svgCode'
+
+function Canvas({ svg, invert }) {
+  return (
+    <div className="relative z-10 w-4/5 overflow-hidden bg-white sm:shadow-lg sm:rounded-md sm:m-5 sm:w-7/10 md:w-3/5 h-1/5 sm:h-4/5 dark:bg-darkish-black dark:text-white">
+      {!invert ? (
+        <div className=".fade-in">
+          <h1 className="absolute top-0 hidden w-full p-6 font-sans text-4xl font-extrabold text-center opacity-75 sm:block">
+            Generate SVG Waves 🌊
+          </h1>
+          <div className="absolute bottom-0 w-full transition-all duration-300 ease-in-out delay-150">
+            {svg}
+          </div>
+        </div>
+      ) : (
+        <div className=".fade-in">
+          <div className="absolute top-0 w-full transition-all duration-300 ease-in-out delay-150">
+            {svg}
+          </div>
+          <h1 className="absolute bottom-0 hidden w-full p-6 font-sans text-4xl font-extrabold text-center opacity-75 sm:block">
+            Generate SVG Waves 🌊
+          </h1>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Canvas