This commit is contained in:
fgrreloaded
2025-02-18 12:10:42 +05:30
parent f76e82cff7
commit 1e547869ce
3 changed files with 14 additions and 10 deletions

View File

@@ -18,7 +18,7 @@ export function CommandDisplay({ command }: CommandDisplayProps) {
return ( return (
<div className="relative group"> <div className="relative group">
<div className="bg-gray-950/20 backdrop-blur-xl border border-gray-800 rounded-lg p-4 font-mono text-sm text-gray-300 overflow-x-auto"> <div className="bg-gray-950/20 w-fit backdrop-blur-xl border border-gray-800 rounded-lg p-4 font-mono text-sm text-gray-300 overflow-x-auto">
<button <button
type="button" type="button"
onClick={copyToClipboard} onClick={copyToClipboard}

View File

@@ -146,7 +146,9 @@ const CustomizableStack = () => {
} }
if (activeNodes.auth !== "better-auth") { if (activeNodes.auth !== "better-auth") {
flags.splice(flags.indexOf("-y"), 1); if (flags.includes("-y")) {
flags.splice(flags.indexOf("-y"), 1);
}
flags.push("--no-auth"); flags.push("--no-auth");
} }
@@ -159,14 +161,14 @@ const CustomizableStack = () => {
<div className="absolute -top-16 left-1/2 -translate-x-1/2 z-50 w-96"> <div className="absolute -top-16 left-1/2 -translate-x-1/2 z-50 w-96">
<CommandDisplay command={generateCommand()} /> <CommandDisplay command={generateCommand()} />
</div> </div>
<div className="bg-gray-950/10 p-4 absolute top-4 right-4 z-50 w-96 rounded-xl border border-gray-800 backdrop-blur-3xl"> <div className="bg-gray-950/10 p-4 absolute top-4 right-4 z-50 w-80 rounded-xl border border-gray-800 backdrop-blur-3xl">
<div className="text-sm text-gray-300"> <div className="text-sm text-gray-300 text-center">
Select technologies from the left panel to customize your stack. The Select technologies from the left panel to customize your stack. The
graph will automatically update connections. graph will automatically update connections.
</div> </div>
</div> </div>
<div className="absolute inset-0 backdrop-blur-3xl bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-pink-500/10 rounded-xl" /> <div className="absolute inset-0 backdrop-blur-3xl bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-pink-500/10 rounded-xl" />
<div className="h-[600px] relative backdrop-blur-sm bg-gray-950/50 rounded-xl overflow-hidden border border-gray-800"> <div className="h-[600px] pl-28 relative backdrop-blur-sm bg-gray-950/50 rounded-xl overflow-hidden border border-gray-800">
<ReactFlow <ReactFlow
nodes={nodes} nodes={nodes}
edges={edges} edges={edges}

View File

@@ -33,11 +33,13 @@ export function TechNodeComponent({ data }: { data: TechNodeData }) {
return ( return (
<div className="relative group"> <div className="relative group">
<Handle {data.label !== "Bun" && (
type="target" <Handle
position={Position.Top} type="target"
className="!w-1.5 !h-1.5 !bg-indigo-400/70" position={Position.Top}
/> className="!w-1.5 !h-1.5 !bg-indigo-400/70"
/>
)}
<div className={`${baseStyles} ${activeStyles} backdrop-blur-3xl`}> <div className={`${baseStyles} ${activeStyles} backdrop-blur-3xl`}>
<div className="text-white font-medium text-sm tracking-wide mb-1.5"> <div className="text-white font-medium text-sm tracking-wide mb-1.5">