feat: add next-themes and sonner for improved theming and notifications

This commit is contained in:
Mauricio Siu
2025-03-23 13:38:32 -06:00
parent 7df27e67b0
commit 56037ef88e
5 changed files with 86 additions and 5 deletions

View File

@@ -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>

View File

@@ -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>

View 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 };

View File

@@ -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",