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

Commit18da110

Browse files
committed
feat: implement Premium page with Tailwind and shadcn button
1 parent7af2abe commit18da110

File tree

9 files changed

+368
-127
lines changed

9 files changed

+368
-127
lines changed

‎.vscode/settings.json‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -249,10 +249,11 @@
249249
"playwright.reuseBrowser":true,
250250

251251
"[javascript][javascriptreact][json][jsonc][typescript][typescriptreact]": {
252-
"editor.defaultFormatter":"biomejs.biome"
253-
// "editor.codeActionsOnSave": {
254-
// "source.organizeImports.biome": "explicit"
255-
//}
252+
"editor.defaultFormatter":"biomejs.biome",
253+
"editor.codeActionsOnSave": {
254+
"quickfix.biome":"explicit"
255+
// "source.organizeImports.biome": "explicit"
256+
}
256257
},
257258

258259
"[css][html][markdown][yaml]": {

‎site/components.json‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
{
2-
"$schema":"https://ui.shadcn.com/schema.json",
3-
"style":"new-york",
4-
"rsc":false,
5-
"tsx":true,
6-
"tailwind": {
7-
"config":"tailwind.config.js",
8-
"css":"src/index.css",
9-
"baseColor":"zinc",
10-
"cssVariables":false,
11-
"prefix":""
12-
},
13-
"aliases": {
14-
"components":"@/components",
15-
"utils":"@/lib/utils",
16-
"ui":"@/components/ui",
17-
"lib":"@/lib",
18-
"hooks":"@/hooks"
19-
}
20-
}
2+
"$schema":"https://ui.shadcn.com/schema.json",
3+
"style":"new-york",
4+
"rsc":false,
5+
"tsx":true,
6+
"tailwind": {
7+
"config":"tailwind.config.js",
8+
"css":"src/index.css",
9+
"baseColor":"zinc",
10+
"cssVariables":true,
11+
"prefix":""
12+
},
13+
"aliases": {
14+
"components":"@/components",
15+
"utils":"@/lib/utils",
16+
"ui":"@/components/ui",
17+
"lib":"@/lib",
18+
"hooks":"@/hooks"
19+
}
20+
}

‎site/src/components/ui/button.tsx‎

Lines changed: 44 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,53 @@
1-
import*asReactfrom"react"
2-
import{Slot}from"@radix-ui/react-slot"
3-
import{cva,typeVariantProps}from"class-variance-authority"
1+
import{Slot}from"@radix-ui/react-slot";
2+
import{typeVariantProps,cva}from"class-variance-authority";
3+
import*asReactfrom"react";
44

5-
import{cn}from"@/lib/utils"
5+
import{cn}from"@/lib/utils";
66

77
constbuttonVariants=cva(
8-
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
9-
{
10-
variants:{
11-
variant:{
12-
default:
13-
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
14-
destructive:
15-
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
16-
outline:
17-
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
18-
secondary:
19-
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
20-
ghost:"hover:bg-accent hover:text-accent-foreground",
21-
link:"text-primary underline-offset-4 hover:underline",
22-
},
23-
size:{
24-
default:"h-9 px-4 py-2",
25-
sm:"h-8 rounded-md px-3 text-xs",
26-
lg:"h-10 rounded-md px-8",
27-
icon:"h-9 w-9",
28-
},
29-
},
30-
defaultVariants:{
31-
variant:"default",
32-
size:"default",
33-
},
34-
}
35-
)
8+
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-0 font-semibold",
9+
{
10+
variants:{
11+
variant:{
12+
default:
13+
"bg-surface-invert-primary text-content-invert hover:bg-surface-invert-secondary",
14+
outline:
15+
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
16+
subtle:
17+
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
18+
warning:
19+
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
20+
},
21+
size:{
22+
default:"h-10 px-3 py-2",
23+
sm:"h-8 px-2 text-xs",
24+
},
25+
},
26+
defaultVariants:{
27+
variant:"default",
28+
size:"default",
29+
},
30+
},
31+
);
3632

