Merge branch 'vatsalsinghkv:main' into main

kushchoudhary98 · Oct 5, 2023 · 797aedf · 797aedf
2 parents 0eff18f + a2c6984
commit 797aedf
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 19 deletions.
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="dark">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

diff --git a/package.json b/package.json
@@ -25,7 +25,8 @@
   "dependencies": {
     "eslint-plugin-vitest": "^0.3.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.11.0"
   },
   "devDependencies": {
     "@iconify-icon/react": "^1.0.8",

diff --git a/src/components/Issue.jsx b/src/components/Issue.jsx
@@ -1,8 +1,7 @@
-import { Icon } from '@iconify-icon/react';
-
+import Label from '@/components/Label';
 import useFetch from '@/lib/hooks/use-fetch';
 import { convertToK, timeSince } from '@/lib/utils/helper';
-import Label from '@/components/Label';
+import { Icon } from '@iconify-icon/react';
 
 const Issue = ({ title, url, labels, repoUrl, date }) => {
   const { data } = useFetch(repoUrl);
@@ -14,7 +13,7 @@ const Issue = ({ title, url, labels, repoUrl, date }) => {
       target='_blank'
       rel='noreferrer'
     >
-      <div className='flex flex-wrap justify-between gap-1 mb-1 font-mono text-xs transition-all text-slate-400 group-hover:text-dark-1 group-focus:text-dark-1'>
+      <div className='flex flex-wrap justify-between gap-1 mb-1 font-mono text-xs transition-all text-slate-400  dark:text-slate-500 group-hover:text-dark-1 group-focus:text-dark-1'>
         {data && (
           <p className='flex gap-2.5 flex-wrap font-medium'>{data.full_name}</p>
         )}

diff --git a/src/components/Logo.jsx b/src/components/Logo.jsx
@@ -1,15 +1,42 @@
+import { useEffect, useState } from 'react';
+import { HiMoon, HiSun } from 'react-icons/hi';
+
 const Logo = ({ title, classNme }) => {
   const [first, ...rest] = title.split(' ');
 
+  const [theme, setTheme] = useState('dark');
+
+  useEffect(() => {
+    if (theme === 'dark') {
+      document.documentElement.classList.remove('dark');
+    } else {
+      document.documentElement.classList.add('dark');
+    }
+  }, [theme]);
+
+  const handleTheme = () => {
+    setTheme(theme === 'dark' ? 'light' : 'dark');
+  };
+
   return (
-    <h1
-      className={`text-3xl font-light leading-relaxed sm:text-4xl ${classNme}`}
-    >
-      <a href='/'>
-        <span className='font-sans font-medium text-dark-1'>{first}</span>{' '}
-        <span className='font-mono text-accent'>{rest.join(' ')}</span>
-      </a>
-    </h1>
+    <div className='flex justify-evenly w-full'>
+      <h1
+        className={`text-3xl font-light leading-relaxed sm:text-4xl ${classNme} w-[90vh] max-sm:max-sm:translate-x-3`}
+      >
+        <a href='/'>
+          <span className='font-sans font-medium text-dark-1'>{first}</span>{' '}
+          <span className='font-mono text-accent'>{rest.join(' ')}</span>
+        </a>
+      </h1>
+
+      <button onClick={handleTheme} className=' w-[10vh] max-sm:translate-x-6'>
+        {theme === 'dark' ? (
+          <HiSun className='text-3xl ' />
+        ) : (
+          <HiMoon className='text-3xl ' />
+        )}
+      </button>
+    </div>
   );
 };
 

diff --git a/src/index.css b/src/index.css
@@ -3,21 +3,22 @@
 @tailwind utilities;
 
 @layer base {
+
   /* Color variables for future use */
   :root {
     /* --color-bg: #fcfaf8; */
     /* --color-accent: #00ffd5; */
     /* --color-accent-light: rgba(0, 255, 213, 0.2); */
-    /* --color-accent: ##64ffda; */
-    /* --color-accent: #61dafb); */
+    /* --color-accent: #64ffda; */
+    /* --color-accent: #61dafb; */
     /* --color-text: #383838; */
     /* --color-dark-2: #282828; */
     /* --color-dark-3: #a2a2a2; */
 
-    --color-bg: theme(colors.slate.900);
-    --color-bg-secondary: theme(colors.slate.800/0.6);
     /* --color-accent: theme(colors.teal.300);
     --color-accent-light: theme(colors.teal.400/0.2); */
+    --color-bg: theme(colors.slate.900);
+    --color-bg-secondary: theme(colors.slate.800/0.6);
     --color-accent: #00ffd5;
     --color-accent-light: rgba(0, 255, 213, 0.2);
     --color-text: theme(colors.slate.300);
@@ -26,6 +27,17 @@
     --color-dark-3: theme(colors.slate.700);
   }
 
+  .dark {
+    --color-bg: #fcfaf8;
+    --color-bg-secondary: theme(colors.zinc.200/0.6);
+    --color-accent: theme(colors.emerald.600);
+    --color-accent-light: theme(colors.teal.400/0.2);
+    --color-text: theme(colors.slate.500);
+    --color-dark-1: theme(colors.slate.500);
+    --color-dark-2: #282828;
+    --color-dark-3: #a2a2a2;
+  }
+
   * {
     @apply focus:outline-none outline-[3px] outline-offset-4 outline-accent;
   }
@@ -38,4 +50,4 @@
 /* Typography */
 .heading-tertiary {
   @apply text-sm font-bold uppercase text-dark-2;
-}
+}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  darkMode: "class",
   theme: {
     extend: {
       fontFamily: {

diff --git a/yarn.lock b/yarn.lock
@@ -2982,6 +2982,11 @@ react-error-boundary@^3.1.0:
   dependencies:
     "@babel/runtime" "^7.12.5"
 
+react-icons@^4.11.0:
+  version "4.11.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.11.0.tgz#4b0e31c9bfc919608095cc429c4f1846f4d66c65"
+  integrity sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"