Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

theme #7

Merged
merged 4 commits into from
Nov 14, 2022
Merged

theme #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d97cf22
update
Nov 14, 2022
30cd391
update
Nov 14, 2022
5ad29a3
update
Nov 14, 2022
e69ed75
update
Nov 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added app/assets/images/logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
53 changes: 53 additions & 0 deletions app/components/ThemeSwitcher.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
125 changes: 68 additions & 57 deletions app/components/TypeTester.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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',
Expand All @@ -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}
Expand Down
112 changes: 112 additions & 0 deletions app/constant.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
];
9 changes: 8 additions & 1 deletion app/root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => ({
Expand All @@ -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 />
Expand Down
Loading