mirror of
https://github.com/FranP-code/create-better-t-stack.git
synced 2025-10-12 23:52:15 +00:00
redesigned the code container box
This commit is contained in:
fgrreloaded
@@ -1,8 +1,5 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { ChevronRight } from "lucide-react";
|
|
||||||
import { useEffect, useRef, useState } from "react";
|
import { useEffect, useRef, useState } from "react";
|
||||||
import PackageIcon from "./Icons";
|
|
||||||
|
|
||||||
const CodeContainer = () => {
|
const CodeContainer = () => {
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
@@ -11,6 +8,8 @@ const CodeContainer = () => {
|
|||||||
);
|
);
|
||||||
const [copied, setCopied] = useState(false);
|
const [copied, setCopied] = useState(false);
|
||||||
const menuRef = useRef<HTMLDivElement>(null);
|
const menuRef = useRef<HTMLDivElement>(null);
|
||||||
|
const [typingComplete, setTypingComplete] = useState(false);
|
||||||
|
const [currentStep, setCurrentStep] = useState(0);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleClickOutside = (event: MouseEvent) => {
|
const handleClickOutside = (event: MouseEvent) => {
|
||||||
@@ -25,8 +24,8 @@ const CodeContainer = () => {
|
|||||||
|
|
||||||
const commands = {
|
const commands = {
|
||||||
npm: "npx create-better-t-stack@latest",
|
npm: "npx create-better-t-stack@latest",
|
||||||
yarn: "yarn dlx create better-t-stack",
|
yarn: "yarn dlx create-better-t-stack",
|
||||||
pnpm: "pnpm dlx create better-t-stack",
|
pnpm: "pnpm dlx create-better-t-stack",
|
||||||
bun: "bunx create-better-t-stack",
|
bun: "bunx create-better-t-stack",
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -38,53 +37,178 @@ const CodeContainer = () => {
|
|||||||
setTimeout(() => setCopied(false), 2000);
|
setTimeout(() => setCopied(false), 2000);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!typingComplete) {
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
setTypingComplete(true);
|
||||||
|
}, 1000);
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typingComplete && currentStep < 5) {
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
setCurrentStep((prev) => prev + 1);
|
||||||
|
}, 800);
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}
|
||||||
|
}, [typingComplete, currentStep]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full max-w-3xl mx-auto mt-12">
|
<div className="w-full max-w-3xl mx-auto mt-8">
|
||||||
<div className="relative group">
|
<div className="rounded-md bg-gray-950/50 backdrop-blur-3xl border border-blue-500/30 overflow-hidden">
|
||||||
<div className="absolute -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg backdrop-blur-lg opacity-25 transition duration-1000 group-hover:duration-200" />
|
<div className="flex items-center justify-between bg-blue-900/10 px-4 py-2 border-b border-blue-800/30">
|
||||||
<div className="relative rounded-lg p-1 bg-slate-900/30 backdrop-blur-xl">
|
<div className="flex items-center">
|
||||||
<div className="sm:p-4 p-2 font-mono text-gray-300 text-sm bg-black/20 rounded-lg flex items-center justify-between">
|
<div className="flex space-x-2">
|
||||||
<div className="flex items-center gap-2">
|
<div className="w-3 h-3 rounded-full bg-red-500/60" />
|
||||||
<ChevronRight />
|
<div className="w-3 h-3 rounded-full bg-yellow-500/60" />
|
||||||
<span className="text-base bg-clip-text text-transparent bg-gradient-to-br from-purple-400 via-pink-400 to-yellow-400">
|
<div className="w-3 h-3 rounded-full bg-green-500/60" />
|
||||||
{commands[selectedPM]}
|
</div>
|
||||||
|
<div className="ml-4 text-sm text-blue-300 font-mono">terminal</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Package Manager Selector */}
|
||||||
|
<div className="relative" ref={menuRef}>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setIsOpen(!isOpen)}
|
||||||
|
className="flex items-center px-2 py-1 text-sm bg-black/50 rounded border border-blue-500/30 hover:bg-blue-900/20"
|
||||||
|
>
|
||||||
|
<span className="text-blue-400 mr-2">{selectedPM}</span>
|
||||||
|
<svg
|
||||||
|
className="w-4 h-4 text-blue-400"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<title>Toggle Dropdown</title>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d={isOpen ? "M5 15l7-7 7 7" : "M19 9l-7 7-7-7"}
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{isOpen && (
|
||||||
|
<div className="absolute right-0 mt-2 w-36 bg-black border border-blue-500/30 rounded-md shadow-lg z-50">
|
||||||
|
<ul>
|
||||||
|
{(
|
||||||
|
Object.keys(commands) as Array<
|
||||||
|
"npm" | "yarn" | "pnpm" | "bun"
|
||||||
|
>
|
||||||
|
).map((pm) => (
|
||||||
|
<li key={pm}>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`block w-full text-left px-4 py-2 text-sm ${
|
||||||
|
selectedPM === pm
|
||||||
|
? "bg-blue-900/30 text-blue-400"
|
||||||
|
: "text-gray-300 hover:bg-blue-900/20"
|
||||||
|
}`}
|
||||||
|
onClick={() => copyToClipboard(pm)}
|
||||||
|
>
|
||||||
|
{pm}
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-4 font-mono text-sm">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="flex-grow">
|
||||||
|
<span className="text-blue-500 mr-2">$</span>
|
||||||
|
<span className="text-white">{commands[selectedPM]}</span>
|
||||||
|
<span
|
||||||
|
className={
|
||||||
|
typingComplete ? "hidden" : "text-blue-500 animate-pulse ml-1"
|
||||||
|
}
|
||||||
|
>
|
||||||
|
▌
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="relative" ref={menuRef}>
|
<button
|
||||||
<button
|
type="button"
|
||||||
type="button"
|
onClick={() => copyToClipboard(selectedPM)}
|
||||||
onClick={() => setIsOpen(!isOpen)}
|
className="text-blue-400 hover:text-blue-300"
|
||||||
className="flex items-center space-x-2 px-3 py-2 w-10 justify-center rounded-md cursor-pointer hover:bg-white/10 transition-colors text-gray-300 hover:text-white relative"
|
title="Copy to clipboard"
|
||||||
>
|
>
|
||||||
{copied ? (
|
{copied ? (
|
||||||
<span className="flex items-center space-x-2">
|
<CheckIcon className="w-5 h-5" />
|
||||||
<CheckIcon className="w-5 h-5" />
|
) : (
|
||||||
</span>
|
<CopyIcon className="w-5 h-5" />
|
||||||
) : (
|
)}
|
||||||
<span className="flex items-center space-x-2">
|
</button>
|
||||||
<CopyIcon className="w-5 h-5" />
|
</div>
|
||||||
</span>
|
|
||||||
|
{typingComplete && (
|
||||||
|
<>
|
||||||
|
<div className="mt-2 pl-4 text-yellow-400">
|
||||||
|
{currentStep >= 1 && (
|
||||||
|
<p
|
||||||
|
className={`transition-opacity duration-300 ${
|
||||||
|
currentStep >= 1 ? "opacity-100" : "opacity-0"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Creating a new Better-T-Stack project
|
||||||
|
</p>
|
||||||
)}
|
)}
|
||||||
</button>
|
{currentStep >= 2 && (
|
||||||
{isOpen && (
|
<div className="mt-2">
|
||||||
<div className="absolute right-6 top-8 mt-2 w-24 rounded-lg backdrop-blur-lg bg-violet-950/10 shadow-xl ring-1 ring-white/10 divide-y divide-gray-700/30 transition-all duration-200">
|
<p className="text-white">
|
||||||
{(["npm", "yarn", "pnpm", "bun"] as const).map((pm) => (
|
Project name:{" "}
|
||||||
<button
|
<span className="text-yellow-400">my-t-stack</span>
|
||||||
type="button"
|
</p>
|
||||||
key={pm}
|
<p className="text-white">
|
||||||
onClick={() => copyToClipboard(pm)}
|
Database:{" "}
|
||||||
className="group cursor-pointer flex items-center w-full px-4 py-2 text-sm text-gray-300 hover:text-white hover:bg-white/10 transition-all duration-200 first:rounded-t-lg last:rounded-b-lg"
|
<span className="text-yellow-400">postgres</span>
|
||||||
>
|
</p>
|
||||||
<PackageIcon
|
<p className="text-white">
|
||||||
className="h-4 w-4 mr-2 group-hover:scale-110 transition-transform"
|
ORM: <span className="text-yellow-400">drizzle</span>
|
||||||
pm={pm}
|
</p>
|
||||||
/>{" "}
|
<p className="text-white">
|
||||||
{pm}
|
Authentication:{" "}
|
||||||
</button>
|
<span className="text-yellow-400">yes</span>
|
||||||
))}
|
</p>
|
||||||
|
<p className="text-white">
|
||||||
|
Features:{" "}
|
||||||
|
<span className="text-yellow-400">
|
||||||
|
docker, github-actions, SEO
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{currentStep >= 3 && (
|
||||||
|
<div className="mt-3 pl-4">
|
||||||
|
<p className="text-blue-400">✓ Creating project structure</p>
|
||||||
|
{currentStep >= 4 && (
|
||||||
|
<p className="text-blue-400">✓ Installing dependencies</p>
|
||||||
|
)}
|
||||||
|
{currentStep >= 5 && (
|
||||||
|
<>
|
||||||
|
<p className="text-blue-400">✓ Setting up database</p>
|
||||||
|
<p className="text-blue-400">
|
||||||
|
✓ Configuring authentication
|
||||||
|
</p>
|
||||||
|
<p className="text-white mt-2">
|
||||||
|
Project ready! Happy coding!
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className={`flex mt-4 ${typingComplete ? "" : "hidden"}`}>
|
||||||
|
<span className="text-blue-500 mr-2">$</span>
|
||||||
|
<span className="text-blue-500 animate-pulse">▌</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -15,11 +15,11 @@ export default function HomePage() {
|
|||||||
<div className="relative z-10">
|
<div className="relative z-10">
|
||||||
<div className="flex flex-col items-center justify-center space-y-4 text-center">
|
<div className="flex flex-col items-center justify-center space-y-4 text-center">
|
||||||
<h1 className="text-6xl font-extrabold text-white">
|
<h1 className="text-6xl font-extrabold text-white">
|
||||||
<span className="block sm:text-7xl text-6xl bg-clip-text text-transparent bg-gradient-to-r from-purple-500 via-pink-400 to-yellow-200">
|
<span className="block sm:text-7xl text-6xl bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-indigo-500">
|
||||||
Better-T Stack
|
Better-T Stack
|
||||||
</span>
|
</span>
|
||||||
<span className="relative">
|
<span className="relative">
|
||||||
<span className="absolute -bottom-1 left-0 right-0 h-1 bg-gradient-to-r from-purple-400 via-pink-500 to-rose-500 transform origin-left transition-transform duration-300 ease-out scale-x-0 group-hover:scale-x-100" />
|
<span className="absolute -bottom-1 left-0 right-0 h-1 bg-gradient-to-r from-blue-400 to-indigo-500 transform origin-left transition-transform duration-300 ease-out scale-x-0 group-hover:scale-x-100" />
|
||||||
</span>
|
</span>
|
||||||
</h1>
|
</h1>
|
||||||
<NpmPackage />
|
<NpmPackage />
|
||||||
@@ -28,7 +28,7 @@ export default function HomePage() {
|
|||||||
<span className="inline-block transform hover:scale-105 transition-transform duration-200">
|
<span className="inline-block transform hover:scale-105 transition-transform duration-200">
|
||||||
Scaffold
|
Scaffold
|
||||||
</span>{" "}
|
</span>{" "}
|
||||||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-emerald-400">
|
<span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-indigo-500">
|
||||||
production-ready
|
production-ready
|
||||||
</span>{" "}
|
</span>{" "}
|
||||||
<span className="inline-block transition-transform duration-200">
|
<span className="inline-block transition-transform duration-200">
|
||||||
@@ -44,7 +44,7 @@ export default function HomePage() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="absolute inset-0 -z-10">
|
<div className="absolute inset-0 -z-10">
|
||||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-500/20 to-pink-500/20 blur-3xl transform -skew-y-12" />
|
<div className="absolute inset-0 bg-gradient-to-r from-purple-500/20 to-indigo-500/20 blur-3xl transform -skew-y-12" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<TerminalDisplay />
|
<TerminalDisplay />
|
||||||
|
|||||||
Reference in New Issue
Block a user