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" /> <Copy className="w-4 h-4 text-gray-400" />
)} )}
</button> </button>
<pre className="pr-12">{command}</pre> <pre className="pr-12 max-sm:text-xs">{command}</pre>
</div> </div>
</div> </div>
); );

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

@@ -7,7 +7,7 @@ import {
useEdgesState, useEdgesState,
useNodesState, useNodesState,
} from "@xyflow/react"; } from "@xyflow/react";
import { useCallback, useState } from "react"; import { useCallback, useEffect, useState } from "react";
import { TechSelector } from "./TechSelector"; import { TechSelector } from "./TechSelector";
import "@xyflow/react/dist/style.css"; import "@xyflow/react/dist/style.css";
import { initialNodes } from "@/lib/constant"; import { initialNodes } from "@/lib/constant";
@@ -47,6 +47,23 @@ const CustomizableStack = () => {
orm: "drizzle", orm: "drizzle",
auth: "better-auth", 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> // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
const cleanupConnectionsByCategory = useCallback((category: string) => { const cleanupConnectionsByCategory = useCallback((category: string) => {
@@ -262,17 +279,17 @@ const CustomizableStack = () => {
return ( return (
<div className="relative w-full max-w-5xl mx-auto z-50 mt-24"> <div className="relative w-full max-w-5xl mx-auto z-50 mt-24">
<TechSelector onSelect={handleTechSelect} activeNodes={activeNodes} /> <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()} /> <CommandDisplay command={generateCommand()} />
</div> </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"> <div className="lg:text-sm text-xs 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] 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 <ReactFlow
nodes={nodes} nodes={nodes}
edges={edges} edges={edges}
@@ -281,8 +298,8 @@ const CustomizableStack = () => {
onConnect={onConnect} onConnect={onConnect}
nodeTypes={nodeTypes} nodeTypes={nodeTypes}
fitView fitView
minZoom={1} // minZoom={1}
maxZoom={1} maxZoom={windowSize === "sm" ? 0.6 : windowSize === "md" ? 0.6 : 1}
zoomOnScroll={false} zoomOnScroll={false}
zoomOnPinch={false} zoomOnPinch={false}
preventScrolling={false} preventScrolling={false}

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

@@ -153,7 +153,7 @@ const TechConstellation = () => {
return ( return (
<div <div
ref={containerRef} 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 <div
ref={centerRef} 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) { export function TechSelector({ onSelect, activeNodes }: TechSelectorProps) {
return ( 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> <div className="text-sm font-medium text-gray-200">Customize Stack</div>
{Object.entries(techOptions).map(([category, options]) => ( {Object.entries(techOptions).map(([category, options]) => (
<div key={category} className="space-y-2"> <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 ( 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-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="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-2"> <div className="flex space-x-1 sm:space-x-2">
<div className="w-3 h-3 rounded-full bg-red-500" /> <div className="w-2 h-2 sm:w-3 sm:h-3 rounded-full bg-red-500" />
<div className="w-3 h-3 rounded-full bg-yellow-500" /> <div className="w-2 h-2 sm:w-3 sm:h-3 rounded-full bg-yellow-500" />
<div className="w-3 h-3 rounded-full bg-green-500" /> <div className="w-2 h-2 sm:w-3 sm:h-3 rounded-full bg-green-500" />
</div> </div>
</div> </div>
<div className="p-4 font-mono text-sm flex flex-col"> <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-4"> <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-green-400">➜</span>
<span className="text-blue-400 ml-2">~</span> <span className="text-blue-400 ml-1 sm:ml-2">~</span>
<span className="ml-2">$</span> <span className="ml-1 sm:ml-2">$</span>
<span className="ml-2 text-white"> <span className="ml-1 sm:ml-2 max-sm:text-xs text-white">
npx create-better-t-stack@latest npx create-better-t-stack@latest
</span> </span>
</div> </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} {TITLE_TEXT}
</pre> </pre>
</div> </div>

8
apps/web/src/app/(home)/page.tsx
View File

@@ -20,7 +20,7 @@ const poppins = Poppins({
export default function HomePage() { export default function HomePage() {
return ( return (
<main <main
className="min-h-screen flex flex-col items-center justify-start p-8 pt-20" className="min-h-screen flex flex-col items-center justify-start sm:p-8 p-4 pt-20"
style={poppins.style} style={poppins.style}
> >
<BackgroundGradients /> <BackgroundGradients />
@@ -66,11 +66,11 @@ export default function HomePage() {
<div className="w-full max-w-6xl mx-auto space-y-12 mt-12 relative z-50"> <div className="w-full max-w-6xl mx-auto space-y-12 mt-12 relative z-50">
<div className="text-center space-y-6 relative z-10"> <div className="text-center space-y-6 relative z-10">
<h2 className="text-4xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-slate-700 via-gray-100 to-stone-600 pb-2"> <h2 className="sm:text-4xl text-3xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-slate-700 via-gray-100 to-stone-600 pb-2">
A Symphony of Modern Tech A Symphony of Modern Tech
</h2> </h2>
<div className="space-y-4 max-w-3xl mx-auto"> <div className="space-y-4 max-w-3xl mx-auto">
<p className="text-xl text-gray-300 leading-relaxed"> <p className="sm:text-xl text-gray-300 leading-relaxed">
Carefully orchestrated stack of{" "} Carefully orchestrated stack of{" "}
<span className="text-blue-400 font-semibold"> <span className="text-blue-400 font-semibold">
cutting-edge technologies cutting-edge technologies
@@ -78,7 +78,7 @@ export default function HomePage() {
, working in perfect harmony to deliver an exceptional development , working in perfect harmony to deliver an exceptional development
experience. experience.
</p> </p>
<div className="flex flex-wrap justify-center gap-4 text-sm text-gray-400"> <div className="flex flex-wrap justify-center sm:gap-4 gap-2 sm:text-sm text-xs text-gray-400">
<span className="px-3 py-1 bg-gray-800/50 rounded-full hover:bg-gray-800 transition-colors"> <span className="px-3 py-1 bg-gray-800/50 rounded-full hover:bg-gray-800 transition-colors">
End-to-end Type Safety End-to-end Type Safety
</span> </span>

21
apps/web/src/app/global.css
View File

@@ -65,3 +65,24 @@
background-position: 200% 50%; background-position: 200% 50%;
} }
} }
/* custom scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: rgba(16, 0, 16, 0.493);
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(45deg, #666, #888);
border-radius: 4px;
border: 2px solid #1a1a1a;
transition: background 0.3s ease;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(45deg, #888, #aaa);
}