Skip to content

Commit

Permalink
Introduce Theme
Browse files Browse the repository at this point in the history
  • Loading branch information
lucemans committed May 31, 2024
1 parent 4b13dd8 commit 2394c66
Show file tree
Hide file tree
Showing 6 changed files with 93 additions and 104 deletions.
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@
},
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1"
"react-dom": "^18.3.1",
"react-icons": "^5.2.1"
},
"devDependencies": {
"@testing-library/jest-dom": "^6.4.5",
Expand Down
12 changes: 12 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

77 changes: 10 additions & 67 deletions src/components/App.tsx
Original file line number Diff line number Diff line change
@@ -1,72 +1,15 @@
import logo from "assets/logo.svg";
import Avatar from "components/Avatar";
import { FiHeart } from "react-icons/fi";

const randoms = [
[1, 2],
[3, 4, 5],
[6, 7]
];

function App() {
export const App = () => {
return (
<div className="relative overflow-hidden bg-white">
<div className="h-screen sm:pb-40 sm:pt-24 lg:pb-48 lg:pt-40">
<div className="relative mx-auto max-w-7xl px-4 sm:static sm:px-6 lg:px-8">
<div className="sm:max-w-lg">
<div className="my-4">
<Avatar size="large" src={logo} />
</div>
<h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
Welcome!
</h1>
<p className="mt-4 text-xl text-gray-500">
This is a boilerplate build with Vite, React 18,
TypeScript, Vitest, Testing Library, TailwindCSS 3,
Eslint and Prettier.
</p>
</div>
<div>
<div className="my-10">
<a
href="vscode://"
className="inline-block rounded-md border border-transparent bg-indigo-600 px-8 py-3 text-center font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-700 focus:ring-offset-2"
>
Start building for free
</a>
<div
aria-hidden="true"
className="pointer-events-none mt-10 md:mt-0 lg:absolute lg:inset-y-0 lg:mx-auto lg:w-full lg:max-w-7xl"
>
<div className="absolute sm:left-1/2 sm:top-0 sm:translate-x-8 lg:left-1/2 lg:top-1/2 lg:-translate-y-1/2 lg:translate-x-8">
<div className="flex items-center space-x-6 lg:space-x-8">
{randoms.map((random, number) => (
<div
key={`random-${random[number]}`}
className="grid shrink-0 grid-cols-1 gap-y-6 lg:gap-y-8"
>
{random.map((number) => (
<div
key={`random-${number}`}
className="h-64 w-44 overflow-hidden rounded-lg sm:opacity-0 lg:opacity-100"
>
<img
src={`https://picsum.photos/600?random=${number}`}
alt=""
className="size-full bg-indigo-100 object-cover object-center"
/>
</div>
))}
</div>
))}
</div>
</div>
</div>
</div>
</div>
</div>
<div className="relative flex min-h-dvh flex-col items-center gap-4 overflow-hidden bg-background-secondary p-4">
<div className="w-full bg-background-primary">luc.eth</div>
<div className="h-fit rounded-xl border-border bg-background-primary p-4">
hi
</div>
<div className="flex items-center justify-center gap-2">
Built with <FiHeart /> by ur mom
</div>
</div>
);
}

export default App;
};
32 changes: 0 additions & 32 deletions src/components/test.tsx

This file was deleted.

6 changes: 3 additions & 3 deletions src/index.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import 'tailwindcss/tailwind.css';
import "tailwindcss/tailwind.css";

import App from 'components/App';
import { App } from "components/App";
import { createRoot } from "react-dom/client";

const container = document.querySelector('#root') as HTMLDivElement;
const container = document.querySelector("#root") as HTMLDivElement;
const root = createRoot(container);

root.render(<App />);
67 changes: 66 additions & 1 deletion tailwind.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,72 @@
export default {
content: ["./src/**/*.{mjs,js,ts,jsx,tsx}"],
theme: {
extend: {}
extend: {
colors: {
"blue-primary": "var(--thorin-blue-primary)",
"blue-active": "var(--thorin-blue-active)",
"blue-dim": "var(--thorin-blue-dim)",
"blue-bright": "var(--thorin-blue-bright)",
"blue-light": "var(--thorin-blue-light)",
"blue-surface": "var(--thorin-blue-surface)",
"indigo-primary": "var(--thorin-indigo-primary)",
"indigo-active": "var(--thorin-indigo-active)",
"indigo-dim": "var(--thorin-indigo-dim)",
"indigo-bright": "var(--thorin-indigo-bright)",
"indigo-light": "var(--thorin-indigo-light)",
"indigo-surface": "var(--thorin-indigo-surface)",
"purple-primary": "var(--thorin-purple-primary)",
"purple-active": "var(--thorin-purple-active)",
"purple-dim": "var(--thorin-purple-dim)",
"purple-bright": "var(--thorin-purple-bright)",
"purple-light": "var(--thorin-purple-light)",
"purple-surface": "var(--thorin-purple-surface)",
"pink-primary": "var(--thorin-pink-primary)",
"pink-active": "var(--thorin-pink-active)",
"pink-dim": "var(--thorin-pink-dim)",
"pink-bright": "var(--thorin-pink-bright)",
"pink-light": "var(--thorin-pink-light)",
"pink-surface": "var(--thorin-pink-surface)",
"red-primary": "var(--thorin-red-primary)",
"red-active": "var(--thorin-red-active)",
"red-dim": "var(--thorin-red-dim)",
"red-bright": "var(--thorin-red-bright)",
"red-light": "var(--thorin-red-light)",
"red-surface": "var(--thorin-red-surface)",
"orange-primary": "var(--thorin-orange-primary)",
"orange-active": "var(--thorin-orange-active)",
"orange-dim": "var(--thorin-orange-dim)",
"orange-bright": "var(--thorin-orange-bright)",
"orange-light": "var(--thorin-orange-light)",
"orange-surface": "var(--thorin-orange-surface)",
"yellow-primary": "var(--thorin-yellow-primary)",
"yellow-active": "var(--thorin-yellow-active)",
"yellow-dim": "var(--thorin-yellow-dim)",
"yellow-bright": "var(--thorin-yellow-bright)",
"yellow-light": "var(--thorin-yellow-light)",
"yellow-surface": "var(--thorin-yellow-surface)",
"green-primary": "var(--thorin-green-primary)",
"green-active": "var(--thorin-green-active)",
"green-dim": "var(--thorin-green-dim)",
"green-bright": "var(--thorin-green-bright)",
"green-light": "var(--thorin-green-light)",
"green-surface": "var(--thorin-green-surface)",
"grey-primary": "var(--thorin-grey-primary)",
"grey-active": "var(--thorin-grey-active)",
"grey-dim": "var(--thorin-grey-dim)",
"grey-bright": "var(--thorin-grey-bright)",
"grey-light": "var(--thorin-grey-light)",
"grey-surface": "var(--thorin-grey-surface)",
"text-primary": "var(--thorin-text-primary)",
"text-secondary": "var(--thorin-text-secondary)",
"text-accent": "var(--thorin-text-accent)",
"text-disabled": "var(--thorin-text-disabled)",
"background-primary": "var(--thorin-background-primary)",
"background-secondary": "var(--thorin-background-secondary)",
"background-disabled": "var(--thorin-background-disabled)",
border: "var(--thorin-border)"
}
}
},
plugins: []
};

0 comments on commit 2394c66

Please sign in to comment.