3733
exportinterfaceButtonProps
38-
extendsReact.ButtonHTMLAttributes<HTMLButtonElement>,
39-
VariantProps<typeofbuttonVariants>{
40-
asChild?:boolean
34+
extendsReact.ButtonHTMLAttributes<HTMLButtonElement>,
35+
VariantProps<typeofbuttonVariants>{
36+
asChild?:boolean;
4137
}
4238

4339
constButton=React.forwardRef<HTMLButtonElement,ButtonProps>(
44-
({ className, variant, size, asChild=false, ...props},ref)=>{
45-
constComp=asChild ?Slot :"button"
46-
return(
47-
<Comp
48-
className={cn(buttonVariants({ variant, size, className}))}
49-
ref={ref}
50-
{...props}
51-
/>
52-
)
53-
}
54-
)
55-
Button.displayName="Button"
40+
({ className, variant, size, asChild=false, ...props},ref)=>{
41+
constComp=asChild ?Slot :"button";
42+
return(
43+
<Comp
44+
className={cn(buttonVariants({ variant, size, className}))}
45+
ref={ref}
46+
{...props}
47+
/>
48+
);
49+
},
50+
);
51+
Button.displayName="Button";
5652

57-
export{Button,buttonVariants}
53+
export{Button,buttonVariants};

‎site/src/contexts/ThemeProvider.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,17 @@ export const ThemeProvider: FC<PropsWithChildren> = ({ children }) => {
5555
// The janky casting here is find because of the much more type safe fallback
5656
// We need to support `themePreference` being wrong anyway because the database
5757
// value could be anything, like an empty string.
58+
59+
useEffect(()=>{
60+
constroot=window.document.documentElement;
61+
root.classList.remove("light","dark");
62+
if(themePreference==="auto"){
63+
root.classList.add(preferredColorScheme);
64+
}else{
65+
root.classList.add(themePreference);
66+
}
67+
},[themePreference,preferredColorScheme]);
68+
5869
consttheme=
5970
themes[themePreferenceaskeyoftypeofthemes]??
6071
themes[preferredColorScheme];

‎site/src/index.css‎

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,29 @@
11
@tailwind base;
22
@tailwind components;
33
@tailwind utilities;
4+
45
@layer base {
5-
:root {
6-
--radius:0.5rem
7-
}
6+
:root {
7+
--content-primary:#27272a;
8+
--content-secondary:#52525b;
9+
--content-link:#2563eb;
10+
--content-invert:#fafafa;
11+
--surface-primary:#fafafa;
12+
--surface-secondary:#f4f4f5;
13+
--surface-tertiary:#e4e4e7;
14+
--surface-invert-primary:#27272a;
15+
--surface-invert-secondary:#3f3f46;
16+
--radius:0.5rem;
17+
}
18+
.dark {
19+
--content-primary:#fafafa;
20+
--content-secondary:#a1a1aa;
21+
--content-link:#60a5fa;
22+
--content-invert:#09090b;
23+
--surface-primary:#09090b;
24+
--surface-secondary:#18181b;
25+
--surface-tertiary:#27272a;
26+
--surface-invert-primary:#e4e4e7;
27+
--surface-invert-secondary:#a1a1aa;
28+
}
829
}

‎site/src/lib/utils.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import{clsx,typeClassValue}from"clsx"
2-
import{twMerge}from"tailwind-merge"
1+
import{typeClassValue,clsx}from"clsx";
2+
import{twMerge}from"tailwind-merge";
33

44
exportfunctioncn(...inputs:ClassValue[]){
5-
returntwMerge(clsx(inputs))
5+
returntwMerge(clsx(inputs));
66
}

‎site/src/pages/DeploymentSettingsPage/PremiumPage/PremiumPage.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
1-
import{Loader}from"components/Loader/Loader";
2-
import{useDeploymentSettings}from"modules/management/DeploymentSettingsProvider";
1+
import{useDashboard}from"modules/dashboard/useDashboard";
32
importtype{FC}from"react";
43
import{Helmet}from"react-helmet-async";
54
import{pageTitle}from"utils/page";
65
import{PremiumPageView}from"./PremiumPageView";
7-
import{useFeatureVisibility}from"modules/dashboard/useFeatureVisibility";
86

97
constPremiumPage:FC=()=>{
10-
const{multiple_organizations:hasPremiumLicense}=useFeatureVisibility();
8+
const{entitlements}=useDashboard();
119

1210
return(
1311
<>
1412
<Helmet>
1513
<title>{pageTitle("Premium Features")}</title>
1614
</Helmet>
17-
<PremiumPageViewisPremium={hasPremiumLicense}/>
15+
<PremiumPageViewisEnterprise={entitlements.has_license}/>
1816
</>
1917
);
2018
};

0 commit comments

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