@nex-ui/react
Version:
🎉 A beautiful, modern, and reliable React component library.
138 lines (135 loc) • 3.04 kB
JavaScript
import { defineRecipe, defineSlotRecipe } from '@nex-ui/system';
const cardRecipe = defineRecipe({
base: {
display: 'flex',
flexDirection: 'column',
w: 'fit-content',
bg: 'content',
maxWidth: '345px',
position: 'relative',
overflow: 'hidden'
},
variants: {
shadow: {
xs: {
boxShadow: 'xs'
},
sm: {
boxShadow: 'sm'
},
md: {
boxShadow: 'md'
},
lg: {
boxShadow: 'lg'
},
xl: {
boxShadow: 'xl'
}
},
radius: {
none: {
borderRadius: 'none'
},
sm: {
borderRadius: 'md'
},
md: {
borderRadius: 'lg'
},
lg: {
borderRadius: 'xl'
}
},
blurred: {
true: {
backdropFilter: 'blur(12px)'
}
},
hoverable: {
true: {
transition: 'scale',
_hover: {
scale: '1.03'
},
_focusVisibleRing: {
scale: '1.03'
}
}
}
}
});
const cardHeaderRecipe = defineSlotRecipe({
slots: {
root: {
p: '3',
display: 'flex',
alignItems: 'center',
gap: '3'
},
content: {
flex: 1,
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'flex-start'
},
title: {
fs: 'lg'
},
subtitle: {
fs: 'md'
}
}
});
const cardBodyRecipe = defineRecipe({
base: {
p: '3',
overflowWrap: 'break-word'
}
});
const cardFooterRecipe = defineRecipe({
base: {
p: '3'
}
});
const cardActionArea = defineRecipe({
base: {
textAlign: 'inherit',
color: 'inherit',
width: 'full',
position: 'relative',
overflow: 'hidden',
borderRadius: 'inherit',
fs: 'inherit',
'::after': {
position: 'absolute',
bg: {
_DEFAULT: 'gray.200/25',
_dark: 'gray.800/25'
},
inset: 0,
transition: 'colors',
content: "' '",
display: 'block',
pointerEvents: 'none',
opacity: 0
},
_hover: {
'::after': {
opacity: 1
}
},
_focusVisibleRing: {
outline: 'focusVisibleOutline'
}
},
variants: {
disabled: {
true: {
cursor: 'default'
}
}
}
});
export { cardActionArea, cardBodyRecipe, cardFooterRecipe, cardHeaderRecipe, cardRecipe };