Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit c020034

Browse files
jaaydenhjaaydenh
committed
feat: changes for premium page
1 parent a86a457 commit c020034

File tree

13 files changed

+281
-29
lines changed

13 files changed

+281
-29
lines changed

‎site/components.json

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
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+
}

‎site/package.json

+8-5
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,8 @@
5050
"@mui/system": "5.16.7",
5151
"@mui/utils": "5.16.6",
5252
"@mui/x-tree-view": "7.18.0",
53+
"@radix-ui/react-icons": "1.3.0",
54+
"@radix-ui/react-slot": "1.1.0",
5355
"@tanstack/react-query-devtools": "4.35.3",
5456
"@xterm/addon-canvas": "0.7.0",
5557
"@xterm/addon-fit": "0.10.0",
@@ -64,6 +66,8 @@
6466
"chartjs-adapter-date-fns": "3.0.0",
6567
"chartjs-plugin-annotation": "3.0.1",
6668
"chroma-js": "2.4.2",
69+
"class-variance-authority": "0.7.0",
70+
"clsx": "2.1.1",
6771
"color-convert": "2.0.1",
6872
"cron-parser": "4.9.0",
6973
"cronstrue": "2.50.0",
@@ -75,6 +79,7 @@
7579
"front-matter": "4.0.2",
7680
"jszip": "3.10.1",
7781
"lodash": "4.17.21",
82+
"lucide-react": "0.454.0",
7883
"monaco-editor": "0.52.0",
7984
"pretty-bytes": "6.1.1",
8085
"react": "18.3.1",
@@ -94,6 +99,8 @@
9499
"resize-observer-polyfill": "1.5.1",
95100
"rollup-plugin-visualizer": "5.12.0",
96101
"semver": "7.6.2",
102+
"tailwind-merge": "2.5.4",
103+
"tailwindcss-animate": "1.0.7",
97104
"tzdata": "1.0.40",
98105
"ua-parser-js": "1.0.33",
99106
"ufuzzy": "npm:@leeoniya/[email protected]",
@@ -170,11 +177,7 @@
170177
"vite-plugin-checker": "0.8.0",
171178
"vite-plugin-turbosnap": "1.0.3"
172179
},
173-
"browserslist": [
174-
"chrome 110",
175-
"firefox 111",
176-
"safari 16.0"
177-
],
180+
"browserslist": ["chrome 110", "firefox 111", "safari 16.0"],
178181
"resolutions": {
179182
"optionator": "0.9.3",
180183
"semver": "7.6.2"

‎site/pnpm-lock.yaml

+66
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import * as React from "react"
2+
import { Slot } from "@radix-ui/react-slot"
3+
import { cva, type VariantProps } from "class-variance-authority"
4+
5+
import { cn } from "@/lib/utils"
6+
7+
const buttonVariants = 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+
)
36+
37+
export interface ButtonProps
38+
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
39+
VariantProps<typeof buttonVariants> {
40+
asChild?: boolean
41+
}
42+
43+
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
44+
({ className, variant, size, asChild = false, ...props }, ref) => {
45+
const Comp = 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"
56+
57+
export { Button, buttonVariants }

‎site/src/index.css

+5
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
11
@tailwind base;
22
@tailwind components;
33
@tailwind utilities;
4+
@layer base {
5+
:root {
6+
--radius: 0.5rem
7+
}
8+
}

‎site/src/lib/utils.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { clsx, type ClassValue } from "clsx"
2+
import { twMerge } from "tailwind-merge"
3+
4+
export function cn(...inputs: ClassValue[]) {
5+
return twMerge(clsx(inputs))
6+
}

‎site/src/modules/management/SidebarView.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,7 @@ const DeploymentSettingsNavigation: FC<DeploymentSettingsNavigationProps> = ({
150150
</Stack>
151151
</SidebarNavSubItem>
152152
)}
153+
<SidebarNavSubItem href="premium">Premium</SidebarNavSubItem>
153154
</Stack>
154155
)}
155156
</div>

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

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { Loader } from "components/Loader/Loader";
2+
import { useDeploymentSettings } from "modules/management/DeploymentSettingsProvider";
3+
import type { FC } from "react";
4+
import { Helmet } from "react-helmet-async";
5+
import { pageTitle } from "utils/page";
6+
import { PremiumPageView } from "./PremiumPageView";
7+
import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
8+
9+
const PremiumPage: FC = () => {
10+
const { multiple_organizations: hasPremiumLicense } = useFeatureVisibility();
11+
12+
return (
13+
<>
14+
<Helmet>
15+
<title>{pageTitle("Premium Features")}</title>
16+
</Helmet>
17+
<PremiumPageView isPremium={hasPremiumLicense} />
18+
</>
19+
);
20+
};
21+
22+
export default PremiumPage;

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

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import type { SerpentOption } from "api/typesGenerated";
2+
import {
3+
Badges,
4+
DisabledBadge,
5+
EnabledBadge,
6+
PremiumBadge,
7+
} from "components/Badges/Badges";
8+
// import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
9+
// import { Stack } from "components/Stack/Stack";
10+
import { Button } from "@/components/ui/button";
11+
import type { FC } from "react";
12+
13+
export type PremiumPageViewProps = { isPremium: boolean };
14+
15+
export const PremiumPageView: FC<PremiumPageViewProps> = ({ isPremium }) => {
16+
return (
17+
<div className="pr-32">
18+
<div className="flex flex-row justify-between align-baseline">
19+
<div>
20+
<h1>Premium</h1>
21+
<p className="max-w-lg">
22+
Overview of all features that are not covered by the OSS license.
23+
</p>
24+
</div>
25+
<Button variant="default">Upgrade to Premium</Button>
26+
</div>
27+
28+
<h2>Organizations</h2>
29+
<p className="max-w-lg">
30+
Create multiple organizations within a single Coder deployment, allowing
31+
several platform teams to operate with isolated users, templates, and
32+
distinct underlying infrastructure.
33+
</p>
34+
35+
<h2>Appearance</h2>
36+
<p>Customize the look and feel of your Coder deployment.</p>
37+
38+
<h2>Observability</h2>
39+
<p>Allow auditors to monitor user operations in your deployment.</p>
40+
41+
<h2>Provisioners</h2>
42+
<p>Provisioners run your Terraform to create templates and workspaces.</p>
43+
44+
<h2>Custom Roles</h2>
45+
<p>
46+
Create custom roles to grant users a tailored set of granular
47+
permissions.
48+
</p>
49+
50+
<h2>IdP Sync</h2>
51+
<p>
52+
Configure group and role mappings to manage permissions outside of
53+
Coder.{" "}
54+
</p>
55+
</div>
56+
);
57+
};

0 commit comments

Comments
 (0)