77 lines
1.7 KiB
TypeScript
77 lines
1.7 KiB
TypeScript
"use client"
|
|
|
|
/*
|
|
* File: IconContainer.tsx
|
|
* Description: Reusable icon container component for onboarding screens.
|
|
* Design & Developed by Tech4Biz Solutions
|
|
* Copyright (c) Spurrin Innovations. All rights reserved.
|
|
*/
|
|
|
|
import type React from "react"
|
|
import { View, StyleSheet } from "react-native"
|
|
import Icon from "react-native-vector-icons/Feather"
|
|
import { Colors, Spacing } from "../../../../shared/src/theme"
|
|
|
|
interface IconContainerProps {
|
|
iconName: string
|
|
iconSize?: number
|
|
containerSize?: number
|
|
backgroundColor?: string
|
|
iconColor?: string
|
|
}
|
|
|
|
const IconContainer: React.FC<IconContainerProps> = ({
|
|
iconName,
|
|
iconSize = 32,
|
|
containerSize = 80,
|
|
backgroundColor = Colors.inputBackground,
|
|
iconColor = Colors.primary,
|
|
}) => {
|
|
return (
|
|
<View style={styles.container}>
|
|
<View
|
|
style={[
|
|
styles.iconWrapper,
|
|
{
|
|
width: containerSize,
|
|
height: containerSize,
|
|
borderRadius: containerSize * 0.25,
|
|
backgroundColor,
|
|
},
|
|
]}
|
|
>
|
|
<Icon name={iconName} size={iconSize} color={iconColor} />
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
alignItems: "center",
|
|
marginBottom: Spacing.xl,
|
|
},
|
|
iconWrapper: {
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
borderWidth: 1,
|
|
borderColor: Colors.border,
|
|
shadowColor: Colors.backButtonShadow,
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 2,
|
|
},
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 4,
|
|
elevation: 2,
|
|
},
|
|
})
|
|
|
|
export default IconContainer
|
|
|
|
/*
|
|
* End of File: IconContainer.tsx
|
|
* Design & Developed by Tech4Biz Solutions
|
|
* Copyright (c) Spurrin Innovations. All rights reserved.
|
|
*/
|