diff --git a/.eslintrc.json b/.eslintrc.json index 0240716..b62ff2b 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,6 +1,24 @@ { - "extends": "next/core-web-vitals", + "$schema": "https://json.schemastore.org/eslintrc", + "root": true, + "extends": [ + "next/core-web-vitals", + "prettier", + "plugin:tailwindcss/recommended" + ], + "plugins": ["tailwindcss"], "rules": { - "@next/next/no-head-element": "off" + "@next/next/no-html-link-for-pages": "off", + "react/jsx-key": "off", + "tailwindcss/no-custom-classname": "off", + "tailwindcss/classnames-order": "error" + }, + "settings": { + "tailwindcss": { + "callees": ["cn"] + }, + "next": { + "rootDir": true + } } } diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..3aea320 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,5 @@ +dist +node_modules +.next +build +.contentlayer \ No newline at end of file diff --git a/.prettierrc.json b/.prettierrc.json deleted file mode 100644 index 48e90e8..0000000 --- a/.prettierrc.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "endOfLine": "lf", - "semi": false, - "singleQuote": false, - "tabWidth": 2, - "trailingComma": "es5" -} diff --git a/app/(auth)/login/page.tsx b/app/(auth)/login/page.tsx index 2045868..036cafb 100644 --- a/app/(auth)/login/page.tsx +++ b/app/(auth)/login/page.tsx @@ -1,14 +1,25 @@ +import { Metadata } from "next" import Link from "next/link" +import { cn } from "@/lib/utils" import { Icons } from "@/components/icons" -import { UserAuthForm } from "@/components/dashboard/user-auth-form" +import { buttonVariants } from "@/components/ui/button" +import { UserAuthForm } from "@/components/user-auth-form" + +export const metadata: Metadata = { + title: "Login", + description: "Login to your account", +} export default function LoginPage() { return (
<> @@ -18,14 +29,19 @@ export default function LoginPage() {
-

Welcome back

-

+

+ Welcome back +

+

Enter your email to sign in to your account

-

- +

+ Don't have an account? Sign Up

diff --git a/app/(auth)/register/page.tsx b/app/(auth)/register/page.tsx index ef26445..bd5dcaf 100644 --- a/app/(auth)/register/page.tsx +++ b/app/(auth)/register/page.tsx @@ -1,14 +1,24 @@ import Link from "next/link" +import { cn } from "@/lib/utils" import { Icons } from "@/components/icons" -import { UserAuthForm } from "@/components/dashboard/user-auth-form" +import { buttonVariants } from "@/components/ui/button" +import { UserAuthForm } from "@/components/user-auth-form" + +export const metadata = { + title: "Create an account", + description: "Create an account to get started.", +} export default function RegisterPage() { return (
Login @@ -17,19 +27,27 @@ export default function RegisterPage() {
-

Create an account

-

+

+ Create an account +

+

Enter your email below to create your account

-

+

By clicking continue, you agree to our{" "} - + Terms of Service {" "} and{" "} - + Privacy Policy . diff --git a/app/(dashboard)/dashboard/billing/loading.tsx b/app/(dashboard)/dashboard/billing/loading.tsx index 2019484..c1cde9c 100644 --- a/app/(dashboard)/dashboard/billing/loading.tsx +++ b/app/(dashboard)/dashboard/billing/loading.tsx @@ -1,6 +1,6 @@ -import { DashboardHeader } from "@/components/dashboard/header" -import { DashboardShell } from "@/components/dashboard/shell" -import { Card } from "@/ui/card" +import { DashboardHeader } from "@/components/header" +import { DashboardShell } from "@/components/shell" +import { Card } from "@/components/ui/card" export default function DashboardBillingLoading() { return ( diff --git a/app/(dashboard)/dashboard/billing/page.tsx b/app/(dashboard)/dashboard/billing/page.tsx index b701477..8630a15 100644 --- a/app/(dashboard)/dashboard/billing/page.tsx +++ b/app/(dashboard)/dashboard/billing/page.tsx @@ -1,26 +1,31 @@ import { redirect } from "next/navigation" -import { getCurrentUser } from "@/lib/session" import { authOptions } from "@/lib/auth" +import { getCurrentUser } from "@/lib/session" import { stripe } from "@/lib/stripe" -import { getUserSubscriptionPlan as getUserSubscriptionPlan } from "@/lib/subscription" -import { Card } from "@/ui/card" -import { DashboardHeader } from "@/components/dashboard/header" -import { DashboardShell } from "@/components/dashboard/shell" -import { BillingForm } from "@/components/dashboard/billing-form" +import { getUserSubscriptionPlan } from "@/lib/subscription" +import { BillingForm } from "@/components/billing-form" +import { DashboardHeader } from "@/components/header" +import { DashboardShell } from "@/components/shell" +import { Card } from "@/components/ui/card" + +export const metadata = { + title: "Billing", + description: "Manage billing and your subscription plan.", +} export default async function BillingPage() { const user = await getCurrentUser() if (!user) { - redirect(authOptions.pages.signIn) + redirect(authOptions?.pages?.signIn || "/login") } const subscriptionPlan = await getUserSubscriptionPlan(user.id) // If user has a pro plan, check cancel status on Stripe. let isCanceled = false - if (subscriptionPlan.isPro) { + if (subscriptionPlan.isPro && subscriptionPlan.stripeSubscriptionId) { const stripePlan = await stripe.subscriptions.retrieve( subscriptionPlan.stripeSubscriptionId ) diff --git a/app/(dashboard)/dashboard/layout.tsx b/app/(dashboard)/dashboard/layout.tsx index f4e08df..4893d10 100644 --- a/app/(dashboard)/dashboard/layout.tsx +++ b/app/(dashboard)/dashboard/layout.tsx @@ -2,9 +2,9 @@ import { notFound } from "next/navigation" import { dashboardConfig } from "@/config/dashboard" import { getCurrentUser } from "@/lib/session" -import { DashboardNav } from "@/components/dashboard/nav" -import { UserAccountNav } from "@/components/dashboard/user-account-nav" import { MainNav } from "@/components/main-nav" +import { DashboardNav } from "@/components/nav" +import { UserAccountNav } from "@/components/user-account-nav" interface DashboardLayoutProps { children?: React.ReactNode diff --git a/app/(dashboard)/dashboard/loading.tsx b/app/(dashboard)/dashboard/loading.tsx index 02bc9f4..57f2969 100644 --- a/app/(dashboard)/dashboard/loading.tsx +++ b/app/(dashboard)/dashboard/loading.tsx @@ -1,7 +1,7 @@ -import { DashboardHeader } from "@/components/dashboard/header" -import { DashboardShell } from "@/components/dashboard/shell" -import { PostCreateButton } from "@/components/dashboard/post-create-button" -import { PostItem } from "@/components/dashboard/post-item" +import { DashboardHeader } from "@/components/header" +import { PostCreateButton } from "@/components/post-create-button" +import { PostItem } from "@/components/post-item" +import { DashboardShell } from "@/components/shell" export default function DashboardLoading() { return ( diff --git a/app/(dashboard)/dashboard/page.tsx b/app/(dashboard)/dashboard/page.tsx index 6551560..ef847e5 100644 --- a/app/(dashboard)/dashboard/page.tsx +++ b/app/(dashboard)/dashboard/page.tsx @@ -1,15 +1,21 @@ -import { redirect } from "next/navigation" import { cache } from "react" +import { redirect } from "next/navigation" +import { User } from "@prisma/client" +import { authOptions } from "@/lib/auth" import { db } from "@/lib/db" import { getCurrentUser } from "@/lib/session" -import { User } from "@prisma/client" -import { authOptions } from "@/lib/auth" -import { DashboardHeader } from "@/components/dashboard/header" -import { PostCreateButton } from "@/components/dashboard/post-create-button" -import { DashboardShell } from "@/components/dashboard/shell" -import { PostItem } from "@/components/dashboard/post-item" -import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder" +import { cn } from "@/lib/utils" +import { EmptyPlaceholder } from "@/components/empty-placeholder" +import { DashboardHeader } from "@/components/header" +import { PostCreateButton } from "@/components/post-create-button" +import { PostItem } from "@/components/post-item" +import { DashboardShell } from "@/components/shell" +import { buttonVariants } from "@/components/ui/button" + +export const metadata = { + title: "Dashboard", +} const getPostsForUser = cache(async (userId: User["id"]) => { return await db.post.findMany({ @@ -32,7 +38,7 @@ export default async function DashboardPage() { const user = await getCurrentUser() if (!user) { - redirect(authOptions.pages.signIn) + redirect(authOptions?.pages?.signIn || "/login") } const posts = await getPostsForUser(user.id) @@ -56,7 +62,12 @@ export default async function DashboardPage() { You don't have any posts yet. Start creating content. - + )}

diff --git a/app/(dashboard)/dashboard/settings/loading.tsx b/app/(dashboard)/dashboard/settings/loading.tsx index e213ea8..613a5f5 100644 --- a/app/(dashboard)/dashboard/settings/loading.tsx +++ b/app/(dashboard)/dashboard/settings/loading.tsx @@ -1,6 +1,6 @@ -import { DashboardHeader } from "@/components/dashboard/header" -import { DashboardShell } from "@/components/dashboard/shell" -import { Card } from "@/ui/card" +import { DashboardHeader } from "@/components/header" +import { DashboardShell } from "@/components/shell" +import { Card } from "@/components/ui/card" export default function DashboardSettingsLoading() { return ( diff --git a/app/(dashboard)/dashboard/settings/page.tsx b/app/(dashboard)/dashboard/settings/page.tsx index d997dff..6e8545d 100644 --- a/app/(dashboard)/dashboard/settings/page.tsx +++ b/app/(dashboard)/dashboard/settings/page.tsx @@ -1,16 +1,21 @@ import { redirect } from "next/navigation" -import { getCurrentUser } from "@/lib/session" import { authOptions } from "@/lib/auth" -import { DashboardHeader } from "@/components/dashboard/header" -import { DashboardShell } from "@/components/dashboard/shell" -import { UserNameForm } from "@/components/dashboard/user-name-form" +import { getCurrentUser } from "@/lib/session" +import { DashboardHeader } from "@/components/header" +import { DashboardShell } from "@/components/shell" +import { UserNameForm } from "@/components/user-name-form" + +export const metadata = { + title: "Settings", + description: "Manage account and website settings.", +} export default async function SettingsPage() { const user = await getCurrentUser() if (!user) { - redirect(authOptions.pages.signIn) + redirect(authOptions?.pages?.signIn || "/login") } return ( @@ -20,7 +25,9 @@ export default async function SettingsPage() { text="Manage account and website settings." />
- + {user?.name ? ( + + ) : null}
) diff --git a/app/(docs)/docs/[[...slug]]/head.tsx b/app/(docs)/docs/[[...slug]]/head.tsx deleted file mode 100644 index 37cdf37..0000000 --- a/app/(docs)/docs/[[...slug]]/head.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { allDocs } from "contentlayer/generated" - -import MdxHead from "@/components/docs/mdx-head" - -export default function Head({ params }) { - const slug = params?.slug?.join("/") || "" - const doc = allDocs.find((doc) => doc.slugAsParams === slug) - return ( - - ) -} diff --git a/app/(docs)/docs/[[...slug]]/page.tsx b/app/(docs)/docs/[[...slug]]/page.tsx index 9517e35..7e26ef6 100644 --- a/app/(docs)/docs/[[...slug]]/page.tsx +++ b/app/(docs)/docs/[[...slug]]/page.tsx @@ -2,11 +2,14 @@ import { notFound } from "next/navigation" import { allDocs } from "contentlayer/generated" import { getTableOfContents } from "@/lib/toc" -import { Mdx } from "@/components/docs/mdx" -import { DashboardTableOfContents } from "@/components/docs/toc" -import { DocsPageHeader } from "@/components/docs/page-header" -import { DocsPager } from "@/components/docs/pager" +import { Mdx } from "@/components/mdx" +import { DocsPageHeader } from "@/components/page-header" +import { DocsPager } from "@/components/pager" +import { DashboardTableOfContents } from "@/components/toc" import "@/styles/mdx.css" +import { Metadata } from "next" + +import { absoluteUrl } from "@/lib/utils" interface DocPageProps { params: { @@ -14,6 +17,59 @@ interface DocPageProps { } } +async function getDocFromParams(params) { + const slug = params.slug?.join("/") || "" + const doc = allDocs.find((doc) => doc.slugAsParams === slug) + + if (!doc) { + null + } + + return doc +} + +export async function generateMetadata({ + params, +}: DocPageProps): Promise { + const doc = await getDocFromParams(params) + + if (!doc) { + return {} + } + + const url = process.env.NEXT_PUBLIC_APP_URL + + const ogUrl = new URL(`${url}/api/og`) + ogUrl.searchParams.set("heading", doc.description ?? doc.title) + ogUrl.searchParams.set("type", "Documentation") + ogUrl.searchParams.set("mode", "dark") + + return { + title: doc.title, + description: doc.description, + openGraph: { + title: doc.title, + description: doc.description, + type: "article", + url: absoluteUrl(doc.slug), + images: [ + { + url: ogUrl.toString(), + width: 1200, + height: 630, + alt: doc.title, + }, + ], + }, + twitter: { + card: "summary_large_image", + title: doc.title, + description: doc.description, + images: [ogUrl.toString()], + }, + } +} + export async function generateStaticParams(): Promise< DocPageProps["params"][] > { @@ -23,8 +79,7 @@ export async function generateStaticParams(): Promise< } export default async function DocPage({ params }: DocPageProps) { - const slug = params?.slug?.join("/") || "" - const doc = allDocs.find((doc) => doc.slugAsParams === slug) + const doc = await getDocFromParams(params) if (!doc) { notFound() diff --git a/app/(docs)/docs/layout.tsx b/app/(docs)/docs/layout.tsx index 41fc042..2b08491 100644 --- a/app/(docs)/docs/layout.tsx +++ b/app/(docs)/docs/layout.tsx @@ -1,5 +1,5 @@ import { docsConfig } from "@/config/docs" -import { DocsSidebarNav } from "@/components/docs/sidebar-nav" +import { DocsSidebarNav } from "@/components/sidebar-nav" interface DocsLayoutProps { children: React.ReactNode @@ -8,7 +8,7 @@ interface DocsLayoutProps { export default function DocsLayout({ children }: DocsLayoutProps) { return (
-
- - Build your own -
{posts?.length ? ( diff --git a/app/(marketing)/layout.tsx b/app/(marketing)/layout.tsx index 5b0172f..7c8543c 100644 --- a/app/(marketing)/layout.tsx +++ b/app/(marketing)/layout.tsx @@ -1,8 +1,10 @@ import Link from "next/link" import { marketingConfig } from "@/config/marketing" +import { cn } from "@/lib/utils" import { MainNav } from "@/components/main-nav" import { SiteFooter } from "@/components/site-footer" +import { buttonVariants } from "@/components/ui/button" interface MarketingLayoutProps { children: React.ReactNode @@ -19,7 +21,7 @@ export default async function MarketingLayout({
- + Get Started GitHub diff --git a/app/(marketing)/pricing/page.tsx b/app/(marketing)/pricing/page.tsx index e7d0adb..fb7f9a8 100644 --- a/app/(marketing)/pricing/page.tsx +++ b/app/(marketing)/pricing/page.tsx @@ -1,6 +1,12 @@ import Link from "next/link" +import { cn } from "@/lib/utils" import { Icons } from "@/components/icons" +import { buttonVariants } from "@/components/ui/button" + +export const metadata = { + title: "Pricing", +} export default function PricingPage() { return ( @@ -45,10 +51,7 @@ export default function PricingPage() {

$19

Billed Monthly

- + Get Started
diff --git a/app/head.tsx b/app/head.tsx deleted file mode 100644 index a945e66..0000000 --- a/app/head.tsx +++ /dev/null @@ -1,22 +0,0 @@ -export default function Head() { - return ( - <> - Taxonomy - - - - - - - - - - - - - - ) -} diff --git a/app/layout.tsx b/app/layout.tsx index ac86488..213f147 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,12 +1,11 @@ -import { Inter as FontSans } from "@next/font/google" +import { Inter as FontSans } from "next/font/google" import "@/styles/globals.css" - -import { cn } from "@/lib/utils" -import { Toaster } from "@/ui/toast" -import { Help } from "@/components/help" +import { siteConfig } from "@/config/site" +import { absoluteUrl, cn } from "@/lib/utils" import { Analytics } from "@/components/analytics" import { TailwindIndicator } from "@/components/tailwind-indicator" +import { Toaster } from "@/components/ui/toaster" const fontSans = FontSans({ subsets: ["latin"], @@ -17,6 +16,61 @@ interface RootLayoutProps { children: React.ReactNode } +export const metadata = { + title: { + default: siteConfig.name, + template: `%s | ${siteConfig.name}`, + }, + description: siteConfig.description, + keywords: [ + "Next.js", + "React", + "Tailwind CSS", + "Server Components", + "Radix UI", + ], + authors: [ + { + name: "shadcn", + url: "https://shadcn.com", + }, + ], + creator: "shadcn", + themeColor: [ + { media: "(prefers-color-scheme: light)", color: "white" }, + { media: "(prefers-color-scheme: dark)", color: "black" }, + ], + openGraph: { + type: "website", + locale: "en_US", + url: siteConfig.url, + title: siteConfig.name, + description: siteConfig.description, + siteName: siteConfig.name, + images: [ + { + url: absoluteUrl("/og.jpg"), + width: 1200, + height: 630, + alt: siteConfig.name, + }, + ], + }, + twitter: { + card: "summary_large_image", + title: siteConfig.name, + description: siteConfig.description, + images: [`${siteConfig.url}/og.jpg`], + creator: "@shadcn", + }, + icons: { + icon: "/favicon.ico", + shortcut: "/favicon-16x16.png", + apple: "/apple-touch-icon.png", + }, + manifest: `${siteConfig.url}/site.webmanifest`, +} + export default function RootLayout({ children }: RootLayoutProps) { return ( {children} - - + diff --git a/components/dashboard/billing-form.tsx b/components/billing-form.tsx similarity index 80% rename from components/dashboard/billing-form.tsx rename to components/billing-form.tsx index a7a3bc6..c0e2e30 100644 --- a/components/dashboard/billing-form.tsx +++ b/components/billing-form.tsx @@ -1,12 +1,13 @@ "use client" import * as React from "react" +import { toast } from "@/hooks/use-toast" import { UserSubscriptionPlan } from "types" import { cn, formatDate } from "@/lib/utils" -import { Card } from "@/ui/card" -import { toast } from "@/ui/toast" import { Icons } from "@/components/icons" +import { buttonVariants } from "@/components/ui/button" +import { Card } from "@/components/ui/card" interface BillingFormProps extends React.HTMLAttributes { subscriptionPlan: UserSubscriptionPlan & { @@ -31,8 +32,8 @@ export function BillingForm({ if (!response?.ok) { return toast({ title: "Something went wrong.", - message: "Please refresh the page and try again.", - type: "error", + description: "Please refresh the page and try again.", + variant: "destructive", }) } @@ -59,12 +60,7 @@ export function BillingForm({ - - -
-
-
-
-
- Or continue with -
-
- - - ) -} diff --git a/components/dashboard/editor.tsx b/components/editor.tsx similarity index 80% rename from components/dashboard/editor.tsx rename to components/editor.tsx index 0e4641b..3e08a61 100644 --- a/components/dashboard/editor.tsx +++ b/components/editor.tsx @@ -1,18 +1,20 @@ "use client" import * as React from "react" +import Link from "next/link" +import { useRouter } from "next/navigation" +import { toast } from "@/hooks/use-toast" import EditorJS from "@editorjs/editorjs" +import { zodResolver } from "@hookform/resolvers/zod" import { Post } from "@prisma/client" import { useForm } from "react-hook-form" -import Link from "next/link" import TextareaAutosize from "react-textarea-autosize" import * as z from "zod" -import { zodResolver } from "@hookform/resolvers/zod" -import { useRouter } from "next/navigation" +import { cn } from "@/lib/utils" import { postPatchSchema } from "@/lib/validations/post" -import { toast } from "@/ui/toast" import { Icons } from "@/components/icons" +import { buttonVariants } from "@/components/ui/button" interface EditorProps { post: Pick @@ -29,7 +31,7 @@ export function Editor({ post }: EditorProps) { const [isSaving, setIsSaving] = React.useState(false) const [isMounted, setIsMounted] = React.useState(false) - async function initializeEditor() { + const initializeEditor = React.useCallback(async () => { const EditorJS = (await import("@editorjs/editorjs")).default const Header = (await import("@editorjs/header")).default const Embed = (await import("@editorjs/embed")).default @@ -61,7 +63,7 @@ export function Editor({ post }: EditorProps) { }, }) } - } + }, [post]) React.useEffect(() => { if (typeof window !== "undefined") { @@ -75,15 +77,15 @@ export function Editor({ post }: EditorProps) { return () => { ref.current?.destroy() - ref.current = null + ref.current = undefined } } - }, [isMounted]) + }, [isMounted, initializeEditor]) async function onSubmit(data: FormData) { setIsSaving(true) - const blocks = await ref.current.save() + const blocks = await ref.current?.save() const response = await fetch(`/api/posts/${post.id}`, { method: "PATCH", @@ -101,16 +103,15 @@ export function Editor({ post }: EditorProps) { if (!response?.ok) { return toast({ title: "Something went wrong.", - message: "Your post was not saved. Please try again.", - type: "error", + description: "Your post was not saved. Please try again.", + variant: "destructive", }) } router.refresh() return toast({ - message: "Your post has been saved.", - type: "success", + description: "Your post has been saved.", }) } @@ -125,7 +126,7 @@ export function Editor({ post }: EditorProps) {
<> @@ -136,10 +137,7 @@ export function Editor({ post }: EditorProps) { {post.published ? "Published" : "Draft"}

- - {showMobileMenu && {children}} + {showMobileMenu && items && ( + {children} + )} ) } diff --git a/components/docs/mdx-head.tsx b/components/mdx-head.tsx similarity index 100% rename from components/docs/mdx-head.tsx rename to components/mdx-head.tsx index ff15ee6..2f7364f 100644 --- a/components/docs/mdx-head.tsx +++ b/components/mdx-head.tsx @@ -1,8 +1,8 @@ -import * as z from "zod" import { allDocuments } from "contentlayer/generated" +import * as z from "zod" -import { ogImageSchema } from "@/lib/validations/og" import { absoluteUrl } from "@/lib/utils" +import { ogImageSchema } from "@/lib/validations/og" interface MdxHeadProps { params: { diff --git a/components/docs/mdx.tsx b/components/mdx.tsx similarity index 94% rename from components/docs/mdx.tsx rename to components/mdx.tsx index 19937dc..eb7cc75 100644 --- a/components/docs/mdx.tsx +++ b/components/mdx.tsx @@ -3,8 +3,8 @@ import Image from "next/image" import { useMDXComponent } from "next-contentlayer/hooks" import { cn } from "@/lib/utils" -import { Callout } from "@/components/docs/callout" -import { Card } from "@/components/docs/card" +import { Callout } from "@/components/callout" +import { Card } from "@/components/card" const components = { h1: ({ className, ...props }) => ( @@ -153,7 +153,7 @@ const components = { code: ({ className, ...props }) => ( diff --git a/components/nav.tsx b/components/nav.tsx new file mode 100644 index 0000000..c9006d5 --- /dev/null +++ b/components/nav.tsx @@ -0,0 +1,44 @@ +"use client" + +import Link from "next/link" +import { usePathname } from "next/navigation" + +import { SidebarNavItem } from "types" +import { cn } from "@/lib/utils" +import { Icons } from "@/components/icons" + +interface DashboardNavProps { + items: SidebarNavItem[] +} + +export function DashboardNav({ items }: DashboardNavProps) { + const path = usePathname() + + if (!items?.length) { + return null + } + + return ( + + ) +} diff --git a/components/docs/page-header.tsx b/components/page-header.tsx similarity index 100% rename from components/docs/page-header.tsx rename to components/page-header.tsx diff --git a/components/docs/pager.tsx b/components/pager.tsx similarity index 100% rename from components/docs/pager.tsx rename to components/pager.tsx diff --git a/components/dashboard/post-create-button.tsx b/components/post-create-button.tsx similarity index 77% rename from components/dashboard/post-create-button.tsx rename to components/post-create-button.tsx index 12436e8..ad82ca6 100644 --- a/components/dashboard/post-create-button.tsx +++ b/components/post-create-button.tsx @@ -2,10 +2,11 @@ import * as React from "react" import { useRouter } from "next/navigation" +import { toast } from "@/hooks/use-toast" import { cn } from "@/lib/utils" import { Icons } from "@/components/icons" -import { toast } from "@/ui/toast" +import { buttonVariants } from "@/components/ui/button" interface PostCreateButtonProps extends React.HTMLAttributes {} @@ -36,15 +37,15 @@ export function PostCreateButton({ if (response.status === 402) { return toast({ title: "Limit of 3 posts reached.", - message: "Please upgrade to the PRO plan.", - type: "error", + description: "Please upgrade to the PRO plan.", + variant: "destructive", }) } return toast({ title: "Something went wrong.", - message: "Your post was not created. Please try again.", - type: "error", + description: "Your post was not created. Please try again.", + variant: "destructive", }) } @@ -60,7 +61,7 @@ export function PostCreateButton({