aural-ui 2.1.3 → 2.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,211 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
import type { Meta, StoryObj } from "@storybook/react"
|
|
3
|
+
|
|
4
|
+
import ThumbnailTags from "."
|
|
5
|
+
|
|
6
|
+
type ThumbnailTagsProps = React.ComponentProps<typeof ThumbnailTags>
|
|
7
|
+
|
|
8
|
+
const meta: Meta<ThumbnailTagsProps> = {
|
|
9
|
+
title: "Components/UI/ThumbnailTags",
|
|
10
|
+
component: ThumbnailTags,
|
|
11
|
+
parameters: {
|
|
12
|
+
layout: "centered",
|
|
13
|
+
backgrounds: {
|
|
14
|
+
default: "dark",
|
|
15
|
+
values: [
|
|
16
|
+
{ name: "dark", value: "#0a0a0a" },
|
|
17
|
+
{ name: "light", value: "#ffffff" },
|
|
18
|
+
],
|
|
19
|
+
},
|
|
20
|
+
},
|
|
21
|
+
tags: ["autodocs"],
|
|
22
|
+
argTypes: {
|
|
23
|
+
variant: {
|
|
24
|
+
control: "select",
|
|
25
|
+
options: [
|
|
26
|
+
"promotional",
|
|
27
|
+
"checked",
|
|
28
|
+
"top10",
|
|
29
|
+
"engagement",
|
|
30
|
+
"completed-series",
|
|
31
|
+
],
|
|
32
|
+
description:
|
|
33
|
+
"Determines the visual style and layout of the thumbnail tag",
|
|
34
|
+
},
|
|
35
|
+
text: {
|
|
36
|
+
control: "text",
|
|
37
|
+
description: "The main text content for variant - Promotional",
|
|
38
|
+
},
|
|
39
|
+
primaryText: {
|
|
40
|
+
control: "text",
|
|
41
|
+
description: "The main text content for variant Engagement",
|
|
42
|
+
},
|
|
43
|
+
secondaryText: {
|
|
44
|
+
control: "text",
|
|
45
|
+
description: "The secondary text content for variant Engagement",
|
|
46
|
+
},
|
|
47
|
+
},
|
|
48
|
+
} satisfies Meta<ThumbnailTagsProps>
|
|
49
|
+
|
|
50
|
+
export default meta
|
|
51
|
+
type Story = StoryObj<ThumbnailTagsProps>
|
|
52
|
+
|
|
53
|
+
export const Default: Story = {
|
|
54
|
+
args: {
|
|
55
|
+
variant: "promotional",
|
|
56
|
+
text: "30% off",
|
|
57
|
+
},
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
export const PromotionalTag = {
|
|
61
|
+
args: {
|
|
62
|
+
variant: "promotional",
|
|
63
|
+
text: "30% off",
|
|
64
|
+
},
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
export const CheckedTag: Story = {
|
|
68
|
+
args: {
|
|
69
|
+
variant: "checked",
|
|
70
|
+
},
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
export const EngagementTag: Story = {
|
|
74
|
+
args: {
|
|
75
|
+
variant: "engagement",
|
|
76
|
+
primaryText: "999M+",
|
|
77
|
+
secondaryText: "Plays",
|
|
78
|
+
},
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
export const TopTenTag: Story = {
|
|
82
|
+
args: {
|
|
83
|
+
variant: "top10",
|
|
84
|
+
},
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
export const CompletedSeriesTag: Story = {
|
|
88
|
+
args: {
|
|
89
|
+
variant: "completed-series",
|
|
90
|
+
},
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
// Collection showing all variants
|
|
94
|
+
export const AllVariants: Story = {
|
|
95
|
+
args: {
|
|
96
|
+
...Default.args,
|
|
97
|
+
},
|
|
98
|
+
render: () => (
|
|
99
|
+
<div className="flex flex-col gap-6">
|
|
100
|
+
<div className="space-y-4">
|
|
101
|
+
<h3 className="text-lg font-semibold text-white">Promotional Tag</h3>
|
|
102
|
+
<div className="flex gap-4">
|
|
103
|
+
<ThumbnailTags variant="promotional" text="30% off" />
|
|
104
|
+
<ThumbnailTags variant="promotional" text="NEW" />
|
|
105
|
+
<ThumbnailTags variant="promotional" text="HOT" />
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
108
|
+
|
|
109
|
+
<div className="space-y-4">
|
|
110
|
+
<h3 className="text-lg font-semibold text-white">Checked Tag</h3>
|
|
111
|
+
<div className="flex gap-4">
|
|
112
|
+
<ThumbnailTags variant="checked" />
|
|
113
|
+
<ThumbnailTags variant="checked" />
|
|
114
|
+
<ThumbnailTags variant="checked" />
|
|
115
|
+
</div>
|
|
116
|
+
</div>
|
|
117
|
+
|
|
118
|
+
<div className="space-y-4">
|
|
119
|
+
<h3 className="text-lg font-semibold text-white">Engagement Tag</h3>
|
|
120
|
+
<div className="flex gap-4">
|
|
121
|
+
<ThumbnailTags
|
|
122
|
+
variant="engagement"
|
|
123
|
+
primaryText="999M+"
|
|
124
|
+
secondaryText="Plays"
|
|
125
|
+
/>
|
|
126
|
+
<ThumbnailTags
|
|
127
|
+
variant="engagement"
|
|
128
|
+
primaryText="1.2K"
|
|
129
|
+
secondaryText="Views"
|
|
130
|
+
/>
|
|
131
|
+
<ThumbnailTags
|
|
132
|
+
variant="engagement"
|
|
133
|
+
primaryText="50M+"
|
|
134
|
+
secondaryText="Hits"
|
|
135
|
+
/>
|
|
136
|
+
</div>
|
|
137
|
+
</div>
|
|
138
|
+
|
|
139
|
+
<div className="space-y-4">
|
|
140
|
+
<h3 className="text-lg font-semibold text-white">Top 10 Tag</h3>
|
|
141
|
+
<div className="flex gap-4">
|
|
142
|
+
<ThumbnailTags variant="top10" />
|
|
143
|
+
</div>
|
|
144
|
+
</div>
|
|
145
|
+
|
|
146
|
+
<div className="space-y-4">
|
|
147
|
+
<h3 className="text-lg font-semibold text-white">
|
|
148
|
+
Completed Series Tag
|
|
149
|
+
</h3>
|
|
150
|
+
<div className="flex gap-4">
|
|
151
|
+
<ThumbnailTags variant="completed-series" />
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
</div>
|
|
155
|
+
),
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
// Showcase different use cases
|
|
159
|
+
export const UseCases: Story = {
|
|
160
|
+
args: {
|
|
161
|
+
...Default.args,
|
|
162
|
+
},
|
|
163
|
+
render: () => (
|
|
164
|
+
<div className="space-y-8">
|
|
165
|
+
<div className="space-y-4">
|
|
166
|
+
<h3 className="text-lg font-semibold text-white">Promotional Tags</h3>
|
|
167
|
+
<div className="flex gap-4">
|
|
168
|
+
<ThumbnailTags variant="promotional" text="30% off" />
|
|
169
|
+
<ThumbnailTags variant="promotional" text="FREE" />
|
|
170
|
+
<ThumbnailTags variant="promotional" text="LIMITED" />
|
|
171
|
+
</div>
|
|
172
|
+
</div>
|
|
173
|
+
|
|
174
|
+
<div className="space-y-4">
|
|
175
|
+
<h3 className="text-lg font-semibold text-white">Status Indicators</h3>
|
|
176
|
+
<div className="flex gap-4">
|
|
177
|
+
<ThumbnailTags variant="checked" />
|
|
178
|
+
</div>
|
|
179
|
+
</div>
|
|
180
|
+
|
|
181
|
+
<div className="space-y-4">
|
|
182
|
+
<h3 className="text-lg font-semibold text-white">Engagement Metrics</h3>
|
|
183
|
+
<div className="flex gap-4">
|
|
184
|
+
<ThumbnailTags
|
|
185
|
+
variant="engagement"
|
|
186
|
+
primaryText="2.5M+"
|
|
187
|
+
secondaryText="Plays"
|
|
188
|
+
/>
|
|
189
|
+
<ThumbnailTags
|
|
190
|
+
variant="engagement"
|
|
191
|
+
primaryText="150K"
|
|
192
|
+
secondaryText="Likes"
|
|
193
|
+
/>
|
|
194
|
+
<ThumbnailTags
|
|
195
|
+
variant="engagement"
|
|
196
|
+
primaryText="25K"
|
|
197
|
+
secondaryText="Shares"
|
|
198
|
+
/>
|
|
199
|
+
</div>
|
|
200
|
+
</div>
|
|
201
|
+
|
|
202
|
+
<div className="space-y-4">
|
|
203
|
+
<h3 className="text-lg font-semibold text-white">Achievement Badges</h3>
|
|
204
|
+
<div className="flex gap-4">
|
|
205
|
+
<ThumbnailTags variant="top10" />
|
|
206
|
+
<ThumbnailTags variant="completed-series" />
|
|
207
|
+
</div>
|
|
208
|
+
</div>
|
|
209
|
+
</div>
|
|
210
|
+
),
|
|
211
|
+
}
|
|
@@ -0,0 +1,294 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
|
|
3
|
+
type ThumbnailTagsProps =
|
|
4
|
+
| {
|
|
5
|
+
variant: "promotional"
|
|
6
|
+
text: string
|
|
7
|
+
}
|
|
8
|
+
| {
|
|
9
|
+
variant: "engagement"
|
|
10
|
+
primaryText: string
|
|
11
|
+
secondaryText: string
|
|
12
|
+
}
|
|
13
|
+
| {
|
|
14
|
+
variant: "checked" | "top10" | "completed-series"
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export function ThumbnailTags(props: ThumbnailTagsProps) {
|
|
18
|
+
const { variant } = props
|
|
19
|
+
if (variant === "promotional") {
|
|
20
|
+
return (
|
|
21
|
+
<div className="flex h-4 w-14 gap-0.5">
|
|
22
|
+
<p className="bg-fm-neongreen-500 text-fm-neutral-100 font-fm-brand font-fm-xs text-fm-xs w-11 text-center uppercase">
|
|
23
|
+
{props.text}
|
|
24
|
+
</p>
|
|
25
|
+
|
|
26
|
+
<svg
|
|
27
|
+
width="12"
|
|
28
|
+
height="16"
|
|
29
|
+
viewBox="0 0 12 16"
|
|
30
|
+
fill="none"
|
|
31
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
32
|
+
>
|
|
33
|
+
<g clipPath="url(#clip0_3_736)">
|
|
34
|
+
<rect
|
|
35
|
+
x="-5"
|
|
36
|
+
y="8.70703"
|
|
37
|
+
width="1"
|
|
38
|
+
height="15"
|
|
39
|
+
transform="rotate(-45 -5 8.70703)"
|
|
40
|
+
fill="#C0FF00"
|
|
41
|
+
/>
|
|
42
|
+
<rect
|
|
43
|
+
x="-2"
|
|
44
|
+
y="8.70703"
|
|
45
|
+
width="1"
|
|
46
|
+
height="15"
|
|
47
|
+
transform="rotate(-45 -2 8.70703)"
|
|
48
|
+
fill="#C0FF00"
|
|
49
|
+
/>
|
|
50
|
+
<rect
|
|
51
|
+
x="-1.75366"
|
|
52
|
+
y="5.95337"
|
|
53
|
+
width="1"
|
|
54
|
+
height="18.8943"
|
|
55
|
+
transform="rotate(-45 -1.75366 5.95337)"
|
|
56
|
+
fill="#C0FF00"
|
|
57
|
+
/>
|
|
58
|
+
<rect
|
|
59
|
+
x="-1.52417"
|
|
60
|
+
y="3.18286"
|
|
61
|
+
width="1"
|
|
62
|
+
height="22.8124"
|
|
63
|
+
transform="rotate(-45 -1.52417 3.18286)"
|
|
64
|
+
fill="#C0FF00"
|
|
65
|
+
/>
|
|
66
|
+
<rect
|
|
67
|
+
x="-1.28052"
|
|
68
|
+
y="0.426514"
|
|
69
|
+
width="1"
|
|
70
|
+
height="26.7104"
|
|
71
|
+
transform="rotate(-45 -1.28052 0.426514)"
|
|
72
|
+
fill="#C0FF00"
|
|
73
|
+
/>
|
|
74
|
+
<rect
|
|
75
|
+
x="0.911133"
|
|
76
|
+
y="-0.381836"
|
|
77
|
+
width="1"
|
|
78
|
+
height="27.8539"
|
|
79
|
+
transform="rotate(-45 0.911133 -0.381836)"
|
|
80
|
+
fill="#C0FF00"
|
|
81
|
+
/>
|
|
82
|
+
<rect
|
|
83
|
+
x="4"
|
|
84
|
+
y="-0.381836"
|
|
85
|
+
width="1"
|
|
86
|
+
height="27.8539"
|
|
87
|
+
transform="rotate(-45 4 -0.381836)"
|
|
88
|
+
fill="#C0FF00"
|
|
89
|
+
/>
|
|
90
|
+
<rect
|
|
91
|
+
x="7.08887"
|
|
92
|
+
y="-0.381836"
|
|
93
|
+
width="1"
|
|
94
|
+
height="27.8539"
|
|
95
|
+
transform="rotate(-45 7.08887 -0.381836)"
|
|
96
|
+
fill="#C0FF00"
|
|
97
|
+
/>
|
|
98
|
+
<rect
|
|
99
|
+
x="10.1777"
|
|
100
|
+
y="-0.381836"
|
|
101
|
+
width="1"
|
|
102
|
+
height="27.8539"
|
|
103
|
+
transform="rotate(-45 10.1777 -0.381836)"
|
|
104
|
+
fill="#C0FF00"
|
|
105
|
+
/>
|
|
106
|
+
</g>
|
|
107
|
+
<defs>
|
|
108
|
+
<clipPath id="clip0_3_736">
|
|
109
|
+
<rect width="12" height="16" fill="white" />
|
|
110
|
+
</clipPath>
|
|
111
|
+
</defs>
|
|
112
|
+
</svg>
|
|
113
|
+
</div>
|
|
114
|
+
)
|
|
115
|
+
}
|
|
116
|
+
if (variant === "checked") {
|
|
117
|
+
return (
|
|
118
|
+
<svg
|
|
119
|
+
width="29"
|
|
120
|
+
height="16"
|
|
121
|
+
viewBox="0 0 29 16"
|
|
122
|
+
fill="none"
|
|
123
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
124
|
+
>
|
|
125
|
+
<g opacity="0.5">
|
|
126
|
+
<path
|
|
127
|
+
fillRule="evenodd"
|
|
128
|
+
clipRule="evenodd"
|
|
129
|
+
d="M12 15.5024C8.08937 15.2353 5 11.9784 5 7.99994C5 4.0215 8.08937 0.764629 12 0.497437promotional5.5024Z"
|
|
130
|
+
fill="#004719"
|
|
131
|
+
/>
|
|
132
|
+
<path
|
|
133
|
+
fillRule="evenodd"
|
|
134
|
+
clipRule="evenodd"
|
|
135
|
+
d="M4 12.9317C1.71552 12.4529 4.76837e-07 10.4268 4.76837e-07 7.99999C4.76837e-07 5.5732 1.71552 3.5471 4 3.06824promotional2.9317Z"
|
|
136
|
+
fill="#004719"
|
|
137
|
+
/>
|
|
138
|
+
</g>
|
|
139
|
+
<path
|
|
140
|
+
d="M13 8C13 3.58172 16.5817 0 21 0C25.4183 0 29 3.58172 29 8C29 12.4183 25.4183 16 21 16C16.5817 16 13 12.4183 13 8Z"
|
|
141
|
+
fill="#001A09"
|
|
142
|
+
/>
|
|
143
|
+
<path
|
|
144
|
+
d="M23 6.33337L20 10L18.6667 8.66671M27.1667 8.00004C27.1667 11.4058 24.4058 14.1667 21 14.1667C17.5943 14.1667 14.8334 11.4058 14.8334 8.00004C14.8334 4.59428 17.5943 1.83337 21 1.83337C24.4058 1.83337 27.1667 4.59428 27.1667 8.00004Z"
|
|
145
|
+
stroke="#C0FF00"
|
|
146
|
+
strokeWidth="1.5"
|
|
147
|
+
strokeLinecap="square"
|
|
148
|
+
/>
|
|
149
|
+
</svg>
|
|
150
|
+
)
|
|
151
|
+
}
|
|
152
|
+
if (variant === "engagement") {
|
|
153
|
+
return (
|
|
154
|
+
<div className="flex h-4 w-14 gap-0.5">
|
|
155
|
+
<div className="bg-fm-primary-400 text-fm-primary font-fm-brand flex uppercase">
|
|
156
|
+
<p className="text-fm-sm flex w-9 items-center justify-center px-1">
|
|
157
|
+
{props.primaryText}
|
|
158
|
+
</p>
|
|
159
|
+
<div className="flex w-1.5 items-center justify-center">
|
|
160
|
+
<span className="rotate-90 text-[5px] leading-none whitespace-nowrap">
|
|
161
|
+
{props.secondaryText}
|
|
162
|
+
</span>
|
|
163
|
+
</div>
|
|
164
|
+
</div>
|
|
165
|
+
<svg
|
|
166
|
+
width="9"
|
|
167
|
+
height="16"
|
|
168
|
+
viewBox="0 0 9 16"
|
|
169
|
+
fill="none"
|
|
170
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
171
|
+
>
|
|
172
|
+
<g clipPath="url(#clip0_17092_166916)">
|
|
173
|
+
<path
|
|
174
|
+
fillRule="evenodd"
|
|
175
|
+
clipRule="evenodd"
|
|
176
|
+
d="M1 14.2222C4.43644 14.2222 7.22222 11.4364 7.22222 8C7.22222 4.56356 4.43644 1.77778 1 1.77778C-2.43644 1.77778 -5.22222 4.56356 -5.22222 8C-5.22222 11.4364 -2.43644 14.2222 1 14.2222ZM1 16C5.41828 16 9 12.4183 9 8C9 3.58172 5.41828 0 1 0C-3.41828 0 -7 3.58172 -7 8C-7 12.4183 -3.41828 16 1 16Z"
|
|
177
|
+
fill="#D1111E"
|
|
178
|
+
/>
|
|
179
|
+
<path d="M0 4V12L6 8L0 4Z" fill="#D1111E" />
|
|
180
|
+
</g>
|
|
181
|
+
<defs>
|
|
182
|
+
<clipPath id="clip0_17092_166916">
|
|
183
|
+
<rect width="9" height="16" fill="white" />
|
|
184
|
+
</clipPath>
|
|
185
|
+
</defs>
|
|
186
|
+
</svg>
|
|
187
|
+
</div>
|
|
188
|
+
)
|
|
189
|
+
}
|
|
190
|
+
//top 10
|
|
191
|
+
if (variant === "top10") {
|
|
192
|
+
return (
|
|
193
|
+
<svg
|
|
194
|
+
width="28"
|
|
195
|
+
height="20"
|
|
196
|
+
viewBox="0 0 28 20"
|
|
197
|
+
fill="none"
|
|
198
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
199
|
+
>
|
|
200
|
+
<g clipPath="url(#clip0_3_790)">
|
|
201
|
+
<path
|
|
202
|
+
fillRule="evenodd"
|
|
203
|
+
clipRule="evenodd"
|
|
204
|
+
d="M6.35478 13.065L7.86779 20L10.0495 10L7.86779 0L6.35478 6.93502L5.39565 1L3.94118 10L5.39565 19L6.35478 13.065ZM2.69799 2L3.42522 10L2.69799 18L1.97076 10L2.69799 2ZM1.45446 10L0.72723 5L0 10L0.72723 15L1.45446 10Z"
|
|
205
|
+
fill="#D1111E"
|
|
206
|
+
/>
|
|
207
|
+
<rect
|
|
208
|
+
width="20"
|
|
209
|
+
height="20"
|
|
210
|
+
transform="translate(7.87952)"
|
|
211
|
+
fill="#D1111E"
|
|
212
|
+
/>
|
|
213
|
+
<path
|
|
214
|
+
d="M11.9914 9V3H10.2914V2H14.6914V3H12.9914V9H11.9914ZM17.0915 9C16.0615 9 15.2115 8.18 15.2115 7.19V3.8C15.2115 2.8 16.0615 2 17.0915 2H17.9315C18.9715 2 19.8115 2.8 19.8115 3.8V7.19C19.8115 8.18 18.9715 9 17.9315 9H17.0915ZM16.2015 7.19C16.2015 7.63 16.6115 7.99 17.0915 7.99H17.9315C18.4115 7.99 18.8215 7.63 18.8215 7.19V3.8C18.8215 3.35 18.4315 3 17.9315 3H17.0915C16.5915 3 16.2015 3.36 16.2015 3.8V7.19ZM20.9751 9V2H23.5751C24.5751 2 25.3751 2.8 25.3751 3.8V4.4C25.3751 5.4 24.5751 6.2 23.5751 6.2H21.9751V9H20.9751ZM21.9751 5.2H23.5751C24.0251 5.2 24.3751 4.85 24.3751 4.4V3.8C24.3751 3.35 24.0251 3 23.5751 3H21.9751V5.2Z"
|
|
215
|
+
fill="white"
|
|
216
|
+
/>
|
|
217
|
+
<path
|
|
218
|
+
d="M13.0754 18V17H14.7754V12.16L13.0754 13.16V12L14.7754 11H15.7754V17H17.4754V18H13.0754ZM20.027 18C18.997 18 18.147 17.18 18.147 16.19V12.8C18.147 11.8 18.997 11 20.027 11H20.867C21.907 11 22.747 11.8 22.747 12.8V16.19C22.747 17.18 21.907 18 20.867 18H20.027ZM19.137 16.19C19.137 16.63 19.547 16.99 20.027 16.99H20.867C20.997 16.99 21.127 16.96 21.237 16.91L19.137 13.49V16.19ZM19.497 12.15L21.757 15.84V12.8C21.757 12.35 21.367 12 20.867 12H20.027C19.827 12 19.647 12.06 19.497 12.15Z"
|
|
219
|
+
fill="white"
|
|
220
|
+
/>
|
|
221
|
+
</g>
|
|
222
|
+
<defs>
|
|
223
|
+
<clipPath id="clip0_3_790">
|
|
224
|
+
<rect width="27.8795" height="20" fill="white" />
|
|
225
|
+
</clipPath>
|
|
226
|
+
</defs>
|
|
227
|
+
</svg>
|
|
228
|
+
)
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
// completed series
|
|
232
|
+
if (variant === "completed-series") {
|
|
233
|
+
return (
|
|
234
|
+
<svg
|
|
235
|
+
width="136"
|
|
236
|
+
height="16"
|
|
237
|
+
viewBox="0 0 136 16"
|
|
238
|
+
fill="none"
|
|
239
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
240
|
+
>
|
|
241
|
+
<g opacity="0.5">
|
|
242
|
+
<path
|
|
243
|
+
fillRule="evenodd"
|
|
244
|
+
clipRule="evenodd"
|
|
245
|
+
d="M12 15.9381C8.05369 15.446 5 12.0796 5 8C5 3.92038 8.05369 0.553988 12 0.0618896V15.9381Z"
|
|
246
|
+
fill="#004719"
|
|
247
|
+
/>
|
|
248
|
+
<path
|
|
249
|
+
fillRule="evenodd"
|
|
250
|
+
clipRule="evenodd"
|
|
251
|
+
d="M4 12.9881C1.71161 12.4817 0 10.4408 0 8.00004C0 5.55931 1.71161 3.51834 4 3.01196V12.9881Z"
|
|
252
|
+
fill="#004719"
|
|
253
|
+
/>
|
|
254
|
+
</g>
|
|
255
|
+
<path
|
|
256
|
+
d="M13 8C13 3.58172 16.5817 0 21 0H115C119.418 0 123 3.58172 123 8C123 12.4183 119.418 16 115 16H21C16.5817 16 13 12.4183 13 8Z"
|
|
257
|
+
fill="#001A09"
|
|
258
|
+
/>
|
|
259
|
+
<path
|
|
260
|
+
d="M23 6.33337L20 10L18.6666 8.66671M27.1666 8.00004C27.1666 11.4058 24.4057 14.1667 21 14.1667C17.5942 14.1667 14.8333 11.4058 14.8333 8.00004C14.8333 4.59428 17.5942 1.83337 21 1.83337C24.4057 1.83337 27.1666 4.59428 27.1666 8.00004Z"
|
|
261
|
+
stroke="#C0FF00"
|
|
262
|
+
strokeWidth="1.5"
|
|
263
|
+
strokeLinecap="square"
|
|
264
|
+
/>
|
|
265
|
+
<path
|
|
266
|
+
d="M33.34 12C32.35 12 31.54 11.18 31.54 10.19V6.8C31.54 5.8 32.35 5 33.34 5H34.14C35.14 5 35.94 5.8 35.94 6.8V7.35H34.94V6.8C34.94 6.35 34.59 6 34.14 6H33.34C32.89 6 32.54 6.36 32.54 6.8V10.19C32.54 10.63 32.9 10.99 33.34 10.99H34.14C34.58 10.99 34.94 10.63 34.94 10.19V9.64H35.94V10.19C35.94 11.18 35.14 12 34.14 12H33.34ZM39.352 12C38.322 12 37.472 11.18 37.472 10.19V6.8C37.472 5.8 38.322 5 39.352 5H40.192C41.232 5 42.072 5.8 42.072 6.8V10.19C42.072 11.18 41.232 12 40.192 12H39.352ZM38.462 10.19C38.462 10.63 38.872 10.99 39.352 10.99H40.192C40.672 10.99 41.082 10.63 41.082 10.19V6.8C41.082 6.35 40.692 6 40.192 6H39.352C38.852 6 38.462 6.36 38.462 6.8V10.19ZM43.8356 12V5H44.8956L46.3356 7.81L47.7756 5H48.8356V12H47.8356V6.98L46.6056 9.38H46.0656L44.8356 6.98V12H43.8356ZM50.6759 12V5H53.2759C54.2759 5 55.0759 5.8 55.0759 6.8V7.4C55.0759 8.4 54.2759 9.2 53.2759 9.2H51.6759V12H50.6759ZM51.6759 8.2H53.2759C53.7259 8.2 54.0759 7.85 54.0759 7.4V6.8C54.0759 6.35 53.7259 6 53.2759 6H51.6759V8.2ZM56.5884 12V5H57.5884V11H60.4684V12H56.5884ZM61.7977 12V5H65.7977V6H62.7977V7.83H65.4077V8.83H62.7977V11H65.7977V12H61.7977ZM68.6777 12V6H66.9777V5H71.3777V6H69.6777V12H68.6777ZM72.8024 12V5H76.8024V6H73.8024V7.83H76.4124V8.83H73.8024V11H76.8024V12H72.8024ZM78.4024 12V5H81.0024C81.9924 5 82.8024 5.8 82.8024 6.8V10.19C82.8024 11.18 81.9924 12 81.0024 12H78.4024ZM79.4024 10.99H81.0024C81.4424 10.99 81.8024 10.63 81.8024 10.19V6.8C81.8024 6.36 81.4524 6 81.0024 6H79.4024V10.99ZM88.5955 12C87.5655 12 86.7355 11.17 86.7355 10.14V9.74H87.7355V10.14C87.7355 10.61 88.1255 11 88.5955 11H89.2655C89.7755 11 90.1355 10.68 90.1355 10.24C90.1355 8.86 86.8355 8.56 86.8355 6.66C86.8355 5.68 87.6055 5 88.6955 5H89.1655C90.1955 5 91.0355 5.83 91.0355 6.86V7.16H90.0355V6.86C90.0355 6.38 89.6455 6 89.1655 6H88.6955C88.1555 6 87.8355 6.25 87.8355 6.66C87.8355 7.72 91.1355 8.13 91.1355 10.24C91.1355 11.24 90.3255 12 89.2655 12H88.5955ZM92.7317 12V5H96.7317V6H93.7317V7.83H96.3417V8.83H93.7317V11H96.7317V12H92.7317ZM101.632 12L100.362 9.2H99.3317V12H98.3317V5H100.932C101.932 5 102.732 5.8 102.732 6.8V7.4C102.732 8.23 102.182 8.92 101.422 9.13L102.732 12H101.632ZM99.3317 8.2H100.932C101.382 8.2 101.732 7.85 101.732 7.4V6.8C101.732 6.35 101.382 6 100.932 6H99.3317V8.2ZM104.013 12V11H105.713V6H104.013V5H108.413V6H106.713V11H108.413V12H104.013ZM109.952 12V5H113.952V6H110.952V7.83H113.562V8.83H110.952V11H113.952V12H109.952ZM117.172 12C116.142 12 115.312 11.17 115.312 10.14V9.74H116.312V10.14C116.312 10.61 116.702 11 117.172 11H117.842C118.352 11 118.712 10.68 118.712 10.24C118.712 8.86 115.412 8.56 115.412 6.66C115.412 5.68 116.182 5 117.272 5H117.742C118.772 5 119.612 5.83 119.612 6.86V7.16H118.612V6.86C118.612 6.38 118.222 6 117.742 6H117.272C116.732 6 116.412 6.25 116.412 6.66C116.412 7.72 119.712 8.13 119.712 10.24C119.712 11.24 118.902 12 117.842 12H117.172Z"
|
|
267
|
+
fill="#C0FF00"
|
|
268
|
+
/>
|
|
269
|
+
<g opacity="0.5">
|
|
270
|
+
<path
|
|
271
|
+
fillRule="evenodd"
|
|
272
|
+
clipRule="evenodd"
|
|
273
|
+
d="M124 15.9381C127.946 15.446 131 12.0796 131 8C131 3.92038 127.946 0.553988 124 0.0618896V15.9381Z"
|
|
274
|
+
fill="#004719"
|
|
275
|
+
/>
|
|
276
|
+
<path
|
|
277
|
+
fillRule="evenodd"
|
|
278
|
+
clipRule="evenodd"
|
|
279
|
+
d="M132 12.9978C134.289 12.4867 136 10.4431 136 7.99995C136 5.55678 134.289 3.51323 132 3.00208V12.9978Z"
|
|
280
|
+
fill="#004719"
|
|
281
|
+
/>
|
|
282
|
+
</g>
|
|
283
|
+
</svg>
|
|
284
|
+
)
|
|
285
|
+
}
|
|
286
|
+
// Default version
|
|
287
|
+
return (
|
|
288
|
+
<p className="bg-fm-neongreen-500 text-fm-neutral-100 font-fm-brand font-fm-xs text-fm-xs w-11 text-center uppercase">
|
|
289
|
+
30% off
|
|
290
|
+
</p>
|
|
291
|
+
)
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
export default ThumbnailTags
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export const meta = {
|
|
2
|
+
dependencies: {},
|
|
3
|
+
devDependencies: {},
|
|
4
|
+
internalDependencies: [],
|
|
5
|
+
tokens: [
|
|
6
|
+
"--color-fm-neutral-100",
|
|
7
|
+
"--color-fm-neongreen-500",
|
|
8
|
+
"--color-fm-primary",
|
|
9
|
+
"--color-fm-primary-400",
|
|
10
|
+
"--font-fm-brand",
|
|
11
|
+
"--font-fm-xs",
|
|
12
|
+
"--text-fm-xs",
|
|
13
|
+
"--text-fm-sm",
|
|
14
|
+
],
|
|
15
|
+
}
|