tambahan
This commit is contained in:
bipproduction
@@ -4,6 +4,7 @@ import {
|
||||
Box,
|
||||
Card,
|
||||
Container,
|
||||
Divider,
|
||||
Flex,
|
||||
Group,
|
||||
Loader,
|
||||
@@ -152,6 +153,7 @@ export default function AdhanPage() {
|
||||
return { cells, daysInMonth, startWeekday };
|
||||
}, [year, month]);
|
||||
|
||||
|
||||
// ========== Prayer cards (per waktu) ==========
|
||||
const prayerList = useMemo(() => {
|
||||
// adhan.adhan is expected: { fajr, sunrise, dhuhr, asr, maghrib, isha }
|
||||
@@ -213,8 +215,11 @@ export default function AdhanPage() {
|
||||
);
|
||||
}
|
||||
|
||||
const landscapeGradient =
|
||||
"linear-gradient(135deg, #091622ff, #475b71ff, #706420ff, #0d3e0cff)";
|
||||
return (
|
||||
<Container size="md" w="100%" px="sm">
|
||||
<Box w={"100%"} bg={landscapeGradient}>
|
||||
<Container size="md" w="100%" px="sm" >
|
||||
<Stack gap="xl" py="md">
|
||||
<Stack justify="apart" align="center">
|
||||
<Stack justify="center" align="center">
|
||||
@@ -247,12 +252,12 @@ export default function AdhanPage() {
|
||||
>
|
||||
<Stack gap="xs">
|
||||
<Group gap={6}>
|
||||
<IconCalendarEvent size={20} />
|
||||
<Text fw={600}>Pilih Tanggal</Text>
|
||||
<IconCalendarEvent size={"2rem"} />
|
||||
<Text size="2rem" fw={700}>Pilih Tanggal</Text>
|
||||
</Group>
|
||||
<DatePicker
|
||||
locale="id"
|
||||
// value={date}
|
||||
value={date}
|
||||
// date={date || undefined}
|
||||
renderDay={(d) => (
|
||||
<Text
|
||||
@@ -267,12 +272,12 @@ export default function AdhanPage() {
|
||||
{dayjs(d).format("DD")}
|
||||
</Text>
|
||||
)}
|
||||
minDate={date || undefined}
|
||||
minDate={dayjs("2025-01-01").toDate()}
|
||||
maxDate={dayjs().add(40, "year").toDate()}
|
||||
defaultDate={date || undefined}
|
||||
onChange={setDate as any}
|
||||
onYearSelect={setDate as any}
|
||||
onMonthSelect={setDate as any}
|
||||
// defaultDate={date || undefined}
|
||||
onChange={(date) => setDate(dayjs(date).toDate())}
|
||||
onYearSelect={(year) => setDate(dayjs(year).toDate())}
|
||||
onMonthSelect={(month) => setDate(dayjs(month).toDate())}
|
||||
|
||||
/>
|
||||
</Stack>
|
||||
@@ -285,45 +290,47 @@ export default function AdhanPage() {
|
||||
{FullYearHoliday(year, holidays)}
|
||||
</Stack>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function JadwalImamHariIni(date: Date | null, daily: any, adhan: any) {
|
||||
return (
|
||||
<Card padding="lg" radius="md" bg={"dark.9"}>
|
||||
<Stack gap="sm">
|
||||
<Stack gap="20">
|
||||
<Stack>
|
||||
<Group>
|
||||
<IconUser size={20} />
|
||||
<Title order={5} fw={700}>
|
||||
<IconUser size={"2rem"} />
|
||||
<Text size="2rem" fw={700}>
|
||||
Jadwal Imam Hari Ini
|
||||
</Title>
|
||||
</Text>
|
||||
</Group>
|
||||
|
||||
<Text size="sm" c="dimmed">
|
||||
{dayjs(date).format("dddd, DD MMMM YYYY")}
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
<Group>
|
||||
<Badge
|
||||
leftSection={<IconUser size={14} />}
|
||||
color="blue"
|
||||
variant="light"
|
||||
>
|
||||
{daily.data.imam || "-"}
|
||||
</Badge>
|
||||
<Badge
|
||||
leftSection={<IconClock size={14} />}
|
||||
color="grape"
|
||||
variant="light"
|
||||
>
|
||||
{daily.data.ikomah || "-"}
|
||||
</Badge>
|
||||
</Group>
|
||||
<Stack>
|
||||
<Stack gap={"xs"}>
|
||||
<Flex gap={"md"}>
|
||||
<IconUser size={"3rem"} />
|
||||
<Text fw={700} c={"teal"} size="3rem">{daily.data.imam || "-"}</Text>
|
||||
</Flex>
|
||||
<Text c={"dimmed"}>Imam</Text>
|
||||
</Stack>
|
||||
<Divider c={"green"} />
|
||||
<Stack gap={"xs"}>
|
||||
<Flex gap={"md"}>
|
||||
<IconClock size={"2rem"} />
|
||||
<Text c={"blue.4"} size="2rem">{daily.data.ikomah || "-"}</Text>
|
||||
</Flex>
|
||||
<Text c={"dimmed"}>Ikomah</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
<div style={{ height: 8 }} />
|
||||
|
||||
<Title order={6}>Waktu Adhan</Title>
|
||||
<Stack gap={6}>
|
||||
<Text size="1.5rem" fw={700}>Waktu Adhan</Text>
|
||||
<Stack gap={6} c={"dimmed"}>
|
||||
{Object.entries(adhan.adhan).map(([k, v]) => (
|
||||
<Group key={k} justify="apart">
|
||||
<Text w={100} style={{ textTransform: "capitalize" }}>
|
||||
@@ -360,28 +367,27 @@ function CalendarTable(
|
||||
overflowX: "scroll",
|
||||
}}
|
||||
>
|
||||
<Stack miw={700} gap="sm">
|
||||
<Group justify="apart">
|
||||
<Stack miw={700} gap="60">
|
||||
<Stack justify="apart" gap={6}>
|
||||
<Group>
|
||||
<IconLayoutGrid size={20} />
|
||||
<Title order={4} fw={700}>
|
||||
<IconLayoutGrid size={"2rem"} />
|
||||
<Text size={"2rem"} fw={700}>
|
||||
Kalender {dayjs(date).format("MMMM YYYY")}
|
||||
</Title>
|
||||
</Text>
|
||||
</Group>
|
||||
|
||||
<Text size="sm" c="dimmed">
|
||||
Klik tanggal untuk lihat detail
|
||||
</Text>
|
||||
</Group>
|
||||
</Stack>
|
||||
|
||||
{/* weekday headers */}
|
||||
<SimpleGrid cols={7}>
|
||||
<Stack>
|
||||
<SimpleGrid cols={7} p={"md"} bg={"dark.8"}>
|
||||
{["Min", "Sen", "Sel", "Rab", "Kam", "Jum", "Sab"].map((w) => (
|
||||
<div key={w}>{w}</div>
|
||||
<Text fw={700} key={w}>{w}</Text>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
|
||||
{/* month grid */}
|
||||
<SimpleGrid cols={7}>
|
||||
{monthGrid.cells.map((cell, idx) => {
|
||||
if (!cell.date) {
|
||||
@@ -487,6 +493,7 @@ function CalendarTable(
|
||||
})}
|
||||
</SimpleGrid>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -499,11 +506,11 @@ function RingkasanBulalan(
|
||||
) {
|
||||
return (
|
||||
<Card padding="md" radius="md" mt="md" bg={"dark.9"}>
|
||||
<Stack gap="sm">
|
||||
<Stack gap="70">
|
||||
<Group justify="apart">
|
||||
<Group>
|
||||
<IconCalendar size={18} />
|
||||
<Text fw={700}>Ringkasan Bulanan</Text>
|
||||
<IconCalendar size={"2rem"} />
|
||||
<Text size="2rem" fw={700}>Ringkasan Bulanan</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
|
||||
@@ -526,7 +533,9 @@ function RingkasanBulalan(
|
||||
radius="xl"
|
||||
key={d}
|
||||
p={"md"}
|
||||
c={holiday ? "red" : isToday ? "blue" : "white"}
|
||||
c={holiday ? "red.9" : isToday ? "cyan" : "grey.9"}
|
||||
bg={"dark.9"}
|
||||
withBorder
|
||||
>
|
||||
<Stack>
|
||||
<Group>
|
||||
@@ -560,13 +569,13 @@ function FullYearHoliday(year: number, holidays: HolidaysTypes.Holiday[]) {
|
||||
<Card padding="xl" radius="lg" shadow="md" bg={"dark.9"}>
|
||||
<Stack gap="md">
|
||||
<Group gap={6}>
|
||||
<IconGift size={24} />
|
||||
<Title order={4} fw={700}>
|
||||
<IconGift size={"2rem"} />
|
||||
<Title size={"2rem"} order={4} fw={700}>
|
||||
Hari Libur Nasional Tahun {year}
|
||||
</Title>
|
||||
</Group>
|
||||
{holidays.length > 0 && (
|
||||
<Stack>
|
||||
<Stack c={"teal.9"}>
|
||||
<SimpleGrid
|
||||
cols={{
|
||||
base: 2,
|
||||
@@ -590,6 +599,15 @@ function FullYearHoliday(year: number, holidays: HolidaysTypes.Holiday[]) {
|
||||
);
|
||||
}
|
||||
|
||||
const prayerGradients = {
|
||||
fajr: "linear-gradient(135deg, #6d7f8c, #778f8a, #7f998a)",
|
||||
sunrise: "linear-gradient(135deg, #8d7a63, #9a846c, #a28c74)",
|
||||
dhuhr: "linear-gradient(135deg, #647a69, #607463, #5c6a75)",
|
||||
asr: "linear-gradient(135deg, #767c5d, #7f845f, #888d62)",
|
||||
maghrib: "linear-gradient(135deg, #7c5f5f, #875f62, #8f6166)",
|
||||
isha: "linear-gradient(135deg, #595f7a, #505672, #484e6b)"
|
||||
};
|
||||
|
||||
function JadwalHariIni(
|
||||
prayerList: {
|
||||
name: string;
|
||||
@@ -613,7 +631,7 @@ function JadwalHariIni(
|
||||
{prayerList.map((p) => {
|
||||
const Icon = p.Icon;
|
||||
return (
|
||||
<Card key={p.name} radius="lg" bg={"dark.9"}>
|
||||
<Card key={p.name} radius="lg" bg={prayerGradients[p.name as keyof typeof prayerGradients]}>
|
||||
<Stack
|
||||
gap="xs"
|
||||
align="stretch"
|
||||
@@ -630,12 +648,12 @@ function JadwalHariIni(
|
||||
</Group>
|
||||
|
||||
<Group justify="apart" align="center">
|
||||
<Text size="sm" c={p.isPast ? "dimmed" : undefined}>
|
||||
<Text size="sm" c={p.isPast ? "dark" : undefined}>
|
||||
{p.isPast ? "Sudah lewat" : formatCountdown(p.dt)}
|
||||
</Text>
|
||||
|
||||
<Badge
|
||||
color={p.isPast ? "gray" : "blue"}
|
||||
color={p.isPast ? "orange" : "blue"}
|
||||
variant="light"
|
||||
radius="sm"
|
||||
>
|
||||
@@ -669,11 +687,11 @@ function UserList() {
|
||||
{data?.data?.data?.map((u) => {
|
||||
if (u.active === false) return null;
|
||||
return (
|
||||
<Card key={u.id} radius={"lg"} bg={"dark"}>
|
||||
<Stack align="center">
|
||||
<IconUser size={"3rem"} color="green" />
|
||||
<Text>{u.name}</Text>
|
||||
</Stack>
|
||||
<Card key={u.id} radius={"40"} withBorder bg={"dark.9"}>
|
||||
<Flex align="center" gap={"md"}>
|
||||
<IconUser size={"2rem"} color="green" />
|
||||
<Text size="1rem">{u.name}</Text>
|
||||
</Flex>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
|
||||
Reference in New Issue
Block a user