franpcode/create-better-t-stack
1
0
Fork 0
mirror of https://github.com/FranP-code/create-better-t-stack.git synced 2025-10-12 23:52:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: enhance responsiveness and styling across components

Browse Source
This commit is contained in:
fgrreloaded
2025-02-18 16:27:07 +05:30
parent 77406361eb
commit 8c6b937d50
7 changed files with 63 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/src/app/(home)/_components/CommandDisplay.tsx
View File

@@ -30,7 +30,7 @@ export function CommandDisplay({ command }: CommandDisplayProps) {
<Copy className="w-4 h-4 text-gray-400" />
)}
</button>
<pre className="pr-12">{command}</pre>
<pre className="pr-12 max-sm:text-xs">{command}</pre>
</div>
</div>
);

29
apps/web/src/app/(home)/_components/CustomizableStack.tsx
View File

@@ -7,7 +7,7 @@ import {
useEdgesState,
useNodesState,
} from "@xyflow/react";
import { useCallback, useState } from "react";
import { useCallback, useEffect, useState } from "react";
import { TechSelector } from "./TechSelector";
import "@xyflow/react/dist/style.css";
import { initialNodes } from "@/lib/constant";
@@ -47,6 +47,23 @@ const CustomizableStack = () => {
orm: "drizzle",
auth: "better-auth",
});
const [windowSize, setWindowSize] = useState("lg");
useEffect(() => {
const handleResize = () => {
if (window.innerWidth < 1024 && window.innerWidth > 768) {
setWindowSize("md");
} else if (window.innerWidth < 768) {
setWindowSize("sm");
} else {
setWindowSize("lg");
}
};
handleResize();
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);
// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
const cleanupConnectionsByCategory = useCallback((category: string) => {
@@ -262,17 +279,17 @@ const CustomizableStack = () => {
return (
<div className="relative w-full max-w-5xl mx-auto z-50 mt-24">
<TechSelector onSelect={handleTechSelect} activeNodes={activeNodes} />
<div className="absolute -top-16 left-1/2 -translate-x-1/2 z-50 w-96">
<div className="absolute -top-16 left-1/2 max-sm:left-[60%] -translate-x-1/2 z-50 w-96">
<CommandDisplay command={generateCommand()} />
</div>
<div className="bg-gray-950/10 lg:p-4 p-1 absolute lg:top-4 top-2 lg:right-4 right-2 z-50 w-80 rounded-xl border border-gray-800 backdrop-blur-3xl">
<div className="max-sm:hidden bg-gray-950/10 lg:p-4 p-1 absolute lg:top-4 top-2 lg:right-4 right-2 z-50 w-80 rounded-xl border border-gray-800 backdrop-blur-3xl">
<div className="lg:text-sm text-xs text-gray-300 text-center">
Select technologies from the left panel to customize your stack. The
graph will automatically update connections.
</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="h-[600px] lg:pl-28 relative backdrop-blur-sm bg-gray-950/50 rounded-xl overflow-hidden border border-gray-800">
<div className="h-[600px] lg:pl-28 max-sm:pt-36 relative backdrop-blur-sm bg-gray-950/50 rounded-xl overflow-hidden border border-gray-800">
<ReactFlow
nodes={nodes}
edges={edges}
@@ -281,8 +298,8 @@ const CustomizableStack = () => {
onConnect={onConnect}
nodeTypes={nodeTypes}
fitView
minZoom={1}
maxZoom={1}
// minZoom={1}
maxZoom={windowSize === "sm" ? 0.6 : windowSize === "md" ? 0.6 : 1}
zoomOnScroll={false}
zoomOnPinch={false}
preventScrolling={false}

2
apps/web/src/app/(home)/_components/TechConstellation.tsx
View File

@@ -153,7 +153,7 @@ const TechConstellation = () => {
return (
<div
ref={containerRef}
className="relative z-50 w-full h-[90vh] bg-gradient-to-b from-transparent mt-8 via-gray-950 to-transparent overflow-hidden flex items-center justify-center"
className="relative z-50 w-full h-[90vh] bg-gradient-to-b from-transparent mt-8 via-gray-950 to-transparent overflow-auto flex items-center justify-center "
>
<div
ref={centerRef}

2
apps/web/src/app/(home)/_components/TechSelector.tsx
View File

@@ -26,7 +26,7 @@ interface TechSelectorProps {
export function TechSelector({ onSelect, activeNodes }: TechSelectorProps) {
return (
<div className="absolute top-4 left-4 z-50 space-y-4 bg-gray-950/10 p-4 rounded-xl border border-gray-800 backdrop-blur-3xl">
<div className="absolute max-sm:w-11/12 top-4 left-4 z-50 sm:space-y-4 space-y-2 bg-gray-950/10 sm:p-4 px-4 py-2 rounded-xl border border-gray-800 backdrop-blur-3xl">
<div className="text-sm font-medium text-gray-200">Customize Stack</div>
{Object.entries(techOptions).map(([category, options]) => (
<div key={category} className="space-y-2">

24
apps/web/src/app/(home)/_components/Terminal.tsx
View File

@@ -22,27 +22,27 @@ const TerminalDisplay = () => {
`;
return (
<div className="max-w-6xl mx-auto p-6 mt-12 relative z-50">
<div className="w-[95%] max-w-6xl mx-auto p-2 sm:p-6 mt-6 sm:mt-12 relative z-50">
<div className="bg-gray-900/30 backdrop-blur-3xl rounded-lg shadow-xl overflow-hidden">
<div className="bg-gray-800/30 backdrop-blur-3xl px-4 py-2 flex items-center">
<div className="flex space-x-2">
<div className="w-3 h-3 rounded-full bg-red-500" />
<div className="w-3 h-3 rounded-full bg-yellow-500" />
<div className="w-3 h-3 rounded-full bg-green-500" />
<div className="bg-gray-800/30 backdrop-blur-3xl px-2 sm:px-4 py-1 sm:py-2 flex items-center">
<div className="flex space-x-1 sm:space-x-2">
<div className="w-2 h-2 sm:w-3 sm:h-3 rounded-full bg-red-500" />
<div className="w-2 h-2 sm:w-3 sm:h-3 rounded-full bg-yellow-500" />
<div className="w-2 h-2 sm:w-3 sm:h-3 rounded-full bg-green-500" />
</div>
</div>
<div className="p-4 font-mono text-sm flex flex-col">
<div className="flex items-center text-gray-300 mb-4">
<div className="p-2 sm:p-4 font-mono text-xs sm:text-sm flex flex-col">
<div className="flex items-center text-gray-300 mb-2 sm:mb-4 overflow-x-auto">
<span className="text-green-400">➜</span>
<span className="text-blue-400 ml-2">~</span>
<span className="ml-2">$</span>
<span className="ml-2 text-white">
<span className="text-blue-400 ml-1 sm:ml-2">~</span>
<span className="ml-1 sm:ml-2">$</span>
<span className="ml-1 sm:ml-2 max-sm:text-xs text-white">
npx create-better-t-stack@latest
</span>
</div>
<pre className="text-blue-400 whitespace-pre overflow-x-auto px-8">
<pre className="text-blue-400 whitespace-pre sm:overflow-x-auto px-8 max-sm:scale-50 max-sm:origin-left">
{TITLE_TEXT}
</pre>
</div>