-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
🦄 refactor(prettier): auto format
- Loading branch information
1 parent
bcdfd2c
commit ebb4dc3
Showing
17 changed files
with
453 additions
and
358 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,38 +1,39 @@ | ||
| import { useState, useEffect } from 'react' | ||
| import { useTheme } from 'next-themes' | ||
| import { SunIcon } from '@components/icons/SunIcon'; | ||
| import { MoonIcon } from '@components/icons/MoonIcon'; | ||
| import { useState, useEffect } from "react"; | ||
| import { useTheme } from "next-themes"; | ||
| import { SunIcon } from "@components/icons/SunIcon"; | ||
| import { MoonIcon } from "@components/icons/MoonIcon"; | ||
|
|
||
| export default function ThemeSwitch() { | ||
| const [mounted, setMounted] = useState(false); | ||
| const { theme, setTheme } = useTheme(); | ||
| const [mounted, setMounted] = useState(false); | ||
| const { theme, setTheme } = useTheme(); | ||
|
|
||
| // useEffect only runs on the client, so now we can safely show the UI | ||
| useEffect(() => { | ||
| setMounted(true) | ||
| }, []) | ||
| // useEffect only runs on the client, so now we can safely show the UI | ||
| useEffect(() => { | ||
| setMounted(true); | ||
| }, []); | ||
|
|
||
| if (!mounted) { | ||
| return null | ||
| } | ||
| if (!mounted) { | ||
| return null; | ||
| } | ||
|
|
||
| function switchTheme() { | ||
| if (theme === 'light') { | ||
| setTheme('dark'); | ||
| } else { | ||
| setTheme('light'); | ||
| } | ||
| function switchTheme() { | ||
| if (theme === "light") { | ||
| setTheme("dark"); | ||
| } else { | ||
| setTheme("light"); | ||
| } | ||
| } | ||
|
|
||
| return ( | ||
|
|
||
| <button onClick={switchTheme} className="w-fit h-fit text-black dark:text-white ml-3 mt-3" > | ||
| {theme === "light" | ||
| ? | ||
| <SunIcon className='w-5 h-5' /> | ||
| : | ||
| <MoonIcon className='w-5 h-5 dark:text-coolGray-390' /> | ||
| } | ||
| </button> | ||
| ); | ||
| } | ||
| return ( | ||
| <button | ||
| onClick={switchTheme} | ||
| className="ml-3 mt-3 h-fit w-fit text-black dark:text-white" | ||
| > | ||
| {theme === "light" ? ( | ||
| <SunIcon className="h-5 w-5" /> | ||
| ) : ( | ||
| <MoonIcon className="dark:text-coolGray-390 h-5 w-5" /> | ||
| )} | ||
| </button> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,41 +1,40 @@ | ||
| interface Props { | ||
| num: string | number; | ||
| unit: string; | ||
| }; | ||
|
|
||
| num: string | number; | ||
| unit: string; | ||
| } | ||
|
|
||
| /** | ||
| * NumberBox component used for display numbers in the countdown | ||
| * @param {string | number} num The number you wish to be displayed | ||
| * @param {string} unit The unit you wish to be displayed. Can fx. be "Days". | ||
| * | ||
| * | ||
| * ```js | ||
| * // Can be used like this: | ||
| * <NumberBox num={24} unit="Days"/> | ||
| * ``` | ||
| */ | ||
| export default function NumberBox(props: Props) { | ||
| return ( | ||
| <div className="flex flex-col items-center mt-4 px-2"> | ||
| <div className=" relative bg-transparent flex flex-col items-center justify-center rounded-lg w-32 h-32 text-2xl md:text-4xl mt-4 "> | ||
| <div className="rounded-t-lg rounded-b-lg bg-[#343650] w-full h-full" /> | ||
|
|
||
| <div className={`text-5xl absolute text-rose-500 z-10 font-bold font-redhat md:text-7xl font-mono`}> | ||
| {props.num} | ||
| </div> | ||
| return ( | ||
| <div className="mt-4 flex flex-col items-center px-2"> | ||
| <div className=" relative mt-4 flex h-32 w-32 flex-col items-center justify-center rounded-lg bg-transparent text-2xl md:text-4xl "> | ||
| <div className="h-full w-full rounded-b-lg rounded-t-lg bg-[#343650]" /> | ||
|
|
||
| <div className=" rounded-b-lg rounded-t-lg bg-[#2c2e3f] w-full h-full" /> | ||
| <div | ||
| className={`font-mono absolute z-10 font-redhat text-5xl font-bold text-rose-500 md:text-7xl`} | ||
| > | ||
| {props.num} | ||
| </div> | ||
|
|
||
| <div className={`absolute w-full h-1/2 top-0 rounded-t-lg z-5`} /> | ||
| {/* Two Small Dots */} | ||
| <div className="absolute -right-1 top-[60px] rounded-full w-[12px] h-[12px] bg-[#1e1f29]" /> | ||
| <div className="absolute -left-1 top-[60px] rounded-full w-[12px] h-[12px] bg-[#1e1f29]" /> | ||
| <div className=" h-full w-full rounded-b-lg rounded-t-lg bg-[#2c2e3f]" /> | ||
|
|
||
| </div> | ||
| <p className="text-lg mt-3 font-semibold text-black dark:text-rose-200 md:text-2xl "> | ||
| {props.unit} | ||
| </p> | ||
| </div> | ||
| ); | ||
| <div className={`z-5 absolute top-0 h-1/2 w-full rounded-t-lg`} /> | ||
| {/* Two Small Dots */} | ||
| <div className="absolute -right-1 top-[60px] h-[12px] w-[12px] rounded-full bg-[#1e1f29]" /> | ||
| <div className="absolute -left-1 top-[60px] h-[12px] w-[12px] rounded-full bg-[#1e1f29]" /> | ||
| </div> | ||
| <p className="mt-3 text-lg font-semibold text-black dark:text-rose-200 md:text-2xl "> | ||
| {props.unit} | ||
| </p> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
Oops, something went wrong.