feat: add BadgeInfoIcon component and integrate popup alert examples in UiAndComponents

Author: codeAbinash

src/assets/icons/hugeicons/BadgeInfoIcon.tsx

@@ -0,0 +1,31 @@
+
+import React from 'react'
+import Svg, { Circle, ClipPath, Defs, Ellipse, G, Line, LinearGradient, Mask, Path, Polygon, Polyline, RadialGradient, Rect, Stop } from 'react-native-svg'
+import {type Variant, type HugeIconProps, defaultStrokeWidth, defaultVariant, defaultColor, defaultSize } from './constants'
+
+const iconMap: Partial<Record<Variant, React.FC<HugeIconProps>>> = { 
+	'solid-rounded': SolidRounded,
+	'stroke-rounded': StrokeRounded,
+}
+
+export default function BadgeInfoIcon({ variant, ...rest }: HugeIconProps) {
+  const selectedVariant = variant || defaultVariant
+  const Component = iconMap[selectedVariant] || iconMap[defaultVariant] || StrokeRounded
+  return <Component {...rest} />
+}
+
+function SolidRounded({ size = defaultSize, color = defaultColor, strokeWidth = defaultStrokeWidth, className, style }: HugeIconProps) {
+  return (<Svg className={className} style={style} width={size} height={size} viewBox="0 0 24 24" fill="none">
+<Path fillRule="evenodd" clipRule="evenodd" d="M9.36526 2.22073C10.8834 0.926998 13.1167 0.926987 14.6348 2.22073L14.8809 2.42972C15.4014 2.87318 16.0489 3.14192 16.7305 3.19632L17.0528 3.22171C19.0407 3.38065 20.6195 4.95937 20.7783 6.9473L20.8037 7.26956C20.8582 7.95121 21.1268 8.5987 21.5703 9.11917L21.7793 9.36526C23.0729 10.8834 23.073 13.1167 21.7793 14.6348L21.5703 14.8809C21.1268 15.4014 20.8581 16.0488 20.8037 16.7305L20.7783 17.0528C20.6194 19.0406 19.0406 20.6194 17.0528 20.7783L16.7305 20.8037C16.0488 20.8581 15.4014 21.1268 14.8809 21.5703L14.6348 21.7793C13.1167 23.073 10.8834 23.0729 9.36526 21.7793L9.11917 21.5703C8.5987 21.1268 7.95121 20.8582 7.26956 20.8037L6.9473 20.7783C4.95937 20.6195 3.38065 19.0407 3.22171 17.0528L3.19632 16.7305C3.14192 16.0489 2.87318 15.4014 2.42972 14.8809L2.22073 14.6348C0.926987 13.1167 0.926998 10.8834 2.22073 9.36526L2.42972 9.11917C2.87326 8.59869 3.14188 7.95122 3.19632 7.26956L3.22171 6.9473C3.38053 4.95928 4.95928 3.38053 6.9473 3.22171L7.26956 3.19632C7.95122 3.14188 8.59869 2.87326 9.11917 2.42972L9.36526 2.22073ZM12 11C11.4477 11 11 11.4477 11 12V16C11.0002 16.5522 11.4479 17 12 17C12.5521 16.9999 12.9999 16.5521 13 16V12C13 11.4478 12.5522 11.0001 12 11ZM12 7.25003C11.4477 7.25003 11 7.69774 11 8.25003C11.0002 8.80216 11.4479 9.25003 12 9.25003C12.5521 9.24992 12.9998 8.80209 13 8.25003C13 7.69781 12.5522 7.25014 12 7.25003Z" fill={color}/>
+</Svg>
+)
+}
+
+function StrokeRounded({ size = defaultSize, color = defaultColor, strokeWidth = defaultStrokeWidth, className, style }: HugeIconProps) {
+  return (<Svg className={className} style={style} width={size} height={size} viewBox="0 0 24 24" fill="none">
+<Path d="M14.3942 3.00083L14.1481 2.79115C12.9103 1.73628 11.0897 1.73628 9.85189 2.79115L9.60584 3.00083C8.96518 3.54679 8.16862 3.87674 7.32956 3.9437L7.00731 3.96941C5.38613 4.09878 4.09878 5.38613 3.96941 7.00731L3.9437 7.32956C3.87674 8.16862 3.54679 8.96518 3.00083 9.60584L2.79115 9.85189C1.73628 11.0897 1.73628 12.9103 2.79115 14.1481L3.00083 14.3942C3.54679 15.0348 3.87674 15.8314 3.9437 16.6704L3.96941 16.9927C4.09878 18.6139 5.38613 19.9012 7.00731 20.0306L7.32956 20.0563C8.16862 20.1233 8.96518 20.4532 9.60584 20.9992L9.85188 21.2089C11.0897 22.2637 12.9103 22.2637 14.1481 21.2089L14.3942 20.9992C15.0348 20.4532 15.8314 20.1233 16.6704 20.0563L16.9927 20.0306C18.6139 19.9012 19.9012 18.6139 20.0306 16.9927L20.0563 16.6704C20.1233 15.8314 20.4532 15.0348 20.9992 14.3942L21.2089 14.1481C22.2637 12.9103 22.2637 11.0897 21.2089 9.85188L20.9992 9.60584C20.4532 8.96518 20.1233 8.16862 20.0563 7.32956L20.0306 7.00731C19.9012 5.38613 18.6139 4.09878 16.9927 3.96941L16.6704 3.9437C15.8314 3.87674 15.0348 3.54679 14.3942 3.00083Z" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"/>
+<Path d="M12 16V12" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"/>
+<Path d="M12.125 8.25H12M12.25 8.25C12.25 8.11193 12.1381 8 12 8C11.8619 8 11.75 8.11193 11.75 8.25C11.75 8.38807 11.8619 8.5 12 8.5C12.1381 8.5 12.25 8.38807 12.25 8.25Z" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"/>
+</Svg>
+)
+}

