Skip to content

Commit

Permalink
馃殌 Add National Holidays
Browse files Browse the repository at this point in the history 
馃殌 Add National Holidays
  • Loading branch information
@rizkytegar
rizkytegar committed Oct 27, 2023
2 parents 31b5412 + dbe0ee7 commit e4b3500
Show file tree
Hide file tree
Showing 2 changed files with 159 additions and 79 deletions.
83 changes: 66 additions & 17 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,29 @@ function App() {
const [zone, setZone] = useState("Asia/Jakarta");
const [jam, setJam] = useState(DateTime.now().setZone("Asia/Jakarta"));
const [loading, setLoading] = useState(false);

const [loadingLibur, setLoadingLibur] = useState(false);
const [holidays, setHolidays] = useState<any[]>([]);
const currentMonth: number = jam.month;
const currentYear: number = jam.year;
useEffect(() => {
setLoading(true);
setLoadingLibur(true);

async function fetchHolidays() {
try {
const apiUrl: string = `https://api-harilibur.vercel.app/api?month=${currentMonth}&year=${currentYear}`;
const response = await fetch(apiUrl);
const data = await response.json();
setHolidays(data);
setLoadingLibur(false);
} catch (error) {
console.error("Error fetching holidays:", error);
setLoadingLibur(false);
}
}

fetchHolidays();

const intervalId = setInterval(() => {
setJam(DateTime.now().setZone(zone));
setLoading(false);
Expand All @@ -21,7 +40,7 @@ function App() {
return () => {
clearInterval(intervalId);
};
}, [zone]);
}, [zone, currentMonth, currentYear]);

/**
* Updates the zone state based on the value of the event target.
Expand All @@ -33,33 +52,36 @@ function App() {
setZone(e.target.value);
};

const formatDate = (date: DateTime) =>
date.toFormat("cccc, dd LLLL yyyy", { locale: "id" });

return (
<main className="bg-primary-focus grid h-screen place-items-center px-6 py-24 w-full lg:px-8">
<main className="bg-primary-focus grid h-auto md:h-screen w-auto place-items-center px-6 py-24 lg:px-8">
<div className="card w-full md:w-96 bg-base-100 shadow-xl">
<div className="card-body">
<p className="text-base font-semibold text-indigo-600">
<p className="text-center mb-3 text-base text-lg font-semibold text-indigo-600">
{loading
? "Loading..."
: jam.toFormat("cccc, dd LLLL yyyy", { locale: "id" })}
</p>
<div className="grid grid-flow-col gap-5 text-center auto-cols-max">
<div className="flex flex-col p-2 bg-white rounded-box text-gray-90">
<span className="font-mono text-5xl">
{loading ? ".." : jam.toFormat("HH")}
<div className="grid grid-flow-col gap-5 text-center auto-cols-max mx-auto">
<div className="flex flex-col p-2 bg-gray-100 rounded-lg text-gray-90">
<span className="font-mono text-3xl">
{loading ? ".." : jam.toFormat("HH")}
</span>
hours
Jam
</div>
<div className="flex flex-col p-2 bg-white rounded-box text-gray-90">
<span className="font-mono text-5xl">
{loading ? ".." : jam.toFormat("mm")}
<div className="flex flex-col p-2 bg-gray-100 rounded-lg text-gray-90">
<span className="font-mono text-3xl">
{loading ? ".." : jam.toFormat("mm")}
</span>
min
Menit
</div>
<div className="flex flex-col p-2 bg-white rounded-box text-gray-90">
<span className="font-mono text-5xl">
{loading ? ".." : jam.toFormat("ss")}
<div className="flex flex-col p-2 bg-gray-100 rounded-lg text-gray-90">
<span className="font-mono text-3xl">
{loading ? ".." : jam.toFormat("ss")}
</span>
sec
Detik
</div>
</div>
<div className="mt-10 flex items-center justify-center gap-x-6">
Expand All @@ -79,6 +101,33 @@ function App() {
</option>
</select>
</div>
<div className="mt-6">
<p className="text-left mb-3 text-base text-md font-semibold text-indigo-600">
Hari Libur Nasional Bulan Ini
</p>
{loadingLibur ? (
"Loading..."
) : holidays.length === 0 ? (
<p className="text-sm text-gray-700">
Yah, sayang sekali tidak ada hari libur Nasional Bulan ini
</p>
) : (
<div>
<ul>
{holidays.map((holiday) => (
<li
className="text-xs text-gray-700 font-semibold border border-gray rounded-lg p-1 mb-2"
key={holiday.holiday_date}
>
{holiday.holiday_name}
<br />
{formatDate(DateTime.fromISO(holiday.holiday_date))}
</li>
))}
</ul>
</div>
)}
</div>
</div>
</div>
</main>
Expand Down
155 changes: 93 additions & 62 deletions src/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -761,29 +761,6 @@ html {
color: hsl(var(--nc) / var(--tw-text-opacity));
}

:root .countdown {
line-height: 1em;
}

.countdown {
display: inline-flex;
}

.countdown > * {
height: 1em;
display: inline-block;
overflow-y: hidden;
}

.countdown > *:before {
position: relative;
content: "00\A 01\A 02\A 03\A 04\A 05\A 06\A 07\A 08\A 09\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 35\A 36\A 37\A 38\A 39\A 40\A 41\A 42\A 43\A 44\A 45\A 46\A 47\A 48\A 49\A 50\A 51\A 52\A 53\A 54\A 55\A 56\A 57\A 58\A 59\A 60\A 61\A 62\A 63\A 64\A 65\A 66\A 67\A 68\A 69\A 70\A 71\A 72\A 73\A 74\A 75\A 76\A 77\A 78\A 79\A 80\A 81\A 82\A 83\A 84\A 85\A 86\A 87\A 88\A 89\A 90\A 91\A 92\A 93\A 94\A 95\A 96\A 97\A 98\A 99\A";
white-space: pre;
top: calc(var(--value) * -1em);
text-align: center;
transition: all 1s cubic-bezier(1, 0, 0, 1);
}

.input-group > *,
.input-group > .input,
.input-group > .textarea,
Expand Down Expand Up @@ -1040,12 +1017,25 @@ html {
line-height: 1.5rem;
}

.mx-auto {
margin-left: auto;
margin-right: auto;
}

.mb-3 {
margin-bottom: 0.75rem;
}

.mt-10 {
margin-top: 2.5rem;
}

.mt-4 {
margin-top: 1rem;
.mt-6 {
margin-top: 1.5rem;
}

.mb-2 {
margin-bottom: 0.5rem;
}

.flex {
Expand All @@ -1056,12 +1046,12 @@ html {
display: grid;
}

.h-screen {
height: 100vh;
.h-auto {
height: auto;
}

.w-96 {
width: 24rem;
.w-auto {
width: auto;
}

.w-full {
Expand Down Expand Up @@ -1105,11 +1095,37 @@ html {
column-gap: 1.5rem;
}

.rounded-lg {
border-radius: 0.5rem;
}

.border-4 {
border-width: 4px;
}

.border {
border-width: 1px;
}

.border-b {
border-bottom-width: 1px;
}

.border-primary {
--tw-border-opacity: 1;
border-color: hsl(var(--p) / var(--tw-border-opacity));
}

.bg-base-100 {
--tw-bg-opacity: 1;
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
}

.bg-gray-100 {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

.bg-primary-focus {
--tw-bg-opacity: 1;
background-color: hsl(var(--pf) / var(--tw-bg-opacity));
Expand All @@ -1125,15 +1141,14 @@ html {
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.bg-neutral {
--tw-bg-opacity: 1;
background-color: hsl(var(--n) / var(--tw-bg-opacity));
}

.p-2 {
padding: 0.5rem;
}

.p-1 {
padding: 0.25rem;
}

.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
Expand All @@ -1144,6 +1159,10 @@ html {
padding-bottom: 6rem;
}

.text-left {
text-align: left;
}

.text-center {
text-align: center;
}
Expand All @@ -1152,36 +1171,43 @@ html {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
.text-5xl {
font-size: 3rem;
line-height: 1;
}

.text-base {
font-size: 1rem;
line-height: 1.5rem;
}

.text-5xl {
font-size: 3rem;
line-height: 1;
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}

.font-bold {
font-weight: 700;
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}

.font-semibold {
font-weight: 600;
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}

.tracking-tight {
letter-spacing: -0.025em;
.text-xs {
font-size: 0.75rem;
line-height: 1rem;
}

.text-gray-900 {
.font-semibold {
font-weight: 600;
}

.text-gray-700 {
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity));
color: rgb(55 65 81 / var(--tw-text-opacity));
}

.text-indigo-600 {
Expand All @@ -1199,31 +1225,36 @@ html {
color: rgb(255 255 255 / var(--tw-text-opacity));
}

.text-neutral-content {
--tw-text-opacity: 1;
color: hsl(var(--nc) / var(--tw-text-opacity));
}

.shadow-xl {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 640px) {
.sm\:w-full {
width: 100%;
}
.hover\:bg-gray-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

.sm\:text-5xl {
font-size: 3rem;
line-height: 1;
.focus\:bg-primary:focus {
--tw-bg-opacity: 1;
background-color: hsl(var(--p) / var(--tw-bg-opacity));
}

.focus\:text-white:focus {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
.sm\:h-auto {
height: auto;
}
}

@media (min-width: 768px) {
.md\:w-\[100\] {
width: 100;
.md\:h-screen {
height: 100vh;
}

.md\:w-96 {
Expand Down

0 comments on commit e4b3500

Please sign in to comment.