40 lines
No EOL
931 B
TypeScript
40 lines
No EOL
931 B
TypeScript
import { component$, CSSProperties, QwikIntrinsicElements, Slot } from "@builder.io/qwik";
|
|
|
|
type GradientProps = {
|
|
size: string;
|
|
from: string;
|
|
to: string;
|
|
direction?: string;
|
|
};
|
|
|
|
export default component$((props: GradientProps & QwikIntrinsicElements["div"]) => {
|
|
const {
|
|
size,
|
|
from,
|
|
to,
|
|
direction,
|
|
style: userStyle,
|
|
...rest
|
|
} = props;
|
|
|
|
const borderStyle: CSSProperties = {
|
|
padding: size,
|
|
background: `linear-gradient(${direction || "to bottom"}, ${from}, ${to})`,
|
|
display: "inline-block",
|
|
};
|
|
|
|
// Only spread userStyle if it's an object
|
|
const mergedStyle =
|
|
userStyle && typeof userStyle === "object"
|
|
? { ...borderStyle, ...userStyle }
|
|
: borderStyle;
|
|
|
|
return (
|
|
<div
|
|
style={mergedStyle}
|
|
{...rest}
|
|
>
|
|
<Slot />
|
|
</div>
|
|
);
|
|
}); |