forked from Weaverse/pilot
-
Notifications
You must be signed in to change notification settings - Fork 0
/
background-image.tsx
98 lines (94 loc) · 2.53 KB
/
background-image.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
import { Image } from "@shopify/hydrogen";
import type { InspectorGroup, WeaverseImage } from "@weaverse/hydrogen";
import type { VariantProps } from "class-variance-authority";
import { cva } from "class-variance-authority";
let variants = cva("absolute inset-0 w-full h-full z-[-1]", {
variants: {
backgroundFit: {
fill: "object-fill",
cover: "object-cover",
contain: "object-contain",
},
backgroundPosition: {
"top left": "object-[top_left]",
"top center": "object-[top_center]",
"top right": "object-[top_right]",
"center left": "object-[center_left]",
"center center": "object-[center_center]",
"center right": "object-[center_right]",
"bottom left": "object-[bottom_left]",
"bottom center": "object-[bottom_center]",
"bottom right": "object-[bottom_right]",
},
},
defaultVariants: {
backgroundFit: "cover",
backgroundPosition: "center center",
},
});
export type BackgroundImageProps = VariantProps<typeof variants> & {
backgroundImage?: WeaverseImage | string;
};
export function BackgroundImage(props: BackgroundImageProps) {
let { backgroundImage, backgroundFit, backgroundPosition } = props;
if (backgroundImage) {
let data =
typeof backgroundImage === "string"
? { url: backgroundImage, altText: "Section background" }
: backgroundImage;
return (
<Image
className={variants({ backgroundFit, backgroundPosition })}
data={data}
sizes="auto"
/>
);
}
return null;
}
export let backgroundInputs: InspectorGroup["inputs"] = [
{
type: "select",
name: "backgroundFor",
label: "Background for",
configs: {
options: [
{ value: "section", label: "Section" },
{ value: "content", label: "Content" },
],
},
defaultValue: "section",
},
{
type: "color",
name: "backgroundColor",
label: "Background color",
defaultValue: "",
},
{
type: "image",
name: "backgroundImage",
label: "Background image",
},
{
type: "select",
name: "backgroundFit",
label: "Background fit",
configs: {
options: [
{ value: "fill", label: "Fill" },
{ value: "cover", label: "Cover" },
{ value: "contain", label: "Contain" },
],
},
defaultValue: "cover",
condition: "backgroundImage.ne.nil",
},
{
type: "position",
name: "backgroundPosition",
label: "Background position",
defaultValue: "center center",
condition: "backgroundImage.ne.nil",
},
];