src/components/Check.tsx

@@ -8,8 +8,8 @@ export type CheckIconProps = {
 } & HugeIconProps
 export default function Check({ checked, ...rest }: CheckIconProps) {
   return checked ? (
-    <Tick01Icon {...ic} color={Colors.accent} {...rest} />
+    <Tick01Icon strokeWidth={2} {...ic} color={Colors.accent} {...rest} />
   ) : (
-    <Tick01Icon {...ic} style={{ opacity: 0 }} />
+    <Tick01Icon strokeWidth={2} {...ic} style={{ opacity: 0 }} />
   )
 }

src/components/Popup.tsx

@@ -1,23 +1,27 @@
-import popupStore from '@/zustand/popupStore'
+import popupStore, { type ButtonVariant, type PopupButtonDef } from '@/zustand/popupStore'
 import { H } from '@utils/dimensions'
 import { Medium, SemiBold } from '@utils/fonts'
 import React from 'react'
 import { Modal, ScrollView, TouchableOpacity, View } from 'react-native'
-import { MAIN_TEXT_SIZE } from './values'
+import { HEADING_SIZE, MAIN_TEXT_SIZE } from './values'
 
 type PopupT = {
   index: number
   text?: string
   title?: string
-  buttons: {
-    text: string
-    onPress?: () => void
-  }[]
+  buttons: PopupButtonDef[]
   noClose?: boolean
 }
 
