tailwind catppuccin plugin, theme switcher
This commit is contained in:
parent
50e2ec9cb3
commit
8b533fd99e
30
app/root.jsx
30
app/root.jsx
|
|
@ -6,6 +6,7 @@ import {
|
|||
Scripts,
|
||||
ScrollRestoration,
|
||||
} from "@remix-run/react";
|
||||
import { useState } from "react";
|
||||
|
||||
import styles from "./styles/app.css";
|
||||
|
||||
|
|
@ -20,13 +21,38 @@ export const meta = () => ({
|
|||
});
|
||||
|
||||
export default function App() {
|
||||
const [dark, setDark] = useState(true);
|
||||
|
||||
return (
|
||||
<html lang="en">
|
||||
<html className={`${dark ? "ctp-frappe" : "ctp-latte"}`} lang="en">
|
||||
<head>
|
||||
<Meta />
|
||||
<Links />
|
||||
</head>
|
||||
<body>
|
||||
<body className="bg-ctp-base text-ctp-text">
|
||||
<button onClick={() => setDark(!dark)} className="fixed bottom-0 m-2">
|
||||
{dark ? (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="32"
|
||||
height="32"
|
||||
fill="white"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="32"
|
||||
height="32"
|
||||
fill="black"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278zM4.858 1.311A7.269 7.269 0 0 0 1.025 7.71c0 4.02 3.279 7.276 7.319 7.276a7.316 7.316 0 0 0 5.205-2.162c-.337.042-.68.063-1.029.063-4.61 0-8.343-3.714-8.343-8.29 0-1.167.242-2.278.681-3.286z" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
<Outlet />
|
||||
<ScrollRestoration />
|
||||
<Scripts />
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ export default function Index() {
|
|||
|
||||
return (
|
||||
<div className="container mx-auto flex min-h-screen flex-col">
|
||||
<header className="flex w-full flex-col items-center justify-between rounded-b-2xl border-b bg-slate-50 px-12 py-4 text-center md:flex-row">
|
||||
<header className="flex w-full flex-col items-center justify-between space-y-4 rounded-b-2xl border-x border-b border-ctp-surface0 bg-gradient-to-r from-ctp-crust to-ctp-mantle px-12 py-4 text-center shadow-lg md:flex-row md:space-y-0">
|
||||
<h1 className="text-2xl tracking-tighter">Maakunta ranking</h1>
|
||||
{data.me ? (
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
|
|
@ -117,9 +117,9 @@ export default function Index() {
|
|||
<a
|
||||
href="https://osu.ppy.sh/oauth/authorize?client_id=20031&redirect_uri=http://localhost:3000/auth&response_type=code"
|
||||
referrerPolicy="noreferrer"
|
||||
className="rounded-full border bg-red-300 px-4 py-2 font-semibold shadow-lg hover:bg-red-400"
|
||||
className="rounded-full border border-ctp-surface0 bg-ctp-surface0 px-4 py-2 shadow-md shadow-ctp-overlay0 hover:bg-ctp-surface1 hover:shadow-ctp-overlay2"
|
||||
>
|
||||
Authenticate with OSU account
|
||||
Authenticate with osu! account
|
||||
</a>
|
||||
)}
|
||||
</header>
|
||||
|
|
@ -145,7 +145,7 @@ export default function Index() {
|
|||
</details>
|
||||
</label>
|
||||
<select
|
||||
className="rounded bg-white p-2 shadow"
|
||||
className="rounded bg-ctp-surface2 p-2 shadow"
|
||||
name="county"
|
||||
id="county"
|
||||
>
|
||||
|
|
@ -156,7 +156,7 @@ export default function Index() {
|
|||
))}
|
||||
</select>
|
||||
<button
|
||||
className="rounded-full px-4 py-2 shadow hover:shadow-xl"
|
||||
className="rounded-full border px-4 py-2 shadow shadow-ctp-overlay0 hover:shadow-xl"
|
||||
type="submit"
|
||||
>
|
||||
Submit
|
||||
|
|
@ -170,15 +170,15 @@ export default function Index() {
|
|||
<ul className="flex flex-grow flex-col items-center justify-center p-4 md:flex-row">
|
||||
{data.countyData.map((county) => (
|
||||
<li
|
||||
className="m-4 flex w-full max-w-md flex-col space-y-2 rounded border p-4 text-black shadow-lg"
|
||||
className="m-4 flex w-full max-w-md flex-col space-y-4 rounded border border-ctp-surface0 bg-gradient-to-t from-ctp-crust to-ctp-mantle p-6 shadow-lg shadow-ctp-surface0"
|
||||
key={county.id}
|
||||
>
|
||||
<h1 className="text-center text-4xl tracking-tighter">
|
||||
<h1 className="text-center text-4xl tracking-tighter text-ctp-subtext0">
|
||||
{county.name}
|
||||
</h1>
|
||||
<table className="w-full text-left">
|
||||
<table className="text-left">
|
||||
<thead>
|
||||
<tr className="border-b">
|
||||
<tr className="border-b border-ctp-surface2 text-ctp-subtext1">
|
||||
<th className="p-2">Player</th>
|
||||
<th className="p-2">Rank</th>
|
||||
</tr>
|
||||
|
|
@ -187,7 +187,7 @@ export default function Index() {
|
|||
{county.players.map((player) => (
|
||||
<tr
|
||||
key={player.id}
|
||||
className="border-b odd:bg-slate-50 even:bg-white"
|
||||
className="border-b border-ctp-surface2 odd:bg-ctp-surface0 even:bg-ctp-surface1"
|
||||
>
|
||||
<td className="p-2">{player.playerName}</td>
|
||||
<td className="p-2">#{player.rank}</td>
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@catppuccin/tailwindcss": "^0.1.1",
|
||||
"@remix-run/dev": "^1.10.1",
|
||||
"@remix-run/eslint-config": "^1.10.1",
|
||||
"concurrently": "^7.6.0",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
lockfileVersion: 5.4
|
||||
|
||||
specifiers:
|
||||
'@catppuccin/tailwindcss': ^0.1.1
|
||||
'@prisma/client': ^4.9.0
|
||||
'@remix-run/dev': ^1.10.1
|
||||
'@remix-run/eslint-config': ^1.10.1
|
||||
|
|
@ -27,6 +28,7 @@ dependencies:
|
|||
react-dom: 18.2.0_react@18.2.0
|
||||
|
||||
devDependencies:
|
||||
'@catppuccin/tailwindcss': 0.1.1
|
||||
'@remix-run/dev': 1.10.1_rihab5wqvvuqhydpoaq2xhpxeu
|
||||
'@remix-run/eslint-config': 1.10.1_eslint@8.32.0+react@18.2.0
|
||||
concurrently: 7.6.0
|
||||
|
|
@ -1356,6 +1358,19 @@ packages:
|
|||
to-fast-properties: 2.0.0
|
||||
dev: true
|
||||
|
||||
/@catppuccin/palette/0.1.5:
|
||||
resolution: {integrity: sha512-IQLsZwXDMpLc5CFGjIMa/gFnnFL/QLB280F11B51JweZHerZ/FgPXdIR4eQqn1CgrqI3wGfgnj1LVPx12DV/Uw==}
|
||||
dev: true
|
||||
|
||||
/@catppuccin/tailwindcss/0.1.1:
|
||||
resolution: {integrity: sha512-WWOzx8uOf3QPZ1HdVSkpgaqzMzrfYpOgAketQAQ7493eFhlYC4bJ1ViT5ukhwfhzuu3xnmke+Op2qjhHnyjt8g==}
|
||||
dependencies:
|
||||
'@catppuccin/palette': 0.1.5
|
||||
tailwindcss: 3.2.4
|
||||
transitivePeerDependencies:
|
||||
- ts-node
|
||||
dev: true
|
||||
|
||||
/@esbuild-plugins/node-modules-polyfill/0.1.4_esbuild@0.16.3:
|
||||
resolution: {integrity: sha512-uZbcXi0zbmKC/050p3gJnne5Qdzw8vkXIv+c2BW0Lsc1ji1SkrxbKPUy5Efr0blbTu1SL8w4eyfpnSdPg3G0Qg==}
|
||||
peerDependencies:
|
||||
|
|
|
|||
|
|
@ -1,8 +1,17 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ["./app/**/*.{js,ts,jsx,tsx}"],
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
plugins: [
|
||||
require("@catppuccin/tailwindcss")({
|
||||
// prefix to use, e.g. `text-pink` becomes `text-ctp-pink`.
|
||||
// default is `false`, which means no prefix
|
||||
prefix: "ctp",
|
||||
// which flavour of colours to use by default, in the `:root`
|
||||
defaultFlavour: "latte",
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue