merge0
This commit is contained in:
Nicholas Koben Kao
@@ -31,7 +31,7 @@ export function CreateShareButton({
|
||||
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const workflow_version_id = workflow?.versions.find(
|
||||
(x) => x.version === version,
|
||||
(x) => x.version == version,
|
||||
)?.id;
|
||||
|
||||
return (
|
||||
|
||||
@@ -22,6 +22,7 @@ import {
|
||||
} from "@clerk/nextjs";
|
||||
import { Github, Menu } from "lucide-react";
|
||||
import meta from "next-gen/config";
|
||||
import { useFeatureFlagEnabled } from "posthog-js/react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useMediaQuery } from "usehooks-ts";
|
||||
|
||||
@@ -29,9 +30,13 @@ export function Navbar() {
|
||||
const { organization } = useOrganization();
|
||||
const _isDesktop = useMediaQuery("(min-width: 1024px)");
|
||||
const [isDesktop, setIsDesktop] = useState(true);
|
||||
|
||||
const pricingPlanFlagEnable = useFeatureFlagEnabled("pricing-plan");
|
||||
|
||||
useEffect(() => {
|
||||
setIsDesktop(_isDesktop);
|
||||
}, [_isDesktop]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-row items-center gap-4">
|
||||
@@ -85,6 +90,24 @@ export function Navbar() {
|
||||
</div>
|
||||
<div className="flex flex-row items-center gap-2">
|
||||
{isDesktop && <NavbarMenu />}
|
||||
{pricingPlanFlagEnable && (
|
||||
<>
|
||||
<Button
|
||||
asChild
|
||||
variant="link"
|
||||
className="rounded-full aspect-square p-2 mr-4"
|
||||
>
|
||||
<a href="/pricing">Pricing</a>
|
||||
</Button>
|
||||
<Button
|
||||
asChild
|
||||
variant="link"
|
||||
className="rounded-full aspect-square p-2 mr-4"
|
||||
>
|
||||
<a href="/usage">Usage</a>
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
<Button
|
||||
asChild
|
||||
variant="link"
|
||||
@@ -98,7 +121,11 @@ export function Navbar() {
|
||||
variant="outline"
|
||||
className="rounded-full aspect-square p-2"
|
||||
>
|
||||
<a target="_blank" href="https://github.com/BennyKok/comfyui-deploy" rel="noreferrer">
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://github.com/BennyKok/comfyui-deploy"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<Github />
|
||||
</a>
|
||||
</Button>
|
||||
|
||||
@@ -0,0 +1,381 @@
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Check, Info, Minus } from "lucide-react";
|
||||
|
||||
import { Fragment } from "react";
|
||||
import { auth } from "@clerk/nextjs";
|
||||
import { subscriptionPlanStatus } from "@/db/schema";
|
||||
import { getCurrentPlan } from "../server/getCurrentPlan";
|
||||
|
||||
const tiers = [
|
||||
{
|
||||
name: "Basic",
|
||||
id: "basic",
|
||||
// href: "/api/checkout?plan=basic",
|
||||
href: "/workflows",
|
||||
priceMonthly: "$0",
|
||||
description: "Instant Comfy UI API",
|
||||
mostPopular: false,
|
||||
},
|
||||
{
|
||||
name: "Pro",
|
||||
id: "pro",
|
||||
href: "/api/stripe/checkout?plan=pro",
|
||||
priceMonthly: "$20",
|
||||
description: "Accelerate Comfy UI",
|
||||
mostPopular: false,
|
||||
},
|
||||
{
|
||||
name: "Enterprise",
|
||||
id: "enterprise",
|
||||
href: "/api/stripe/checkout?plan=enterprise",
|
||||
priceMonthly: "$100",
|
||||
description: "Scale your Products",
|
||||
mostPopular: true,
|
||||
},
|
||||
];
|
||||
const sections = [
|
||||
{
|
||||
name: "Features",
|
||||
features: [
|
||||
{
|
||||
name: "GPU",
|
||||
tiers: { Basic: "T4", Pro: "T4, A10G", Enterprise: "T4, A10G, A100" },
|
||||
},
|
||||
{
|
||||
name: "Compute Credit",
|
||||
tiers: {
|
||||
Basic: (
|
||||
<Tooltip>
|
||||
<TooltipTrigger className="flex items-center justify-center gap-2">
|
||||
30k secs free + usage <Info size={14} />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<ul className="flex flex-col items-start justify-start">
|
||||
GPU Price /s = $0.00015
|
||||
<li>- T4 Multiplier = x1</li>
|
||||
</ul>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
),
|
||||
Pro: (
|
||||
<Tooltip>
|
||||
<TooltipTrigger className="flex items-center justify-center gap-2">
|
||||
30k secs free + usage <Info size={14} />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<ul className="flex flex-col items-start justify-start">
|
||||
GPU Price /s = $0.00015
|
||||
<li>- T4 Multiplier = x1</li>
|
||||
<li>- A10G Multiplier = x4</li>
|
||||
</ul>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
),
|
||||
Enterprise: (
|
||||
<Tooltip>
|
||||
<TooltipTrigger className="flex items-center justify-center gap-2">
|
||||
30k secs free + usage <Info size={14} />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<ul className="flex flex-col items-start justify-start">
|
||||
GPU Price /s = $0.00015
|
||||
<li>- T4 Multiplier = x1</li>
|
||||
<li>- A10G Multiplier = x4</li>
|
||||
<li>- A100 Multiplier = x7</li>
|
||||
</ul>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Workflows",
|
||||
tiers: { Basic: "2", Pro: "25", Enterprise: "Unlimited" },
|
||||
},
|
||||
{
|
||||
name: "Serverless Machines",
|
||||
tiers: { Basic: "2", Pro: "10", Enterprise: "Unlimited" },
|
||||
},
|
||||
{
|
||||
name: "Outputs Storage",
|
||||
tiers: { Basic: "2 GB", Pro: "10 GB", Enterprise: "Unlimited" },
|
||||
},
|
||||
{
|
||||
name: "Dedicated Support",
|
||||
tiers: { Enterprise: true },
|
||||
},
|
||||
{
|
||||
name: "Private Model Hosting",
|
||||
tiers: { Enterprise: "Coming Soon" },
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default async function PricingList() {
|
||||
const { userId, orgId } = auth();
|
||||
|
||||
if (!userId) {
|
||||
return <>No user id</>;
|
||||
}
|
||||
|
||||
const sub = await getCurrentPlan({ user_id: userId, org_id: orgId });
|
||||
|
||||
const getHrefFromTier = (tier: (typeof tiers)[0]) => {
|
||||
if (sub?.status == "active") {
|
||||
if (tier.id == sub?.plan) return "/api/stripe/dashboard";
|
||||
// This is actually cancelled
|
||||
if (sub.cancel_at_period_end) return tier.href;
|
||||
return "/api/stripe/dashboard?change=true";
|
||||
} else {
|
||||
return tier.href;
|
||||
}
|
||||
};
|
||||
const getNameFromTier = (tier: (typeof tiers)[0]) => {
|
||||
if (tier.id == sub?.plan && sub.status == "active") {
|
||||
return sub.cancel_at_period_end ? (
|
||||
<>
|
||||
Current <span className="text-2xs"> - Ending this period</span>
|
||||
</>
|
||||
) : (
|
||||
"Current"
|
||||
);
|
||||
}
|
||||
if (sub?.status == "active") {
|
||||
return "Get Started";
|
||||
} else {
|
||||
return "Get Started";
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white py-24 sm:py-32">
|
||||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div className="mx-auto max-w-4xl text-center">
|
||||
<h2 className="text-base font-semibold leading-7 text-indigo-600">
|
||||
Pricing
|
||||
</h2>
|
||||
<p className="mt-2 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
|
||||
Turn any workflow into API
|
||||
</p>
|
||||
</div>
|
||||
<p className="mx-auto mt-6 max-w-2xl text-center text-lg leading-8 text-gray-600">
|
||||
ComfyDeploy is now under technical preview.
|
||||
</p>
|
||||
|
||||
{/* xs to lg */}
|
||||
<div className="mx-auto mt-12 max-w-md space-y-8 sm:mt-16 lg:hidden">
|
||||
{tiers.map((tier) => (
|
||||
<section
|
||||
key={tier.id}
|
||||
className={cn(
|
||||
tier.mostPopular
|
||||
? "rounded-xl bg-gray-400/5 ring-1 ring-inset ring-gray-200"
|
||||
: "",
|
||||
"p-8",
|
||||
)}
|
||||
>
|
||||
<h3
|
||||
id={tier.id}
|
||||
className="text-sm font-semibold leading-6 text-gray-900"
|
||||
>
|
||||
{tier.name}
|
||||
</h3>
|
||||
<p className="mt-2 flex items-baseline gap-x-1 text-gray-900">
|
||||
<span className="text-4xl font-bold">{tier.priceMonthly}</span>
|
||||
<span className="text-sm font-semibold">/month</span>
|
||||
</p>
|
||||
<br></br>
|
||||
<div className="text-xl font-semibold">{tier.description}</div>
|
||||
<a
|
||||
href={getHrefFromTier(tier)}
|
||||
aria-describedby={tier.id}
|
||||
className={cn(
|
||||
tier.mostPopular
|
||||
? "bg-indigo-600 text-white hover:bg-indigo-500"
|
||||
: "text-indigo-600 ring-1 ring-inset ring-indigo-200 hover:ring-indigo-300",
|
||||
"mt-8 block rounded-md py-2 px-3 text-center text-sm font-semibold leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600",
|
||||
)}
|
||||
>
|
||||
{getNameFromTier(tier)}
|
||||
</a>
|
||||
<ul
|
||||
role="list"
|
||||
className="mt-10 space-y-4 text-sm leading-6 text-gray-900"
|
||||
>
|
||||
{sections.map((section) => (
|
||||
<li key={section.name}>
|
||||
<ul role="list" className="space-y-4">
|
||||
{section.features.map((feature) =>
|
||||
feature.tiers[tier.name] ? (
|
||||
<li key={feature.name} className="flex gap-x-3">
|
||||
<Check
|
||||
className="h-6 w-5 flex-none text-indigo-600"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span>
|
||||
{feature.name}{" "}
|
||||
{typeof feature.tiers[tier.name] === "string" ? (
|
||||
<span className="text-sm leading-6 text-gray-500">
|
||||
({feature.tiers[tier.name]})
|
||||
</span>
|
||||
) : null}
|
||||
</span>
|
||||
</li>
|
||||
) : null,
|
||||
)}
|
||||
</ul>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* lg+ */}
|
||||
<div className="isolate mt-20 hidden lg:block border-gray-100 border p-6 shadow-md rounded-lg">
|
||||
<div className="relative -mx-8">
|
||||
{tiers.some((tier) => tier.mostPopular) ? (
|
||||
<div className="absolute inset-x-4 inset-y-0 -z-10 flex">
|
||||
<div
|
||||
className="flex w-1/4 px-4"
|
||||
aria-hidden="true"
|
||||
style={{
|
||||
marginLeft: `${
|
||||
(tiers.findIndex((tier) => tier.mostPopular) + 1) * 25
|
||||
}%`,
|
||||
}}
|
||||
>
|
||||
<div className="w-full rounded-t-xl border-x border-t border-gray-900/10 bg-gray-400/5" />
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
<table className="w-full table-fixed border-separate border-spacing-x-8 text-left">
|
||||
<caption className="sr-only">Pricing plan comparison</caption>
|
||||
<colgroup>
|
||||
<col className="w-1/4" />
|
||||
<col className="w-1/4" />
|
||||
<col className="w-1/4" />
|
||||
<col className="w-1/4" />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<td />
|
||||
{tiers.map((tier) => (
|
||||
<th
|
||||
key={tier.id}
|
||||
scope="col"
|
||||
className="px-6 pt-6 xl:px-8 xl:pt-8"
|
||||
>
|
||||
<div className="text-sm font-semibold leading-7 text-gray-900">
|
||||
{tier.name}
|
||||
</div>
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<span className="sr-only">Price</span>
|
||||
</th>
|
||||
{tiers.map((tier) => (
|
||||
<td key={tier.id} className="px-6 pt-2 xl:px-8">
|
||||
<div className="flex items-baseline gap-x-1 text-gray-900">
|
||||
<span className="text-4xl font-bold">
|
||||
{tier.priceMonthly}
|
||||
</span>
|
||||
<span className="text-sm font-semibold leading-6">
|
||||
/month
|
||||
</span>
|
||||
</div>
|
||||
<br></br>
|
||||
<div className="text-md font-semibold">
|
||||
{tier.description}
|
||||
</div>
|
||||
<a
|
||||
href={getHrefFromTier(tier)}
|
||||
className={cn(
|
||||
tier.mostPopular
|
||||
? "bg-indigo-600 text-white hover:bg-indigo-500"
|
||||
: "text-indigo-600 ring-1 ring-inset ring-indigo-200 hover:ring-indigo-300",
|
||||
"mt-8 block rounded-md py-2 px-3 text-center text-sm font-semibold leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600",
|
||||
)}
|
||||
>
|
||||
{getNameFromTier(tier)}
|
||||
</a>
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
{sections.map((section, sectionIdx) => (
|
||||
<Fragment key={section.name}>
|
||||
<tr>
|
||||
<th
|
||||
scope="colgroup"
|
||||
colSpan={4}
|
||||
className={cn(
|
||||
sectionIdx === 0 ? "pt-8" : "pt-16",
|
||||
"pb-4 text-sm font-semibold leading-6 text-gray-900",
|
||||
)}
|
||||
>
|
||||
{section.name}
|
||||
<div className="absolute inset-x-8 mt-4 h-px bg-gray-900/10" />
|
||||
</th>
|
||||
</tr>
|
||||
{section.features.map((feature) => (
|
||||
<tr key={feature.name}>
|
||||
<th
|
||||
scope="row"
|
||||
className="py-4 text-sm font-normal leading-6 text-gray-900"
|
||||
>
|
||||
{feature.name}
|
||||
<div className="absolute inset-x-8 mt-4 h-px bg-gray-900/5" />
|
||||
</th>
|
||||
{tiers.map((tier) => (
|
||||
<td key={tier.id} className="px-6 py-4 xl:px-8">
|
||||
{typeof feature.tiers[tier.name] === "string" ||
|
||||
typeof feature.tiers[tier.name] === "object" ? (
|
||||
<div className="flex items-center justify-center text-center text-sm leading-6 text-gray-500">
|
||||
{feature.tiers[tier.name]}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{feature.tiers[tier.name] === true ? (
|
||||
<Check
|
||||
className="mx-auto h-5 w-5 text-indigo-600"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
) : (
|
||||
<Minus
|
||||
className="mx-auto h-5 w-5 text-gray-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)}
|
||||
|
||||
<span className="sr-only">
|
||||
{feature.tiers[tier.name] === true
|
||||
? "Included"
|
||||
: "Not included"}{" "}
|
||||
in {tier.name}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</Fragment>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as ProgressPrimitive from "@radix-ui/react-progress"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Progress = React.forwardRef<
|
||||
React.ElementRef<typeof ProgressPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
|
||||
>(({ className, value, ...props }, ref) => (
|
||||
<ProgressPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative h-4 w-full overflow-hidden rounded-full bg-secondary",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ProgressPrimitive.Indicator
|
||||
className="h-full w-full flex-1 bg-primary transition-all"
|
||||
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
|
||||
/>
|
||||
</ProgressPrimitive.Root>
|
||||
))
|
||||
Progress.displayName = ProgressPrimitive.Root.displayName
|
||||
|
||||
export { Progress }
|
||||
Reference in New Issue
Block a user