From a4e64b250693369dc9bbc98dbab6b6b74c253f5c Mon Sep 17 00:00:00 2001
From: Theodorus Clarence <theodorusclarence@gmail.com>
Date: Sat, 5 Feb 2022 20:06:18 +0700
Subject: [PATCH] feat: add customizable gradient

---
 src/components/Accent.tsx        | 2 +-
 src/components/layout/Layout.tsx | 2 +-
 src/pages/_app.tsx               | 5 ++++-
 src/pages/index.tsx              | 2 +-
 src/styles/globals.css           | 6 ++++++
 5 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/Accent.tsx b/src/components/Accent.tsx
index 0548993..516c20a 100644
--- a/src/components/Accent.tsx
+++ b/src/components/Accent.tsx
@@ -9,7 +9,7 @@ export default function Accent({ children, className }: AccentType) {
     <span
       className={clsxm(
         'transition-colors',
-        'bg-gradient-to-tr from-emerald-400 to-amber-400 bg-clip-text text-transparent',
+        'accent-gradient bg-gradient-to-tr bg-clip-text text-transparent',
         className
       )}
     >
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index cab38a6..06456a5 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -2,5 +2,5 @@ import * as React from 'react';
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   // Put Header or Footer Here
-  return <>{children}</>;
+  return <div className='default'>{children}</div>;
 }
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 4408d36..03ce5e1 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -7,6 +7,7 @@ import '@/styles/globals.css';
 import axiosClient from '@/lib/axios';
 
 import DismissableToast from '@/components/DismissableToast';
+import Layout from '@/components/layout/Layout';
 
 const defaultQueryFn = async ({ queryKey }: QueryOptions) => {
   const { data } = await axiosClient.get(`${queryKey?.[0]}`);
@@ -25,7 +26,9 @@ function MyApp({ Component, pageProps }: AppProps) {
   return (
     <QueryClientProvider client={queryClient}>
       <DismissableToast />
-      <Component {...pageProps} />
+      <Layout>
+        <Component {...pageProps} />
+      </Layout>
       <ReactQueryDevtools initialIsOpen={false} position='bottom-right' />
     </QueryClientProvider>
   );
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 73596c4..159d8ae 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -31,7 +31,7 @@ export default function IndexPage({
                     className={clsx(
                       'opacity-0 group-hover:opacity-100',
                       'absolute -inset-0.5 z-0 animate-tilt rounded blur',
-                      'bg-gradient-to-r from-emerald-400 to-amber-400',
+                      'accent-gradient bg-gradient-to-r',
                       'transition duration-300 group-hover:duration-200',
                       'pointer-events-none'
                     )}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 26078e6..79d60f2 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -112,3 +112,9 @@
     background-size: 0 2px, 100% 2px;
   }
 }
+
+/* #region  /**=========== Default Theme =========== */
+.default .accent-gradient {
+  @apply from-emerald-400 to-amber-400;
+}
+/* #endregion  /**======== Default Theme =========== */