mirror of
https://github.com/ManInDark/ReactHolidays.git
synced 2026-01-20 22:24:28 +01:00
added tailwind & heroicons, restyled page
This commit is contained in:
@@ -2,12 +2,11 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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" />
|
||||
<title>Holiday List</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<body class="dark:bg-gray-900 dark:text-white flex justify-center">
|
||||
<div class="container " id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
1039
package-lock.json
generated
1039
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -10,6 +10,7 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@heroicons/react": "^2.1.5",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
},
|
||||
@@ -18,10 +19,13 @@
|
||||
"@types/react": "^18.3.3",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"@vitejs/plugin-react": "^4.3.1",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"eslint": "^9.8.0",
|
||||
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.9",
|
||||
"globals": "^15.9.0",
|
||||
"postcss": "^8.4.47",
|
||||
"tailwindcss": "^3.4.14",
|
||||
"typescript": "^5.5.3",
|
||||
"typescript-eslint": "^8.0.0",
|
||||
"vite": "^5.4.0"
|
||||
|
||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
@@ -1,3 +1,4 @@
|
||||
import { ArrowLeftIcon, ArrowPathIcon, ArrowRightIcon } from '@heroicons/react/24/solid';
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
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() {
|
||||
const currentYear = new Date().getFullYear().toString();
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
const [keys, setKeys] = useState<Holiday[]>([]);
|
||||
const [year, setYear] = useState<string>("2024");
|
||||
const [satYear, setSatYear] = useState<string>("2024");
|
||||
const [year, setYear] = useState<string>(currentYear);
|
||||
const [satYear, setSatYear] = useState<string>(currentYear);
|
||||
|
||||
function addYear(i: number): void {
|
||||
const newyear: string = (parseInt(satYear) + i).toString();
|
||||
setYear(newyear);
|
||||
setSatYear(newyear);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getText(satYear).then((value) => {
|
||||
@@ -18,26 +26,25 @@ function ListHolidays() {
|
||||
setLoading(false);
|
||||
});
|
||||
}, [satYear])
|
||||
return <>
|
||||
<div>
|
||||
<div>
|
||||
return <div className="flex flex-col gap-3 m-5">
|
||||
<div className="flex justify-center">
|
||||
{loading ?
|
||||
<>Loading ...</>
|
||||
:
|
||||
<table>
|
||||
<table className="border-collapse border-black border-2">
|
||||
<thead>
|
||||
<tr>
|
||||
<tr className="bg-gray-200 dark:bg-gray-800">
|
||||
<th>Date</th>
|
||||
<th>Name</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{keys.map((holiday) =>
|
||||
<tr key={holiday.date + "-" + holiday.localName}>
|
||||
<td>
|
||||
{holiday.date}
|
||||
<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 className="p-1 px-3 text-right">
|
||||
{new Date(holiday.date).toLocaleDateString()}
|
||||
</td>
|
||||
<td>
|
||||
<td className="p-1 px-3">
|
||||
{holiday.localName}
|
||||
</td>
|
||||
</tr>
|
||||
@@ -46,12 +53,13 @@ function ListHolidays() {
|
||||
</table>
|
||||
}
|
||||
</div>
|
||||
<div>
|
||||
<input type="number" value={year} onChange={(e) => { setYear(e.target.value) }} />
|
||||
<input type="submit" onClick={() => { setSatYear(year) }} />
|
||||
<div className="flex justify-center">
|
||||
<ArrowLeftIcon className='icon' onClick={() => addYear(-1)} />
|
||||
<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>
|
||||
</>
|
||||
}
|
||||
|
||||
export default ListHolidays;
|
||||
54
src/main.css
54
src/main.css
@@ -1,51 +1,7 @@
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--textcolor: black;
|
||||
--backgroundcolor: white;
|
||||
--color-one: lightgray;
|
||||
--color-two: darkgray;
|
||||
}
|
||||
}
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--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);
|
||||
.icon {
|
||||
@apply size-5 hover:text-gray-500 transition-all duration-200 m-2;
|
||||
}
|
||||
11
tailwind.config.js
Normal file
11
tailwind.config.js
Normal file
@@ -0,0 +1,11 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
Reference in New Issue
Block a user