mobile-darmasaba/constants/styles/component.styles.ts

import { StyleSheet } from "react-native";

const ComponentStyles = StyleSheet.create({
   // avatar
   userProfileExtraSmall: { width: 35, height: 35, borderRadius: 100 },
   userProfileSmall: { width: 48, height: 48, borderRadius: 100 },
   userProfileBig: { width: 100, height: 100, borderRadius: 100 },
   imgListBanner: { width: 100, height: 50, borderRadius: 5 },
   iconContent: { padding: 10, borderRadius: 100, backgroundColor: '#E5E7EB' },

   // chip
   chip: {
      paddingVertical: 5,
      paddingHorizontal: 15,
      borderRadius: 5,
      borderWidth: 1,
      borderColor: "transparent",
      marginRight: 10,
      marginBottom: 10,
   },
   chipSelected: { backgroundColor: "#f2f6ffff", borderColor: "#384288", borderWidth: 1 },
   chipText: { fontSize: 16, color: "#222" },
   chipTextSelected: { color: "white" },
   checkIcon: {
      position: "absolute",
      top: -6,
      left: -6,
      backgroundColor: "#384288",
      borderRadius: 10,
      padding: 2,
   },

   // badge & progress
   badgeCol: { alignItems: 'center', gap: 6 },
   progressBadge: { borderRadius: 10, paddingHorizontal: 12, paddingVertical: 5, borderWidth: 1, alignItems: 'center' },
   taskCountBadge: { borderRadius: 6, paddingHorizontal: 7, paddingVertical: 2 },
   positionBadge: { borderRadius: 20, paddingHorizontal: 8, paddingVertical: 3 },
   textProgressPercent: { fontSize: 22, fontWeight: 'bold', lineHeight: 28 },
   progressTrack: { height: 8, borderRadius: 4, overflow: 'hidden' },
   progressFill: { height: '100%', borderRadius: 4 },
   reportContent: { borderLeftWidth: 3, paddingLeft: 12 },
   expandBtn: { flexDirection: 'row', alignItems: 'center', alignSelf: 'flex-start', marginTop: 8, gap: 4 },
   fileGrid: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },
   fileCard: { width: '48%', borderRadius: 10, borderWidth: 1, padding: 12, flexDirection: 'row', alignItems: 'center', gap: 10 },

   // calendar
   signDate: { width: 20, height: 2, borderRadius: 3, marginTop: 3 },
   selectedDate: { backgroundColor: '#238be6', borderRadius: 5 },
   selectRangeDate: { backgroundColor: '#228be61f' },
   calendarDotRow: { flexDirection: 'row', gap: 2, height: 6, marginTop: 1 },
   calendarDot: { width: 5, height: 5, borderRadius: 3 },
   villageEventLegendRow: { marginTop: 10, marginBottom: 4, gap: 16 },
   villageEventLegendItem: { gap: 6 },
   villageEventLegendDot: { width: 10, height: 10, borderRadius: 5 },
   villageEventBadge: { paddingHorizontal: 6, paddingVertical: 2, borderRadius: 4, marginRight: 6 },

   // event item
   itemEvent: { padding: 10, borderRadius: 10, flexDirection: 'row', alignContent: 'stretch', marginBottom: 10 },
   dividerEvent: { width: 7, borderRadius: 5, marginRight: 10 },

   // member
   memberAvatarRing: { borderWidth: 3, borderColor: 'rgba(255,255,255,0.4)', borderRadius: 100 },
   memberBadgeRow: { flexDirection: 'row', gap: 8, marginTop: 12 },
   memberBadgeApprover: {
      paddingHorizontal: 10,
      paddingVertical: 4,
      borderRadius: 20,
      borderWidth: 1,
      borderColor: 'rgba(255,255,255,0.6)',
      backgroundColor: 'rgba(255,255,255,0.15)',
   },
   memberBadgePill: { paddingHorizontal: 10, paddingVertical: 4, borderRadius: 20 },
   memberInfoRow: { flexDirection: 'row', alignItems: 'center', paddingVertical: 14 },
   memberInfoIcon: { width: 36, alignItems: 'center' },
   memberInfoContent: { flex: 1, marginLeft: 10 },

   // discussion
   discussionCard: { borderRadius: 10, borderWidth: 1, padding: 14 },
   discussionIconCircle: { width: 40, height: 40, borderRadius: 20, alignItems: 'center', justifyContent: 'center', flexShrink: 0 },
   discussionIconCircleLg: { width: 44, height: 44, borderRadius: 22, alignItems: 'center', justifyContent: 'center' },
   discussionStatusPill: { alignSelf: 'flex-start', marginTop: 3, paddingHorizontal: 8, paddingVertical: 2, borderRadius: 20, borderWidth: 1 },
   discussionStatusText: { fontSize: 11, fontWeight: '600' },
   discussionCardIndent: { marginLeft: 50 },
   discussionSeparator: { height: 8 },
   discussionCommentText: { fontSize: 12, marginLeft: 5 },
   discussionDateText: { fontSize: 11 },
   discussionCommentCard: { borderRadius: 10, borderWidth: 1, padding: 12, marginBottom: 8, flexDirection: 'row' },
   discussionEditedText: { fontSize: 10, fontStyle: 'italic' },
   discussionHeaderPadding: { paddingTop: 12 },
   discussionListPadding: { paddingTop: 8 },
   discussionTitleCol: { marginLeft: 10 },
   discussionDescMargin: { marginBottom: 10 },
   discussionEmptyText: { fontSize: 14 },

   // guide overlay
   guideOverlay: { flex: 1, backgroundColor: 'rgba(0,0,0,0.6)', justifyContent: 'center', alignItems: 'center' },
   guideCard: {
      position: 'absolute',
      left: 24,
      right: 24,
      borderRadius: 16,
      padding: 20,
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 4 },
      shadowOpacity: 0.2,
      shadowRadius: 12,
      elevation: 8,
   },
   guideBadge: { paddingHorizontal: 8, paddingVertical: 3, borderRadius: 20 },
   guideDotRow: { marginTop: 16, gap: 6, justifyContent: 'center' },
   guideDot: { width: 6, height: 6, borderRadius: 3 },
   guideButtonPrimary: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, paddingVertical: 8, borderRadius: 20 },
   guideButtonSecondary: { paddingHorizontal: 4, paddingVertical: 8 },
   guideArrowUp: {
      position: 'absolute',
      top: -10,
      marginLeft: -8,
      width: 0,
      height: 0,
      borderLeftWidth: 8,
      borderRightWidth: 8,
      borderBottomWidth: 10,
      borderLeftColor: 'transparent',
      borderRightColor: 'transparent',
   },
   guideArrowDown: {
      position: 'absolute',
      bottom: -10,
      marginLeft: -8,
      width: 0,
      height: 0,
      borderLeftWidth: 8,
      borderRightWidth: 8,
      borderTopWidth: 10,
      borderLeftColor: 'transparent',
      borderRightColor: 'transparent',
   },
});

export default ComponentStyles;