theme (#7)

* update * update * update * update
thebaodev · Nov 14, 2022 · a52b355 · a52b355
1 parent 2c6b818
commit a52b355
Show file tree

Hide file tree

Showing 10 changed files with 305 additions and 76 deletions.
diff --git a/app/assets/images/logo.png b/app/assets/images/logo.png
diff --git a/app/components/ThemeSwitcher.tsx b/app/components/ThemeSwitcher.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { THEMES } from '~/constant';
+import { BeakerIcon } from '@heroicons/react/24/outline';
+
+const ThemeSwitcher = () => {
+	return (
+		<div className="fixed top-2 right-2 dropdown dropdown-end">
+      <label
+        tabIndex={0}
+        className="btn btn-ghost rounded-btn flex items-center px-2 rounded-sm"
+      >
+				<span className="flex items-end">
+					<BeakerIcon className="h-6 w-6 text-base-content" />
+				</span>
+      </label>
+			<ul
+				tabIndex={0}
+				className="dropdown-content menu text-base-content rounded-t-box rounded-b-box top-px max-h-96 h-[70vh] w-28 overflow-y-auto mt-12 z-50"
+			>
+				<div className="grid grid-cols-1 gap-2 p-3">
+					{THEMES.map(theme => {
+						return (
+							<div
+								key={theme.value}
+								className="outline-base-content overflow-hidden rounded-sm outline outline-2 outline-offset-2"
+								data-set-theme={theme.value}
+								data-act-class="outline"
+							>
+								<div
+									data-theme={theme.value}
+									className="bg-base-100/10 w-full cursor-pointer"
+								>
+									<div className="grid grid-cols-5 grid-rows-3">
+										<div className="col-span-5 row-span-3 row-start-1 flex justify-center gap-1 py-3 px-4">
+											<div className="flex flex-shrink-0 flex-wrap gap-1 min-h-6">
+												<div className="bg-primary w-2 rounded" />
+												<div className="bg-secondary w-2 rounded" />
+												<div className="bg-accent w-2 rounded" />
+												<div className="bg-neutral w-2 rounded" />
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						);
+					})}
+				</div>
+			</ul>
+		</div>
+	);
+};
+
+export default ThemeSwitcher;
diff --git a/app/components/TypeTester.tsx b/app/components/TypeTester.tsx
@@ -23,56 +23,67 @@ const TypeTester = forwardRef<HTMLDivElement, TypeTesterProps>(
 	(
 		{
 			words = [
-				'hello',
-				'world',
-				'this',
-				'hello',
-				'is',
-				'a',
-				'test',
-				'of',
-				'the',
-				'lorem',
-				'ipsum',
-				'dolor',
-				'sit',
-				'amet',
-				'consectetur',
-				'adipiscing',
-				'elit',
-				'sed',
-				'do',
-				'eiusmod',
-				'tempor',
-				'incididunt',
-				'ut',
-				'consectetur',
-				'adipiscing',
-				'elit',
-				'sed',
-				'do',
-				'eiusmod',
-				'tempor',
-				'incididunt',
-				'ut',
-				'consectetur',
-				'adipiscing',
-				'elit',
-				'sed',
-				'do',
-				'eiusmod',
-				'tempor',
-				'incididunt',
-				'ut',
-				'consectetur',
-				'adipiscing',
-				'elit',
-				'sed',
-				'do',
-				'eiusmod',
-				'tempor',
-				'incididunt',
-				'ut',
+				'infuse',
+				'your',
+				'life',
+				'with',
+				'action',
+				"don't",
+				'wait',
+				'for',
+				'it',
+				'to',
+				'happen',
+				'make',
+				'it',
+				'happen',
+				'make',
+				'your',
+				'own',
+				'future',
+				'make',
+				'your',
+				'own',
+				'hope',
+				'make',
+				'your',
+				'own',
+				'love',
+				'and',
+				'whatever',
+				'your',
+				'beliefs',
+				'honor',
+				'your',
+				'creator',
+				'not',
+				'passively',
+				'waiting',
+				'for',
+				'grace',
+				'to',
+				'come',
+				'down',
+				'from',
+				'upon',
+				'high',
+				'but',
+				'by',
+				'doing',
+				'what',
+				'you',
+				'can',
+				'to',
+				'make',
+				'grace',
+				'happen',
+				'yourself',
+				'right',
+				'now',
+				'right',
+				'down',
+				'here',
+				'on earth',
 			],
 			options = {
 				fontSize: 56,
@@ -235,7 +246,7 @@ const TypeTester = forwardRef<HTMLDivElement, TypeTesterProps>(
 						if (!isStart) {
 							start();
 						}
-						if (typed.length >= words[activeIndex].length + options.extraLimit)
+						if (typed.length >= words[activeIndex]?.length + options.extraLimit)
 							return;
 						setTyped(typed + e.key);
 				}
@@ -270,10 +281,10 @@ const TypeTester = forwardRef<HTMLDivElement, TypeTesterProps>(
 		const filteredWords = words?.slice(hiddenIndexes.length, words?.length);
 		return (
 			<div
-				className="w-2/3 flex flex-col flex-wrap items-start justify-center font-mono"
+				className="max-w-screen-lg w-full p-6 md:p-8 lg:p-12 flex flex-col flex-wrap items-start justify-center font-mono"
 				ref={ref}
 			>
-				<div className="text-3xl text-orange-500 px-2">{timer}</div>
+				<div className="text-3xl text-primary px-2">{timer}</div>
 				<div
 					ref={typeViewRef}
 					className={clsx(
@@ -301,7 +312,7 @@ const TypeTester = forwardRef<HTMLDivElement, TypeTesterProps>(
 									<span
 										ref={caretRef}
 										className={clsx(
-											'caret absolute top-0 h-full flex bg-orange-400 w-1 rounded-lg -translate-x-[1px]',
+											'caret absolute top-0 h-full flex bg-accent w-1 rounded-lg -translate-x-[1px]',
 											{
 												'animate-blink': !isFocus,
 												'-left-4': caretDirectionRef.current === 'forward',
@@ -327,11 +338,11 @@ const TypeTester = forwardRef<HTMLDivElement, TypeTesterProps>(
 										<span
 											key={char + charIndex}
 											className={clsx('char transition-all duration-600 ease', {
-												'text-gray-500': !isTypedChar,
+												'text-base-300': !isTypedChar,
 												'underline underline-offset-8 decoration-orange-200':
 													isSkippedChar,
-												'text-green-500': isTypedChar && isCorrect,
-												'text-red-500': isTypedChar && !isCorrect,
+												'text-success': isTypedChar && isCorrect,
+												'text-error ': isTypedChar && !isCorrect,
 											})}
 										>
 											{char}

diff --git a/app/constant.ts b/app/constant.ts
@@ -13,3 +13,115 @@ export const KEYCODES = {
 export const SHORTCUTS = {
 	restart: 'ctrl+enter',
 };
+
+export const THEMES = [
+	{
+		name: 'light',
+		value: 'lofi',
+	},
+	{
+		name: 'dark',
+		value: 'black',
+	},
+	{
+		name: 'cupcake',
+		value: 'cupcake',
+	},
+	{
+		name: 'bumblebee',
+		value: 'bumblebee',
+	},
+	{
+		name: 'emerald',
+		value: 'emerald',
+	},
+	{
+		name: 'corporate',
+		value: 'corporate',
+	},
+	{
+		name: 'synthwave',
+		value: 'synthwave',
+	},
+	{
+		name: 'retro',
+		value: 'retro',
+	},
+	{
+		name: 'cyberpunk',
+		value: 'cyberpunk',
+	},
+	{
+		name: 'valentine',
+		value: 'valentine',
+	},
+	{
+		name: 'halloween',
+		value: 'halloween',
+	},
+	{
+		name: 'garden',
+		value: 'garden',
+	},
+	{
+		name: 'forest',
+		value: 'forest',
+	},
+	{
+		name: 'aqua',
+		value: 'aqua',
+	},
+
+	{
+		name: 'pastel',
+		value: 'pastel',
+	},
+	{
+		name: 'fantasy',
+		value: 'fantasy',
+	},
+	{
+		name: 'wireframe',
+		value: 'wireframe',
+	},
+	{
+		name: 'luxury',
+		value: 'luxury',
+	},
+	{
+		name: 'dracula',
+		value: 'dracula',
+	},
+	{
+		name: 'cmyk',
+		value: 'cmyk',
+	},
+	{
+		name: 'autumn',
+		value: 'autumn',
+	},
+	{
+		name: 'business',
+		value: 'business',
+	},
+	{
+		name: 'acid',
+		value: 'acid',
+	},
+	{
+		name: 'lemonade',
+		value: 'lemonade',
+	},
+	{
+		name: 'night',
+		value: 'night',
+	},
+	{
+		name: 'coffee',
+		value: 'coffee',
+	},
+	{
+		name: ' winter',
+		value: 'winter',
+	},
+];
diff --git a/app/root.tsx b/app/root.tsx
@@ -7,6 +7,8 @@ import {
 	Scripts,
 	ScrollRestoration,
 } from '@remix-run/react';
+import { useEffect } from 'react';
+import { themeChange } from 'theme-change';
 import stylesheet from 'public/styles/app.css';
 
 export const meta: MetaFunction = () => ({
@@ -17,11 +19,16 @@ export const meta: MetaFunction = () => ({
 
 export const links: LinksFunction = () => [
 	{ rel: 'stylesheet', href: stylesheet },
+	{ type: 'image/png', rel: 'icon', href: '/favicon.png' },
 ];
 
 export default function App() {
+	useEffect(() => {
+		themeChange(false);
+	}, []);
+
 	return (
-		<html lang="en">
+		<html lang="en" data-theme="lofi">
 			<head>
 				<Meta />
 				<Links />