- Tambah halaman /village-calendar dengan monthly grid dan agenda view - Tampilkan acara divisi (DivisionCalendarReminder) dan kegiatan (ProjectTask) se-village - Indikator dot dua warna pada kalender: ungu untuk acara divisi, biru-abu untuk kegiatan - Tambah endpoint apiGetVillageCalendarByDate dan apiGetVillageCalendarIndicator - Tambah menu Kalender di halaman /feature dengan grid layout flexWrap - Sesuaikan warna EventItem dengan TYPE_COLORS village-calendar - Pindahkan inline style ke Styles.ts sebagai class baru
42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
import Styles from "@/constants/Styles";
|
|
import { useTheme } from "@/providers/ThemeProvider";
|
|
import { Pressable, View } from "react-native";
|
|
import Text from "./Text";
|
|
|
|
type Props = {
|
|
category: 'purple' | 'orange'
|
|
title: string
|
|
user: string
|
|
jamAwal: string
|
|
jamAkhir: string
|
|
onPress?: () => void
|
|
}
|
|
|
|
export default function EventItem({ category, title, user, jamAwal, jamAkhir, onPress }: Props) {
|
|
const { activeTheme, colors } = useTheme();
|
|
|
|
const getBackgroundColor = (cat: 'purple' | 'orange') => {
|
|
if (activeTheme === 'dark') {
|
|
return cat === 'purple' ? '#2D2B5E' : '#1C3347';
|
|
}
|
|
return cat === 'purple' ? '#A9B5DF' : '#D6E6F2';
|
|
};
|
|
|
|
const getStickColor = (cat: 'purple' | 'orange') => {
|
|
if (activeTheme === 'dark') {
|
|
return cat === 'purple' ? '#7886C7' : '#94B4C1';
|
|
}
|
|
return cat === 'purple' ? '#7886C7' : '#94B4C1';
|
|
};
|
|
|
|
return (
|
|
<Pressable style={[Styles.itemEvent, { backgroundColor: getBackgroundColor(category) }]} onPress={onPress}>
|
|
<View style={[Styles.dividerEvent, { backgroundColor: getStickColor(category) }]} />
|
|
<View style={[Styles.w90]}>
|
|
<Text>{jamAwal} - {jamAkhir}</Text>
|
|
<Text numberOfLines={1} ellipsizeMode="tail" style={[Styles.textDefaultSemiBold, Styles.mv05]}>{title}</Text>
|
|
<Text numberOfLines={1} ellipsizeMode="tail">Dibuat oleh : {user}</Text>
|
|
</View>
|
|
</Pressable>
|
|
)
|
|
} |