export const useCard = create<StoreType>(

set => ({

cardData: defaultCardData,

changeData: (name: string, value: string) =>

set(state => ({

...state,

cardData: { ...state.cardData, [name]: value }

})),

removeData: () =>

set(state => ({

...state, cardData: defaultCardData

})),

cardRotate: false,

changeCardRotate: (value: boolean) =>

set(state => ({ ...state, cardRotate: value })),

})

)

export const AnimatedNumbers: FC<Props> = ({

numbers, charWidth, blockSize, hide

}) => (

<div>

{numbers.split('').map((el, i) => {

const margin = blockSize

? incrementMargin(i, blockSize, 4) : 1

return (

<AnimatePresence key={i} initial={false}>

<motion.span

variants={textMotion}

style={{ left: `${i * charWidth}px` }}

dangerouslySetInnerHTML={{

__html: hide ? '&#183;' : el

}}

/>

</AnimatePresence>

)

})}

</div>

)

import { CardData } from '@types/storeType'

 

export const validateForm = (data: CardData) => {

let valid = true

 

if (data.number.length < 16) valid = false

if (data.cvc.length < 3) valid = false

if (data.name.replaceAll(' ', '')

.length === 0) valid = false

if (!data.year) valid = false

if (!data.month) valid = false

 

return valid

}