Files
mobile-darmasaba/components/eventItem.tsx
amaliadwiy 84935e8188 feat: tambah fitur kalender umum village dengan indikator per jenis event
- 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
2026-05-11 15:19:21 +08:00

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>
)
}