ManInDark/ReactHolidays
1
0
Fork 0
mirror of https://github.com/ManInDark/ReactHolidays.git synced 2026-01-20 22:24:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

added tailwind & heroicons, restyled page

Browse Source
This commit is contained in:
ManInDark
2024-11-01 21:02:00 +01:00
parent bc0b4ac4e2
commit 47c8420922
7 changed files with 1083 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@@ -2,12 +2,11 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Holiday List</title> <title>Holiday List</title>
</head> </head>
<body> <body class="dark:bg-gray-900 dark:text-white flex justify-center">
<div id="root"></div> <div class="container " id="root"></div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
</body> </body>
</html> </html>

1039
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@@ -10,6 +10,7 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@heroicons/react": "^2.1.5",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1" "react-dom": "^18.3.1"
}, },
@@ -18,10 +19,13 @@
"@types/react": "^18.3.3", "@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0", "@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.3.1", "@vitejs/plugin-react": "^4.3.1",
"autoprefixer": "^10.4.20",
"eslint": "^9.8.0", "eslint": "^9.8.0",
"eslint-plugin-react-hooks": "^5.1.0-rc.0", "eslint-plugin-react-hooks": "^5.1.0-rc.0",
"eslint-plugin-react-refresh": "^0.4.9", "eslint-plugin-react-refresh": "^0.4.9",
"globals": "^15.9.0", "globals": "^15.9.0",
"postcss": "^8.4.47",
"tailwindcss": "^3.4.14",
"typescript": "^5.5.3", "typescript": "^5.5.3",
"typescript-eslint": "^8.0.0", "typescript-eslint": "^8.0.0",
"vite": "^5.4.0" "vite": "^5.4.0"

6
postcss.config.js Normal file
View File

@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

38
src/CalendarApi.tsx
View File

@@ -1,3 +1,4 @@
import { ArrowLeftIcon, ArrowPathIcon, ArrowRightIcon } from '@heroicons/react/24/solid';
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
type Holiday = { "date": string, "localName": string, "countryCode": string, "fixed": string, "global": string, "types": string[] } type Holiday = { "date": string, "localName": string, "countryCode": string, "fixed": string, "global": string, "types": string[] }
@@ -7,10 +8,17 @@ async function getText(satYear: string): Promise<Holiday[]> {
} }
function ListHolidays() { function ListHolidays() {
const currentYear = new Date().getFullYear().toString();
const [loading, setLoading] = useState<boolean>(true); const [loading, setLoading] = useState<boolean>(true);
const [keys, setKeys] = useState<Holiday[]>([]); const [keys, setKeys] = useState<Holiday[]>([]);
const [year, setYear] = useState<string>("2024"); const [year, setYear] = useState<string>(currentYear);
const [satYear, setSatYear] = useState<string>("2024"); const [satYear, setSatYear] = useState<string>(currentYear);
function addYear(i: number): void {
const newyear: string = (parseInt(satYear) + i).toString();
setYear(newyear);
setSatYear(newyear);
}
useEffect(() => { useEffect(() => {
getText(satYear).then((value) => { getText(satYear).then((value) => {
@@ -18,26 +26,25 @@ function ListHolidays() {
setLoading(false); setLoading(false);
}); });
}, [satYear]) }, [satYear])
return <> return <div className="flex flex-col gap-3 m-5">
<div> <div className="flex justify-center">
<div>
{loading ? {loading ?
<>Loading ...</> <>Loading ...</>
: :
<table> <table className="border-collapse border-black border-2">
<thead> <thead>
<tr> <tr className="bg-gray-200 dark:bg-gray-800">
<th>Date</th> <th>Date</th>
<th>Name</th> <th>Name</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{keys.map((holiday) => {keys.map((holiday) =>
<tr key={holiday.date + "-" + holiday.localName}> <tr key={holiday.date + "-" + holiday.localName} className="odd:bg-gray-100 even:bg-gray-200 dark:odd:bg-gray-700 dark:even:bg-gray-800">
<td> <td className="p-1 px-3 text-right">
{holiday.date} {new Date(holiday.date).toLocaleDateString()}
</td> </td>
<td> <td className="p-1 px-3">
{holiday.localName} {holiday.localName}
</td> </td>
</tr> </tr>
@@ -46,12 +53,13 @@ function ListHolidays() {
</table> </table>
} }
</div> </div>
<div> <div className="flex justify-center">
<input type="number" value={year} onChange={(e) => { setYear(e.target.value) }} /> <ArrowLeftIcon className='icon' onClick={() => addYear(-1)} />
<input type="submit" onClick={() => { setSatYear(year) }} /> <input className="text-black text-right border-black border-2" type="number" value={year} onChange={(e) => { setYear(e.target.value) }} />
<ArrowPathIcon className='icon' onClick={() => setSatYear(year)} />
<ArrowRightIcon className='icon' onClick={() => addYear(1)} />
</div> </div>
</div> </div>
</>
} }
export default ListHolidays; export default ListHolidays;

54
src/main.css
View File

@@ -1,51 +1,7 @@
@media (prefers-color-scheme: light) { @tailwind base;
:root { @tailwind components;
--textcolor: black; @tailwind utilities;
--backgroundcolor: white;
--color-one: lightgray;
--color-two: darkgray;
}
}
@media (prefers-color-scheme: dark) { .icon {
:root { @apply size-5 hover:text-gray-500 transition-all duration-200 m-2;
--textcolor: white;
--backgroundcolor: black;
--color-one: gray;
--color-two: dimgray;
}
}
html {
background-color: var(--backgroundcolor);
}
#root>div {
margin: auto;
width: fit-content;
}
#root>div>div {
margin: 8px;
}
table {
color: var(--textcolor);
border: var(--textcolor) solid 2px;
border-collapse: collapse;
}
th,
td {
padding: 4px;
border: black solid 1px;
}
tbody>tr:nth-child(even),
table>thead>tr {
background-color: var(--color-one);
}
tbody>tr:nth-child(odd) {
background-color: var(--color-two);
} }

11
tailwind.config.js Normal file
View File

@@ -0,0 +1,11 @@
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}