+const variantStyles: Record<ButtonVariant, { bg: string; text: string }> = {
+  default: { bg: 'bg-(--bg) dark:bg-zinc-800', text: 'text-black dark:text-white' },
+  primary: { bg: 'bg-blue-500', text: 'text-white' },
+  destructive: { bg: 'bg-(--bg) dark:bg-zinc-800', text: 'text-red-500' },
+}
+
 const Popup = React.memo<PopupT>(({ text, title, buttons, index, noClose }) => {
   const removePopup = popupStore((store) => store.removePopup)
+  const isRow = buttons.length === 2
 
   return (
     <View>
@@ -32,20 +36,24 @@ const Popup = React.memo<PopupT>(({ text, title, buttons, index, noClose }) => {
         }}
       >
         <View className='flex-1 items-center justify-center bg-black/40 dark:bg-black/50'>
-          <View className='w-[85%] rounded-3xl bg-white dark:bg-zinc-900'>
-            <View className='px-6 pt-5'>
-              <SemiBold className='text-xl text-black dark:text-white'>{title}</SemiBold>
-              <ScrollView style={{ maxHeight: H * 0.65, marginTop: 10 }}>
-                <Medium className='text-sm text-black dark:text-white' style={{ fontSize: MAIN_TEXT_SIZE + 1 }}>
+          <View className='w-[83%] rounded-4xl bg-white dark:bg-zinc-900'>
+            <View className='px-7 pt-6'>
+              <SemiBold className='text-black dark:text-white' style={{ fontSize: HEADING_SIZE }}>
+                {title}
+              </SemiBold>
+              <ScrollView style={{ maxHeight: H * 0.65, marginTop: 8 }}>
+                <Medium className='text-black/70 dark:text-white/70' style={{ fontSize: MAIN_TEXT_SIZE + 1 }}>
                   {text}
                 </Medium>
               </ScrollView>
             </View>
-            <View className='mt-5 flex-row flex-wrap items-center justify-end px-4 pb-5'>
-              {buttons?.map((button, i) => (
+            <View className={`mt-8 gap-2 px-5 pb-5 ${isRow ? 'flex-row' : 'flex-col'}`}>
+              {buttons.map((button, i) => (
                 <PopupButton
                   key={i}
                   text={button.text}
+                  variant={button.variant ?? 'default'}
+                  isRow={isRow}
                   onPress={() => {
                     button.onPress?.()
                     removePopup(index)
@@ -62,14 +70,22 @@ const Popup = React.memo<PopupT>(({ text, title, buttons, index, noClose }) => {
 
 export default Popup
 
-const PopupButton = React.memo<{ text: string; onPress?: () => void }>(({ text, onPress }) => {
+type PopupButtonProps = {
+  text: string
+  onPress?: () => void
+  variant: ButtonVariant
+  isRow: boolean
+}
+
+const PopupButton = React.memo<PopupButtonProps>(({ text, onPress, variant, isRow }) => {
+  const { bg, text: textColor } = variantStyles[variant]
   return (
     <TouchableOpacity
-      className='min-w-20 items-center justify-center rounded-lg px-3 py-3 active:bg-black/5 dark:active:bg-white/10'
+      className={`items-center justify-center rounded-full px-4 py-4 ${bg} ${isRow ? 'flex-1' : 'w-full'}`}
       onPress={onPress}
-      activeOpacity={0.5}
+      activeOpacity={0.75}
     >
-      <SemiBold className='text-black dark:text-white' style={{ fontSize: MAIN_TEXT_SIZE }}>
+      <SemiBold className={textColor} style={{ fontSize: MAIN_TEXT_SIZE + 1, marginBottom: 2 }}>
         {text}
       </SemiBold>
     </TouchableOpacity>

src/screens/Settings/UiAndComponents.tsx

@@ -1,3 +1,4 @@
+import popupStore from '@/zustand/popupStore'
 import Button from '@components/Button'
 import Check from '@components/Check'
 import { Gap12 } from '@components/Gap'
@@ -11,6 +12,7 @@ import SettText from '@components/Settings/SettText'
 import SettWrapper from '@components/Settings/SettWrapper'
 import { Txt } from '@components/Text'
 import { Toggle } from '@components/Toggle'
+import BadgeInfoIcon from '@hugeicons/BadgeInfoIcon'
 import CpuIcon from '@hugeicons/CpuIcon'
 import JavaIcon from '@hugeicons/JavaIcon'
 import JavaScriptIcon from '@hugeicons/JavaScriptIcon'
@@ -85,6 +87,8 @@ export default function UiAndComponents({ navigation }: NavProp) {
           <RangeSliderMemo2 />
         </Gap12>
 
+        <PopupAlertExample />
+
         <Gap12>
           <SettGroup title='Text Inputs'>
             <Input
@@ -224,3 +228,65 @@ const RangeSliderMemo2 = () => {
     </SettGroup>
   )
 }
+
+
+function PopupAlertExample() {
+  const alert = popupStore((store) => store.alert)
+  return (
+    <Gap12>
+      <SettGroup title='Popup Alert Example'>
+        <SettOption
+          title='With default OK button'
+          onPress={() => alert('Alert Title', 'This is the alert text')}
+          Icon={<RoundIcon Icon={BadgeInfoIcon} className='bg-slate-500' />}
+          arrow
+        />
+        <SettOption
+          title='Custom buttons'
+          onPress={() => alert('Alert Title', 'This is the alert text', [{ text: 'Close', variant: 'primary' }])}
+          Icon={<RoundIcon Icon={BadgeInfoIcon} className='bg-slate-500' />}
+          arrow
+        />
+        <SettOption
+          title='Multiple buttons and no close'
+          onPress={() =>
+            alert(
+              'Alert Title',
+              'This is the alert text',
+              [
+                { text: 'Cancel', variant: 'primary' },
+                { text: 'Delete', variant: 'destructive' },
+              ],
+              true,
+            )
+          }
+          Icon={<RoundIcon Icon={BadgeInfoIcon} className='bg-slate-500' />}
+          arrow
+        />
+        <SettOption
+          title='More than 2 buttons'
+          onPress={() =>
+            alert(
+              'Alert Title',
+              'This is the alert text',
+              [
+                { text: 'Option 1' },
+                { text: 'Option 2' },
+                { text: 'Option 3' },
+                { text: 'Option 4', variant: 'primary' },
+                { text: 'Option 5', variant: 'destructive' },
+              ],
+              true,
+            )
+          }
+          Icon={<RoundIcon Icon={BadgeInfoIcon} className='bg-slate-500' />}
+          arrow
+        />
+      </SettGroup>
+      <SettText>
+        These buttons will show different types of popups. You can test the popups by clicking on the buttons. The
+        popups will have different button configurations to show the flexibility of the popup component.
+      </SettText>
+    </Gap12>
+  )
+}

src/zustand/popupStore.ts

@@ -1,15 +1,23 @@
 import { create } from 'zustand'
 
+export type ButtonVariant = 'default' | 'primary' | 'destructive'
+
+export type PopupButtonDef = {
+  text: string
+  onPress?: () => void
+  variant?: ButtonVariant
+}
+
 export type Popup = {
   text?: string
   title?: string
-  buttons?: { text: string; onPress?: () => void }[]
+  buttons?: PopupButtonDef[]
   noClose?: boolean
 }
 
 type PopupStore = {
   popups: Popup[]
-  alert: (title: string, text: string, buttons?: { text: string; onPress?: () => void }[], noClose?: boolean) => void
+  alert: (title: string, text: string, buttons?: PopupButtonDef[], noClose?: boolean) => void
   removePopup: (index: number) => void
   clear: () => void
 }