Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit0a526a5

Browse files
committed
Add premium badge
1 parent23af058 commit0a526a5

File tree

3 files changed

+36
-5
lines changed

3 files changed

+36
-5
lines changed

‎site/src/components/Badges/Badges.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,23 @@ export const EnterpriseBadge: FC = () => {
123123
);
124124
};
125125

126+
exportconstPremiumBadge:FC=()=>{
127+
return(
128+
<span
129+
css={[
130+
styles.badge,
131+
(theme)=>({
132+
backgroundColor:theme.roles.info.background,
133+
border:`1px solid${theme.roles.info.outline}`,
134+
color:theme.roles.info.text,
135+
}),
136+
]}
137+
>
138+
Premium
139+
</span>
140+
);
141+
};
142+
126143
exportconstPreviewBadge:FC=()=>{
127144
return(
128145
<span

‎site/src/components/Paywall/PopoverPaywall.stories.tsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,19 @@ const meta: Meta<typeof PopoverPaywall> = {
99
exportdefaultmeta;
1010
typeStory=StoryObj<typeofPopoverPaywall>;
1111

12-
constExample:Story={
12+
exportconstEnterprise:Story={
1313
args:{
1414
message:"Black Lotus",
1515
description:
1616
"Adds 3 mana of any single color of your choice to your mana pool, then is discarded. Tapping this artifact can be played as an interrupt.",
1717
},
1818
};
1919

20-
export{ExampleasPopoverPaywall};
20+
exportconstPremium:Story={
21+
args:{
22+
message:"Black Lotus",
23+
description:
24+
"Adds 3 mana of any single color of your choice to your mana pool, then is discarded. Tapping this artifact can be played as an interrupt.",
25+
licenseType:"premium",
26+
},
27+
};

‎site/src/components/Paywall/PopoverPaywall.tsx

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,29 @@ import TaskAltIcon from "@mui/icons-material/TaskAlt";
33
importButtonfrom"@mui/material/Button";
44
importLinkfrom"@mui/material/Link";
55
importtype{FC,ReactNode}from"react";
6-
import{EnterpriseBadge}from"components/Badges/Badges";
6+
import{EnterpriseBadge,PremiumBadge}from"components/Badges/Badges";
77
import{Stack}from"components/Stack/Stack";
88
import{docs}from"utils/docs";
99

1010
exportinterfacePopoverPaywallProps{
1111
message:string;
1212
description?:ReactNode;
1313
documentationLink?:string;
14+
licenseType?:"enterprise"|"premium";
1415
}
1516

1617
exportconstPopoverPaywall:FC<PopoverPaywallProps>=({
1718
message,
1819
description,
1920
documentationLink,
21+
licenseType="enterprise",
2022
})=>{
2123
return(
2224
<divcss={styles.root}>
2325
<div>
2426
<Stackdirection="row"alignItems="center"css={{marginBottom:18}}>
2527
<h5css={styles.title}>{message}</h5>
26-
<EnterpriseBadge/>
28+
{licenseType==="premium" ?<PremiumBadge/> :<EnterpriseBadge/>}
2729
</Stack>
2830

2931
{description&&<pcss={styles.description}>{description}</p>}
@@ -51,6 +53,11 @@ export const PopoverPaywall: FC<PopoverPaywallProps> = ({
5153
<licss={styles.feature}>
5254
<FeatureIcon/> Audit logs
5355
</li>
56+
{licenseType==="premium"&&(
57+
<licss={styles.feature}>
58+
<FeatureIcon/> Organizations
59+
</li>
60+
)}
5461
</ul>
5562
<Button
5663
href={docs("/enterprise")}
@@ -60,7 +67,7 @@ export const PopoverPaywall: FC<PopoverPaywallProps> = ({
6067
variant="outlined"
6168
color="neutral"
6269
>
63-
Learn about Enterprise
70+
Learn about{licenseType==="premium" ?"Premium" :"Enterprise"}
6471
</Button>
6572
</Stack>
6673
</div>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp