mirror of
https://github.com/FranP-code/create-better-t-stack.git
synced 2025-10-12 23:52:15 +00:00
add cloudflare workers support (#326)
This commit is contained in:
Aman Varshney
2
apps/web/public/icon/workers.svg
Normal file
2
apps/web/public/icon/workers.svg
Normal file
@@ -0,0 +1,2 @@
|
||||
|
||||
<svg viewBox="0 0 256 231" xmlns="http://www.w3.org/2000/svg" width="256" height="231" preserveAspectRatio="xMidYMid"><defs><linearGradient id="a" x1="50%" x2="25.7%" y1="100%" y2="8.7%"><stop offset="0%" stop-color="#EB6F07"/><stop offset="100%" stop-color="#FAB743"/></linearGradient><linearGradient id="b" x1="81%" x2="40.5%" y1="83.7%" y2="29.5%"><stop offset="0%" stop-color="#D96504"/><stop offset="100%" stop-color="#D96504" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="42%" x2="84%" y1="8.7%" y2="79.9%"><stop offset="0%" stop-color="#EB6F07"/><stop offset="100%" stop-color="#EB720A" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="50%" x2="25.7%" y1="100%" y2="8.7%"><stop offset="0%" stop-color="#EE6F05"/><stop offset="100%" stop-color="#FAB743"/></linearGradient><linearGradient id="e" x1="-33.2%" x2="91.7%" y1="100%" y2="0%"><stop offset="0%" stop-color="#D96504" stop-opacity=".8"/><stop offset="49.8%" stop-color="#D96504" stop-opacity=".2"/><stop offset="100%" stop-color="#D96504" stop-opacity="0"/></linearGradient><linearGradient id="f" x1="50%" x2="25.7%" y1="100%" y2="8.7%"><stop offset="0%" stop-color="#FFA95F"/><stop offset="100%" stop-color="#FFEBC8"/></linearGradient><linearGradient id="g" x1="8.1%" x2="96.5%" y1="1.1%" y2="48.8%"><stop offset="0%" stop-color="#FFF" stop-opacity=".5"/><stop offset="100%" stop-color="#FFF" stop-opacity=".1"/></linearGradient><linearGradient id="h" x1="-13.7%" x2="100%" y1="104.2%" y2="46.2%"><stop offset="0%" stop-color="#FFF" stop-opacity=".5"/><stop offset="100%" stop-color="#FFF" stop-opacity=".1"/></linearGradient></defs><path fill="url(#a)" d="m65.82 3.324 30.161 54.411-27.698 49.857a16.003 16.003 0 0 0 0 15.573l27.698 49.98-30.16 54.411a32.007 32.007 0 0 1-13.542-12.74L4.27 131.412a32.13 32.13 0 0 1 0-32.007l48.01-83.403a32.007 32.007 0 0 1 13.542-12.68Z"/><path fill="url(#b)" d="M68.283 107.654a16.003 16.003 0 0 0 0 15.51l27.698 49.98-30.16 54.412a32.007 32.007 0 0 1-13.542-12.74L4.27 131.412c-3.816-6.586 17.542-14.465 64.014-23.698v-.061Z" opacity=".7"/><path fill="url(#c)" d="m68.898 8.802 27.083 48.933-4.493 7.818-23.882-40.44c-6.894-11.264-17.42-5.416-30.591 17.358l1.97-3.386 13.294-23.082a32.007 32.007 0 0 1 13.419-12.68l3.139 5.479h.061Z" opacity=".5"/><path fill="url(#d)" d="m203.696 16.003 48.01 83.403c5.725 9.848 5.725 22.159 0 32.007l-48.01 83.402a32.007 32.007 0 0 1-27.698 16.004h-48.01l59.705-107.654a16.003 16.003 0 0 0 0-15.511L127.988 0h48.01a32.007 32.007 0 0 1 27.698 16.003Z"/><path fill="url(#e)" d="m173.536 230.45-47.395.43 57.367-108.208a16.619 16.619 0 0 0 0-15.634L126.14 0h10.834l60.197 106.546a16.619 16.619 0 0 1-.062 16.496 9616.838 9616.838 0 0 0-38.592 67.707c-11.695 20.558-6.648 33.791 15.018 39.7Z"/><path fill="url(#f)" d="M79.978 230.819c-4.924 0-9.849-1.17-14.157-3.263l59.212-106.792a11.045 11.045 0 0 0 0-10.71L65.821 3.324A32.007 32.007 0 0 1 79.978 0h48.01l59.705 107.654a16.003 16.003 0 0 1 0 15.51L127.988 230.82h-48.01Z"/><path fill="url(#g)" d="M183.508 110.054 122.448 0h5.54l59.705 107.654a16.003 16.003 0 0 1 0 15.51L127.988 230.82h-5.54l61.06-110.055a11.045 11.045 0 0 0 0-10.71Z" opacity=".6"/><path fill="url(#h)" d="M125.033 110.054 65.821 3.324c1.846-.985 4.062-1.724 6.155-2.34 13.049 23.452 32.315 59.029 57.859 106.67a16.003 16.003 0 0 1 0 15.51L71.053 229.589c-2.093-.616-3.201-1.047-5.17-1.97l59.089-106.792a11.045 11.045 0 0 0 0-10.71l.061-.062Z" opacity=".6"/></svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
@@ -81,23 +81,6 @@ const CATEGORY_ORDER: Array<keyof typeof TECH_OPTIONS> = [
|
||||
"install",
|
||||
];
|
||||
|
||||
const hasWebFrontend = (webFrontend: string[]) =>
|
||||
webFrontend.some((f) =>
|
||||
[
|
||||
"tanstack-router",
|
||||
"react-router",
|
||||
"tanstack-start",
|
||||
"next",
|
||||
"nuxt",
|
||||
"svelte",
|
||||
"solid",
|
||||
].includes(f),
|
||||
);
|
||||
|
||||
const checkHasNativeFrontend = (nativeFrontend: string[]) =>
|
||||
nativeFrontend.includes("native-nativewind") ||
|
||||
nativeFrontend.includes("native-unistyles");
|
||||
|
||||
const hasPWACompatibleFrontend = (webFrontend: string[]) =>
|
||||
webFrontend.some((f) =>
|
||||
["tanstack-router", "react-router", "solid", "next"].includes(f),
|
||||
@@ -552,6 +535,60 @@ const analyzeStackCompatibility = (stack: StackState): CompatibilityResult => {
|
||||
}
|
||||
}
|
||||
|
||||
if (nextStack.runtime === "workers") {
|
||||
if (nextStack.backend !== "hono") {
|
||||
notes.runtime.notes.push(
|
||||
"Cloudflare Workers runtime requires Hono backend. Hono will be selected.",
|
||||
);
|
||||
notes.backend.notes.push(
|
||||
"Cloudflare Workers runtime requires Hono backend. It will be selected.",
|
||||
);
|
||||
notes.runtime.hasIssue = true;
|
||||
notes.backend.hasIssue = true;
|
||||
nextStack.backend = "hono";
|
||||
changed = true;
|
||||
changes.push({
|
||||
category: "runtime",
|
||||
message: "Backend set to 'Hono' (required by Cloudflare Workers)",
|
||||
});
|
||||
}
|
||||
|
||||
if (nextStack.orm !== "drizzle" && nextStack.orm !== "none") {
|
||||
notes.runtime.notes.push(
|
||||
"Cloudflare Workers runtime requires Drizzle ORM or no ORM. Drizzle will be selected.",
|
||||
);
|
||||
notes.orm.notes.push(
|
||||
"Cloudflare Workers runtime requires Drizzle ORM or no ORM. Drizzle will be selected.",
|
||||
);
|
||||
notes.runtime.hasIssue = true;
|
||||
notes.orm.hasIssue = true;
|
||||
nextStack.orm = "drizzle";
|
||||
changed = true;
|
||||
changes.push({
|
||||
category: "runtime",
|
||||
message: "ORM set to 'Drizzle' (required by Cloudflare Workers)",
|
||||
});
|
||||
}
|
||||
|
||||
if (nextStack.database === "mongodb") {
|
||||
notes.runtime.notes.push(
|
||||
"Cloudflare Workers runtime is not compatible with MongoDB. SQLite will be selected.",
|
||||
);
|
||||
notes.database.notes.push(
|
||||
"MongoDB is not compatible with Cloudflare Workers runtime. SQLite will be selected.",
|
||||
);
|
||||
notes.runtime.hasIssue = true;
|
||||
notes.database.hasIssue = true;
|
||||
nextStack.database = "sqlite";
|
||||
changed = true;
|
||||
changes.push({
|
||||
category: "runtime",
|
||||
message:
|
||||
"Database set to 'SQLite' (MongoDB not compatible with Workers)",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const isNuxt = nextStack.webFrontend.includes("nuxt");
|
||||
const isSvelte = nextStack.webFrontend.includes("svelte");
|
||||
const isSolid = nextStack.webFrontend.includes("solid");
|
||||
@@ -627,7 +664,6 @@ const analyzeStackCompatibility = (stack: StackState): CompatibilityResult => {
|
||||
|
||||
const incompatibleExamples: string[] = [];
|
||||
|
||||
// Note: Examples are now supported with Native-only frontends
|
||||
if (
|
||||
nextStack.database === "none" &&
|
||||
nextStack.examples.includes("todo")
|
||||
@@ -709,29 +745,6 @@ const analyzeStackCompatibility = (stack: StackState): CompatibilityResult => {
|
||||
};
|
||||
};
|
||||
|
||||
const getCompatibilityRules = (stack: StackState) => {
|
||||
const isConvex = stack.backend === "convex";
|
||||
const isBackendNone = stack.backend === "none";
|
||||
const hasWebFrontendSelected = hasWebFrontend(stack.webFrontend);
|
||||
const hasNativeFrontend = checkHasNativeFrontend(stack.nativeFrontend);
|
||||
const hasSolid = stack.webFrontend.includes("solid");
|
||||
const hasNuxt = stack.webFrontend.includes("nuxt");
|
||||
const hasSvelte = stack.webFrontend.includes("svelte");
|
||||
|
||||
return {
|
||||
isConvex,
|
||||
isBackendNone,
|
||||
hasWebFrontend: hasWebFrontendSelected,
|
||||
hasNativeFrontend,
|
||||
hasPWACompatible: hasPWACompatibleFrontend(stack.webFrontend),
|
||||
hasTauriCompatible: hasTauriCompatibleFrontend(stack.webFrontend),
|
||||
hasNuxtOrSvelteOrSolid: hasNuxt || hasSvelte || hasSolid,
|
||||
hasSolid,
|
||||
hasNuxt,
|
||||
hasSvelte,
|
||||
};
|
||||
};
|
||||
|
||||
const generateCommand = (stackState: StackState): string => {
|
||||
let base: string;
|
||||
switch (stackState.packageManager) {
|
||||
@@ -863,8 +876,6 @@ const StackBuilder = () => {
|
||||
[stack],
|
||||
);
|
||||
|
||||
const rules = useMemo(() => getCompatibilityRules(stack), [stack]);
|
||||
|
||||
const getRandomStack = () => {
|
||||
const randomStack: Partial<StackState> = {};
|
||||
|
||||
@@ -973,342 +984,6 @@ const StackBuilder = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const disabledReasons = useMemo(() => {
|
||||
const reasons = new Map<string, string>();
|
||||
const addRule = (category: string, techId: string, reason: string) => {
|
||||
reasons.set(`${category}-${techId}`, reason);
|
||||
};
|
||||
|
||||
for (const category of CATEGORY_ORDER) {
|
||||
const options = TECH_OPTIONS[category as keyof typeof TECH_OPTIONS] || [];
|
||||
const catKey = category as keyof StackState;
|
||||
|
||||
for (const tech of options) {
|
||||
const techId = tech.id;
|
||||
|
||||
if (rules.isConvex) {
|
||||
const convexDefaults: Record<string, string | string[]> = {
|
||||
runtime: "none",
|
||||
database: "none",
|
||||
orm: "none",
|
||||
api: "none",
|
||||
auth: "false",
|
||||
dbSetup: "none",
|
||||
examples: ["todo"],
|
||||
};
|
||||
|
||||
if (
|
||||
["runtime", "database", "orm", "api", "auth", "dbSetup"].includes(
|
||||
catKey,
|
||||
)
|
||||
) {
|
||||
const requiredValue = convexDefaults[catKey];
|
||||
if (catKey === "auth") {
|
||||
if (techId === "true" && requiredValue === "false") {
|
||||
addRule(
|
||||
category,
|
||||
techId,
|
||||
"Disabled: Convex backend requires Authentication to be disabled.",
|
||||
);
|
||||
}
|
||||
} else if (String(techId) !== String(requiredValue)) {
|
||||
addRule(
|
||||
category,
|
||||
techId,
|
||||
`Disabled: Convex backend requires ${getCategoryDisplayName(
|
||||
catKey,
|
||||
)} to be '${requiredValue}'.`,
|
||||
);
|
||||
}
|
||||
} else if (catKey === "examples") {
|
||||
const requiredExamples = convexDefaults.examples as string[];
|
||||
if (
|
||||
!requiredExamples.includes(techId) &&
|
||||
techId !== "none" &&
|
||||
options.find((o) => o.id === techId)
|
||||
) {
|
||||
addRule(
|
||||
category,
|
||||
techId,
|
||||
"Disabled: Convex backend only supports the 'Todo' example.",
|
||||
);
|
||||
}
|
||||
} else if (
|
||||
catKey === "webFrontend" &&
|
||||
(techId === "nuxt" || techId === "solid")
|
||||
) {
|
||||
addRule(
|
||||
category,
|
||||
techId,
|
||||
`Disabled: Convex backend is not compatible with ${tech.name}.`,
|
||||
);
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
if (rules.isBackendNone) {
|
||||
if (catKey === "auth" && techId === "true") {
|
||||
addRule(
|
||||
category,
|
||||
techId,
|
||||
"Disabled: Authentication requires a backend.",
|
||||
);
|
||||
} else if (
|
||||
["database", "orm", "api", "runtime", "dbSetup"].includes(catKey) &&
|
||||
techId !== "none"
|
||||
) {
|
||||
addRule(
|
||||
category,
|
||||
techId,
|
||||
`Disabled: ${getCategoryDisplayName(
|
||||
catKey,
|
||||
)} cannot be selected when 'No Backend' is chosen (will be 'None').`,
|
||||
);
|
||||
} else if (catKey === "examples" && techId !== "none") {
|
||||
addRule(
|
||||
category,
|
||||
techId,
|
||||
"Disabled: Examples cannot be selected when 'No Backend' is chosen.",
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (catKey === "runtime" && techId === "none" && !rules.isConvex) {
|
||||
addRule(
|
||||
category,
|
||||
techId,
|
||||
"Disabled: Runtime 'None' is only available with Convex backend.",
|
||||
);
|
||||
}
|
||||
|
||||
if (catKey === "api") {
|
||||
if (techId !== "none" && (rules.isConvex || rules.isBackendNone)) {
|
||||
addRule(
|
||||
category,
|
||||
techId,
|
||||
rules.isConvex
|
||||
? "Disabled: Convex backend requires API to be 'None'."
|
||||
: "Disabled: No backend requires API to be 'None'.",
|
||||
);
|
||||
}
|
||||
if (techId === "trpc" && rules.hasNuxtOrSvelteOrSolid) {
|
||||
const frontendName = rules.hasNuxt
|
||||
? "Nuxt"
|
||||
: rules.hasSvelte
|
||||
? "Svelte"
|
||||
: "Solid";
|
||||
addRule(
|
||||
category,
|
||||
techId,
|
||||
`Disabled: tRPC is not supported with ${frontendName}. oRPC will be automatically selected.`,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (catKey === "orm") {
|
||||
if (
|
||||
stack.database === "none" &&
|
||||
techId !== "none" &&
|
||||
!rules.isConvex
|
||||
) {
|
||||
addRule(
|
||||
category,
|
||||
techId,
|
||||
"Disabled: ORM requires a database. Select a database or 'No ORM'.",
|
||||
);
|
||||
} else if (stack.database === "mongodb") {
|
||||
if (
|
||||
techId !== "prisma" &&
|
||||
techId !== "mongoose" &&
|
||||
techId !== "none"
|
||||
) {
|
||||
addRule(
|
||||
category,
|
||||
techId,
|
||||
"Disabled: With MongoDB, use Prisma, Mongoose, or No ORM.",
|
||||
);
|
||||
}
|
||||
} else if (["sqlite", "postgres", "mysql"].includes(stack.database)) {
|
||||
if (techId === "mongoose") {
|
||||
addRule(
|
||||
category,
|
||||
techId,
|
||||
"Disabled: Mongoose ORM is for MongoDB. Choose a different ORM for relational databases.",
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (stack.dbSetup === "turso" && techId !== "drizzle") {
|
||||
addRule(
|
||||
category,
|
||||
techId,
|
||||
"Disabled: Turso DB setup requires Drizzle ORM.",
|
||||
);
|
||||
} else if (
|
||||
stack.dbSetup === "prisma-postgres" &&
|
||||
techId !== "prisma"
|
||||
) {
|
||||
addRule(
|
||||
category,
|
||||
techId,
|
||||
"Disabled: Prisma PostgreSQL setup requires Prisma ORM.",
|
||||
);
|
||||
} else if (
|
||||
stack.dbSetup === "mongodb-atlas" &&
|
||||
techId !== "prisma" &&
|
||||
techId !== "mongoose"
|
||||
) {
|
||||
addRule(
|
||||
category,
|
||||
techId,
|
||||
"Disabled: MongoDB Atlas setup requires Prisma or Mongoose ORM.",
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (catKey === "dbSetup" && techId !== "none") {
|
||||
if (stack.database === "none" && !rules.isBackendNone) {
|
||||
addRule(
|
||||
category,
|
||||
techId,
|
||||
"Disabled: A database must be selected to use this DB setup. Select 'Basic Setup' or a database first.",
|
||||
);
|
||||
}
|
||||
|
||||
if (techId === "turso") {
|
||||
if (stack.database !== "sqlite" && stack.database !== "none") {
|
||||
addRule(
|
||||
category,
|
||||
techId,
|
||||
"Disabled: Turso requires SQLite. (Will auto-select if chosen)",
|
||||
);
|
||||
}
|
||||
if (stack.orm !== "drizzle" && stack.orm !== "none") {
|
||||
addRule(
|
||||
category,
|
||||
techId,
|
||||
"Disabled: Turso requires Drizzle ORM. (Will auto-select if chosen)",
|
||||
);
|
||||
}
|
||||
} else if (techId === "prisma-postgres") {
|
||||
if (stack.database !== "postgres" && stack.database !== "none") {
|
||||
addRule(
|
||||
category,
|
||||
techId,
|
||||
"Disabled: Requires PostgreSQL. (Will auto-select if chosen)",
|
||||
);
|
||||
}
|
||||
if (stack.orm !== "prisma" && stack.orm !== "none") {
|
||||
addRule(
|
||||
category,
|
||||
techId,
|
||||
"Disabled: Requires Prisma ORM. (Will auto-select if chosen)",
|
||||
);
|
||||
}
|
||||
} else if (techId === "mongodb-atlas") {
|
||||
if (stack.database !== "mongodb" && stack.database !== "none") {
|
||||
addRule(
|
||||
category,
|
||||
techId,
|
||||
"Disabled: Requires MongoDB. (Will auto-select if chosen)",
|
||||
);
|
||||
}
|
||||
if (
|
||||
stack.orm !== "prisma" &&
|
||||
stack.orm !== "mongoose" &&
|
||||
stack.orm !== "none"
|
||||
) {
|
||||
addRule(
|
||||
category,
|
||||
techId,
|
||||
"Disabled: Requires Prisma or Mongoose ORM. (Will auto-select Prisma if chosen)",
|
||||
);
|
||||
}
|
||||
} else if (techId === "neon") {
|
||||
if (stack.database !== "postgres" && stack.database !== "none") {
|
||||
addRule(
|
||||
category,
|
||||
techId,
|
||||
"Disabled: Neon requires PostgreSQL. (Will auto-select if chosen)",
|
||||
);
|
||||
}
|
||||
} else if (techId === "supabase") {
|
||||
if (stack.database !== "postgres" && stack.database !== "none") {
|
||||
addRule(
|
||||
category,
|
||||
techId,
|
||||
"Disabled: Supabase (local) requires PostgreSQL. (Will auto-select if chosen)",
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (catKey === "auth" && techId === "true") {
|
||||
if (stack.database === "none" && !rules.isBackendNone) {
|
||||
addRule(
|
||||
category,
|
||||
techId,
|
||||
"Disabled: Authentication requires a database.",
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (catKey === "addons") {
|
||||
if (techId === "pwa" && !rules.hasPWACompatible) {
|
||||
addRule(
|
||||
category,
|
||||
techId,
|
||||
"Disabled: PWA addon requires a compatible frontend (e.g., TanStack Router, Solid).",
|
||||
);
|
||||
}
|
||||
if (techId === "tauri" && !rules.hasTauriCompatible) {
|
||||
addRule(
|
||||
category,
|
||||
techId,
|
||||
"Disabled: Tauri addon requires a compatible frontend (e.g., TanStack Router, Nuxt, Svelte, Solid, Next.js).",
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (catKey === "examples" && techId !== "none") {
|
||||
if (stack.api === "none" && !rules.isConvex && !rules.isBackendNone) {
|
||||
addRule(
|
||||
category,
|
||||
techId,
|
||||
"Disabled: Examples require an API. Cannot be selected when API is 'None'.",
|
||||
);
|
||||
}
|
||||
if (
|
||||
stack.database === "none" &&
|
||||
techId === "todo" &&
|
||||
!rules.isConvex
|
||||
) {
|
||||
addRule(
|
||||
category,
|
||||
techId,
|
||||
"Disabled: The 'Todo' example requires a database.",
|
||||
);
|
||||
}
|
||||
if (stack.backend === "elysia" && techId === "ai") {
|
||||
addRule(
|
||||
category,
|
||||
techId,
|
||||
"Disabled: The 'AI' example is not compatible with an Elysia backend.",
|
||||
);
|
||||
}
|
||||
if (rules.hasSolid && techId === "ai") {
|
||||
addRule(
|
||||
category,
|
||||
techId,
|
||||
"Disabled: The 'AI' example is not compatible with a Solid frontend.",
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return reasons;
|
||||
}, [stack, rules]);
|
||||
|
||||
const selectedBadges = (() => {
|
||||
const badges: React.ReactNode[] = [];
|
||||
for (const category of CATEGORY_ORDER) {
|
||||
@@ -1402,6 +1077,20 @@ const StackBuilder = () => {
|
||||
useEffect(() => {
|
||||
if (compatibilityAnalysis.adjustedStack) {
|
||||
if (compatibilityAnalysis.changes.length > 0) {
|
||||
if (compatibilityAnalysis.changes.length === 1) {
|
||||
toast.info(compatibilityAnalysis.changes[0].message, {
|
||||
duration: 4000,
|
||||
});
|
||||
} else if (compatibilityAnalysis.changes.length > 1) {
|
||||
const message = `${
|
||||
compatibilityAnalysis.changes.length
|
||||
} compatibility adjustments made:\n${compatibilityAnalysis.changes
|
||||
.map((c) => `• ${c.message}`)
|
||||
.join("\n")}`;
|
||||
toast.info(message, {
|
||||
duration: 5000,
|
||||
});
|
||||
}
|
||||
}
|
||||
setLastChanges(compatibilityAnalysis.changes);
|
||||
setStack(compatibilityAnalysis.adjustedStack);
|
||||
@@ -1804,36 +1493,19 @@ const StackBuilder = () => {
|
||||
isSelected = currentValue === tech.id;
|
||||
}
|
||||
|
||||
const disabledReason = disabledReasons.get(
|
||||
`${categoryKey}-${tech.id}`,
|
||||
);
|
||||
const isDisabled = !!disabledReason;
|
||||
|
||||
return (
|
||||
<Tooltip key={tech.id} delayDuration={100}>
|
||||
<TooltipTrigger asChild>
|
||||
<motion.div
|
||||
className={cn(
|
||||
"relative rounded border p-2 transition-all",
|
||||
isDisabled && !isSelected
|
||||
? "cursor-not-allowed opacity-60"
|
||||
: "cursor-pointer",
|
||||
"relative cursor-pointer rounded border p-2 transition-all",
|
||||
isSelected
|
||||
? "border-primary bg-primary/10"
|
||||
: `border-border ${
|
||||
!isDisabled
|
||||
? "hover:border-muted hover:bg-muted"
|
||||
: ""
|
||||
}`,
|
||||
: "border-border hover:border-muted hover:bg-muted",
|
||||
)}
|
||||
whileHover={
|
||||
!isDisabled ? { scale: 1.02 } : undefined
|
||||
}
|
||||
whileTap={
|
||||
!isDisabled ? { scale: 0.98 } : undefined
|
||||
}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
onClick={() =>
|
||||
!isDisabled &&
|
||||
handleTechSelect(
|
||||
categoryKey as keyof typeof TECH_OPTIONS,
|
||||
tech.id,
|
||||
@@ -1862,27 +1534,19 @@ const StackBuilder = () => {
|
||||
{tech.name}
|
||||
</span>
|
||||
</div>
|
||||
{isDisabled && !isSelected && (
|
||||
<InfoIcon className="ml-2 h-4 w-4 flex-shrink-0 text-muted-foreground" />
|
||||
)}
|
||||
</div>
|
||||
<p className="mt-0.5 text-muted-foreground text-xs">
|
||||
{tech.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{tech.default && !isSelected && !isDisabled && (
|
||||
{tech.default && !isSelected && (
|
||||
<span className="absolute top-1 right-1 ml-2 flex-shrink-0 rounded bg-muted px-1 py-0.5 text-[10px] text-muted-foreground">
|
||||
Default
|
||||
</span>
|
||||
)}
|
||||
</motion.div>
|
||||
</TooltipTrigger>
|
||||
{isDisabled && disabledReason && (
|
||||
<TooltipContent side="top" align="center">
|
||||
<p>{disabledReason}</p>
|
||||
</TooltipContent>
|
||||
)}
|
||||
</Tooltip>
|
||||
);
|
||||
})}
|
||||
|
||||
@@ -132,6 +132,20 @@ export const TECH_OPTIONS = {
|
||||
icon: "/icon/node.svg",
|
||||
color: "from-green-400 to-green-600",
|
||||
},
|
||||
{
|
||||
id: "workers",
|
||||
name: "Cloudflare Workers (beta)",
|
||||
description: "Serverless runtime for the edge",
|
||||
icon: "/icon/workers.svg",
|
||||
color: "from-orange-400 to-orange-600",
|
||||
},
|
||||
{
|
||||
id: "none",
|
||||
name: "No Runtime",
|
||||
description: "No specific runtime",
|
||||
icon: "",
|
||||
color: "from-gray-400 to-gray-600",
|
||||
},
|
||||
],
|
||||
backend: [
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user