mirror of
https://github.com/Dokploy/website
synced 2025-06-26 18:16:01 +00:00
feat: add next-themes and sonner for improved theming and notifications
This commit is contained in:
@@ -6,6 +6,7 @@ import copy from "copy-to-clipboard";
|
||||
import {
|
||||
CheckCircle2,
|
||||
Copy,
|
||||
CopyIcon,
|
||||
Loader2,
|
||||
Mail,
|
||||
RefreshCcw,
|
||||
@@ -14,6 +15,7 @@ import {
|
||||
import Link from "next/link";
|
||||
import { redirect, useSearchParams } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
interface LicenseSessionResponse {
|
||||
type: "basic" | "professional" | "business";
|
||||
@@ -70,6 +72,7 @@ export default function LicenseSuccess() {
|
||||
copy(data?.key ?? "");
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
toast.success("Copied to clipboard");
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -169,15 +172,30 @@ export default function LicenseSuccess() {
|
||||
Steps to enable paid features
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span>1. Web Server</span>
|
||||
<li className="flex items-center gap-2">
|
||||
<span>1. Install Dokploy Instance on your server</span>
|
||||
<code className="text-green-500 font-mono bg-black rounded-lg p-1">
|
||||
curl -sSL https://dokploy.com/install.sh | sh
|
||||
</code>
|
||||
<CopyIcon
|
||||
className="w-4 h-4 cursor-pointer"
|
||||
onClick={() => {
|
||||
copy(
|
||||
"curl -sSL https://dokploy.com/install.sh | sh",
|
||||
);
|
||||
toast.success("Copied to clipboard");
|
||||
}}
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<span>2. Enable Paid Features</span>
|
||||
<span>2. Go to your web server section</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>3. Enable Paid Features</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
3. Copy the Key Below and Paste it in the license key
|
||||
4. Copy the Key Below and Paste it in the license key
|
||||
field and click on validate
|
||||
</span>
|
||||
</li>
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { Toaster } from "@/components/ui/sonner";
|
||||
import clsx from "clsx";
|
||||
import type { Metadata } from "next";
|
||||
import { NextIntlClientProvider } from "next-intl";
|
||||
@@ -63,6 +64,7 @@ export default async function RootLayout({
|
||||
<body>
|
||||
<NextIntlClientProvider messages={messages}>
|
||||
{children}
|
||||
<Toaster />
|
||||
</NextIntlClientProvider>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
31
apps/website/components/ui/sonner.tsx
Normal file
31
apps/website/components/ui/sonner.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
"use client";
|
||||
|
||||
import { useTheme } from "next-themes";
|
||||
import { Toaster as Sonner } from "sonner";
|
||||
|
||||
type ToasterProps = React.ComponentProps<typeof Sonner>;
|
||||
|
||||
const Toaster = ({ ...props }: ToasterProps) => {
|
||||
const { theme = "system" } = useTheme();
|
||||
|
||||
return (
|
||||
<Sonner
|
||||
theme={theme as ToasterProps["theme"]}
|
||||
className="toaster group"
|
||||
toastOptions={{
|
||||
classNames: {
|
||||
toast:
|
||||
"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
|
||||
description: "group-[.toast]:text-muted-foreground",
|
||||
actionButton:
|
||||
"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
|
||||
cancelButton:
|
||||
"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
|
||||
},
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export { Toaster };
|
||||
@@ -12,7 +12,6 @@
|
||||
},
|
||||
"browserslist": "defaults, not ie <= 11",
|
||||
"dependencies": {
|
||||
"copy-to-clipboard": "3.3.3",
|
||||
"@headlessui/react": "^2.2.0",
|
||||
"@headlessui/tailwindcss": "^0.2.0",
|
||||
"@prettier/plugin-xml": "^3.4.1",
|
||||
@@ -34,11 +33,13 @@
|
||||
"canvas-confetti": "^1.9.3",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.1.0",
|
||||
"copy-to-clipboard": "3.3.3",
|
||||
"framer-motion": "^11.3.19",
|
||||
"hast-util-to-jsx-runtime": "2.3.5",
|
||||
"lucide-react": "0.364.0",
|
||||
"next": "15.2.0",
|
||||
"next-intl": "^3.26.5",
|
||||
"next-themes": "^0.4.6",
|
||||
"prettier": "^3.3.3",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
@@ -52,6 +53,7 @@
|
||||
"sharp": "^0.33.5",
|
||||
"shiki": "1.22.2",
|
||||
"slugify": "^1.6.6",
|
||||
"sonner": "^2.0.1",
|
||||
"tailwind-merge": "^2.2.2",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
|
||||
Reference in New Issue
Block a user