So am building a system that I can re-use across projects I work. I’ve started with a tailwindcss config, and now am heading up building components.
It would be nice if we can just call a button, or an input etc… and specify exactly how we want, perhaps do some error handling as well.
I wonder, anyone has any ideas on how we could make this, in Sage using blade?
Example from React/TS:
import './button.scss';
import classnames from 'classnames';
import React, { ButtonHTMLAttributes, FC } from 'react';
export interface ButtonProps {
kind?: 'solid' | 'outline' | 'clear';
variant?: 'primary' | 'success' | 'warning' | 'danger' | 'brand' | 'white' | 'secondary';
radius?: 'none' | 'small' | 'medium' | 'large' | 'full';
shadow?: boolean;
size?: 'small' | 'medium' | 'large';
}
const Button: FC<ButtonProps & ButtonHTMLAttributes<HTMLButtonElement>> = ({
kind,
variant,
radius,
shadow,
size,
...props
}) => {
const classes = classnames('button', props.className, kind, size, variant, `radius-${radius}`, {
shadow
});
return (
<button type="button" {...props} className={classes}>
{props.children}
</button>
);
};
Button.defaultProps = {
kind: 'solid',
variant: 'white',
radius: 'small',
size: 'medium',
shadow: false
};
export default Button;
Something along these lines. It would be nice to have components where wen can do these things.
I’m wondering if all I can do is just create the keys and then create CSS for it by abstracting it into names, and then put that CSS withing the component. Now, I don’t want any performance issues or anything, but I believe it should compile so all should be just fine right if there was some way to go about this.
Any ideas?