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

fix errors

Browse Source
This commit is contained in:
Aman Varshney
2025-02-15 13:17:27 +05:30
parent d12849501a
commit c03c469838
10 changed files with 308 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/web/components/ShinyText/ShinyText.tsx
View File

@@ -1,4 +1,3 @@
interface ShinyTextProps {
text: string;
disabled?: boolean;
@@ -6,12 +5,17 @@ interface ShinyTextProps {
className?: string;
}
const ShinyText = ({ text, disabled = false, speed = 5, className = '' }: ShinyTextProps) => {
const ShinyText = ({
text,
disabled = false,
speed = 5,
className = "",
}: ShinyTextProps) => {
const animationDuration = `${speed}s`;
return (
<div
className={`shiny-text ${disabled ? 'disabled' : ''} ${className}`}
className={`shiny-text ${disabled ? "disabled" : ""} ${className}`}
style={{ animationDuration }}
>
{text}

20
apps/web/src/app/(home)/_components/CenterLines.tsx
View File

@@ -1,18 +1,22 @@
import React from 'react'
import React from "react";
const CenterLines = () => {
return (
<>
<div className='absolute top-3/4 -translate-y-1/2 left-0 w-80 h-14
<div
className="absolute top-3/4 -translate-y-1/2 left-0 w-80 h-14
rounded-bl-3xl transform rotate-180
border-b-2 border-l-2 border-slate-700
shadow-lg backdrop-blur-sm' />
<div className='absolute top-3/4 -translate-y-1/2 right-0 w-80 h-14
shadow-lg backdrop-blur-sm"
/>
<div
className="absolute top-3/4 -translate-y-1/2 right-0 w-80 h-14
rounded-br-3xl transform rotate-180
border-b-2 border-r-2 border-slate-700
shadow-lg backdrop-blur-sm' />
shadow-lg backdrop-blur-sm"
/>
</>
)
}
);
};
export default CenterLines
export default CenterLines;

26
apps/web/src/app/(home)/_components/CodeContainer.tsx
View File

@@ -1,12 +1,14 @@
"use client";
import { useState, useEffect, useRef } from "react";
import { ChevronRight } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import PackageIcon from "./Icons";
const CodeContainer = () => {
const [isOpen, setIsOpen] = useState(false);
const [selectedPM, setSelectedPM] = useState<"npm" | "yarn" | "pnpm" | "bun">("npm");
const [selectedPM, setSelectedPM] = useState<"npm" | "yarn" | "pnpm" | "bun">(
"npm",
);
const [copied, setCopied] = useState(false);
const menuRef = useRef<HTMLDivElement>(null);
@@ -17,15 +19,15 @@ const CodeContainer = () => {
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside);
document.addEventListener("mousedown", handleClickOutside);
return () => document.removeEventListener("mousedown", handleClickOutside);
}, []);
const commands = {
npm: "npx create-better-t-stack@latest",
yarn: "yarn dlx create better-t-stack",
pnpm: "pnpm dlx create better-t-stack",
bun: "bunx create-better-t-stack"
bun: "bunx create-better-t-stack",
};
const copyToClipboard = async (pm: "npm" | "yarn" | "pnpm" | "bun") => {
@@ -39,7 +41,7 @@ const CodeContainer = () => {
return (
<div className="w-full max-w-3xl mx-auto mt-12">
<div className="relative group">
<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>
<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="relative rounded-lg p-1 bg-slate-900/30 backdrop-blur-xl">
<div className="p-4 font-mono text-gray-300 text-sm bg-black/20 rounded-lg flex items-center justify-between">
<div className="flex items-center gap-2">
@@ -50,6 +52,7 @@ const CodeContainer = () => {
</div>
<div className="relative" ref={menuRef}>
<button
type="button"
onClick={() => setIsOpen(!isOpen)}
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"
>
@@ -67,17 +70,21 @@ const CodeContainer = () => {
<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">
{(["npm", "yarn", "pnpm", "bun"] as const).map((pm) => (
<button
type="button"
key={pm}
onClick={() => copyToClipboard(pm)}
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"
>
<PackageIcon className="h-4 w-4 mr-2 group-hover:scale-110 transition-transform" pm={pm} /> {pm}
<PackageIcon
className="h-4 w-4 mr-2 group-hover:scale-110 transition-transform"
pm={pm}
/>{" "}
{pm}
</button>
))}
</div>
)}
</div>
</div>
</div>
</div>
@@ -85,7 +92,6 @@ const CodeContainer = () => {
);
};
const CopyIcon = ({ className = "" }) => (
<svg
className={className}
@@ -94,6 +100,7 @@ const CopyIcon = ({ className = "" }) => (
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<title>copy</title>
<path
strokeLinecap="round"
strokeLinejoin="round"
@@ -111,6 +118,7 @@ const CheckIcon = ({ className = "" }) => (
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<title>check</title>
<path
strokeLinecap="round"
strokeLinejoin="round"

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

@@ -1,5 +1,5 @@
/** eslint-disable react/jsx-no-comment-textnodes */
import React from 'react'
import React from "react";
const CodeExample = () => {
return (
@@ -17,9 +17,8 @@ const CodeExample = () => {
<div className="space-y-2">
<div className="text-slate-400">{"// ❌ Without Type Safety"}</div>
<div className="text-white">
function processUser(user) {
<span className="text-red-400">console.log(user.namee)</span>
}
function processUser(user){" "}
{<span className="text-red-400">console.log(user.namee)</span>}
</div>
<div className="text-red-400 text-xs bg-red-900/30 p-2 rounded">
Property &apos;namee&apos; does not exist on type &apos;User&apos;.
@@ -30,29 +29,30 @@ const CodeExample = () => {
<div>
<span className="text-blue-400">interface</span>
<span className="text-green-400"> User</span>
<span className="text-white"> {'{'}</span>
<span className="text-white"> {"{"}</span>
</div>
<div className="pl-4 text-slate-200">
name: string;
<br />
age: number;
</div>
<div className="text-white">{'}'}</div>
<div className="text-white">{"}"}</div>
<div>
<span className="text-blue-400">function</span>
<span className="text-yellow-400"> processUser</span>
<span className="text-white">(user: </span>
<span className="text-green-400">User</span>
<span className="text-white">) {'{'}</span>
<span className="text-white">) {"{"}</span>
</div>
<div className="pl-4 text-slate-200">
console.log(user.name) <span className="text-slate-400">{"// ✨ Type checked!"}</span>
console.log(user.name){" "}
<span className="text-slate-400">{"// ✨ Type checked!"}</span>
</div>
<div className="text-white">{'}'}</div>
<div className="text-white">{"}"}</div>
</div>
</div>
</div>
)
}
);
};
export default CodeExample
export default CodeExample;

4
apps/web/src/app/(home)/_components/Icons.tsx
View File

@@ -18,6 +18,7 @@ const PackageIcon = ({ pm, className }: { pm: string; className?: string }) => {
strokeLinejoin="round"
strokeMiterlimit="2"
>
<title>yarn</title>
<path
d="M256 0c141.344 0 256 114.656 256 256S397.344 512 256 512 0 397.344 0 256 114.656 0 256 0z"
fill="#2c8ebb"
@@ -39,7 +40,7 @@ const PackageIcon = ({ pm, className }: { pm: string; className?: string }) => {
viewBox="0 0 32 32"
xmlns="http://www.w3.org/2000/svg"
>
<title>file_type_pnpm</title>
<title>pnpm</title>
<path d="M30,10.75H21.251V2H30Z" style={{ fill: "#f9ad00" }} />
<path d="M20.374,10.75h-8.75V2h8.75Z" style={{ fill: "#f9ad00" }} />
<path d="M10.749,10.75H2V2h8.749Z" style={{ fill: "#f9ad00" }} />
@@ -58,6 +59,7 @@ const PackageIcon = ({ pm, className }: { pm: string; className?: string }) => {
fill="none"
viewBox="0 0 100 100"
>
<title>bun</title>
<path
fill="#000"
d="M89.237 32.3c-.2-.213-.412-.425-.625-.625-.212-.2-.412-.425-.625-.625-.212-.2-.412-.425-.625-.625-.212-.2-.412-.425-.625-.625-.212-.2-.412-.425-.625-.625-.212-.2-.412-.425-.625-.625-.212-.2-.412-.425-.625-.625A33.08 33.08 0 0 1 94.75 51c0 20.712-21.025 37.562-46.875 37.562-14.475 0-27.425-5.287-36.038-13.575l.625.625.625.625.625.625.625.625.625.625.625.625.625.625c8.6 8.638 21.838 14.2 36.663 14.2 25.85 0 46.875-16.85 46.875-37.5 0-8.825-3.8-17.187-10.513-23.762"

9
apps/web/src/app/(home)/_components/NpmPackage.tsx
View File

@@ -5,6 +5,7 @@ import { useEffect, useState } from "react";
const NpmPackage = () => {
const [version, setVersion] = useState("");
useEffect(() => {
const getLatestVersion = async () => {
const res = await fetch(
"https://registry.npmjs.org/create-better-t-stack/latest",
@@ -12,13 +13,14 @@ const NpmPackage = () => {
const data = await res.json();
setVersion(data.version);
};
useEffect(() => {
getLatestVersion();
}, []);
return (
<button className="bg-slate-800 no-underline group cursor-pointer relative shadow-2xl shadow-zinc-900 rounded-full p-px text-xs font-semibold leading-6 text-white inline-block">
<button
type="button"
className="bg-slate-800 no-underline group cursor-pointer relative shadow-2xl shadow-zinc-900 rounded-full p-px text-xs font-semibold leading-6 text-white inline-block"
>
<span className="absolute inset-0 overflow-hidden rounded-full">
<span className="absolute inset-0 rounded-full bg-[image:radial-gradient(75%_100%_at_50%_0%,rgba(56,189,248,0.6)_0%,rgba(56,189,248,0)_75%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
</span>
@@ -31,6 +33,7 @@ const NpmPackage = () => {
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<title>arrow</title>
<path
d="M10.75 8.75L14.25 12L10.75 15.25"
stroke="currentColor"

11
apps/web/src/app/(home)/_components/SafetyMessage.tsx
View File

@@ -1,10 +1,5 @@
const SafetyMessage = () => {
return (
<div className="relative">
return <div className="relative" />;
};
</div>
)
}
export default SafetyMessage
export default SafetyMessage;

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

@@ -1,11 +1,11 @@
import React from "react";
import ShinyText from "components/ShinyText/ShinyText";
import { Poppins } from "next/font/google";
import React from "react";
import BackgroundGradients from "./_components/BackgroundGradients";
import Spotlight from "./_components/Spotlight";
import CodeContainer from "./_components/CodeContainer";
import NpmPackage from "./_components/NpmPackage";
import SideCircles from "./_components/SideCircles";
import CodeContainer from "./_components/CodeContainer";
import ShinyText from "components/ShinyText/ShinyText";
import Spotlight from "./_components/Spotlight";
const poppins = Poppins({
subsets: ["latin"],
@@ -14,7 +14,10 @@ const poppins = Poppins({
export default function HomePage() {
return (
<main className="min-h-screen flex flex-col items-center justify-start p-8" style={poppins.style}>
<main
className="min-h-screen flex flex-col items-center justify-start p-8"
style={poppins.style}
>
<BackgroundGradients />
<Spotlight />
<SideCircles />
@@ -23,7 +26,9 @@ export default function HomePage() {
<div className="flex flex-col items-center justify-center space-y-4 text-center">
<NpmPackage />
<h1 className="text-6xl font-extrabold text-white">
<span className="block text-7xl bg-clip-text text-transparent bg-gradient-to-r from-purple-500 via-pink-400 to-yellow-200">Better-T Stack</span>
<span className="block text-7xl bg-clip-text text-transparent bg-gradient-to-r from-purple-500 via-pink-400 to-yellow-200">
Better-T Stack
</span>
<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>
@@ -41,7 +46,11 @@ export default function HomePage() {
</span>
</p>
<CodeContainer />
<ShinyText text="Be the safest developer with typesafe Typescript" speed={3} className="text-lg" />
<ShinyText
text="Be the safest developer with typesafe Typescript"
speed={3}
className="text-lg"
/>
</div>
</div>
<div className="absolute inset-0 -z-10">

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

@@ -10,10 +10,12 @@
.shiny-text {
color: #b5b5b5a4;
background: linear-gradient(120deg,
background: linear-gradient(
120deg,
rgba(255, 255, 255, 0) 40%,
rgba(255, 255, 255, 0.8) 50%,
rgba(255, 255, 255, 0) 60%);
rgba(255, 255, 255, 0) 60%
);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;

6
apps/web/src/app/layout.tsx
View File

@@ -1,7 +1,7 @@
import "./global.css";
import { RootProvider } from "fumadocs-ui/provider";
import { Inter } from "next/font/google";
import { Suspense, type ReactNode } from "react";
import { type ReactNode, Suspense } from "react";
import Navbar from "./(home)/_components/Navbar";
const inter = Inter({
@@ -15,9 +15,7 @@ export default function Layout({ children }: { children: ReactNode }) {
<RootProvider>
<Navbar />
<div className="relative z-10 bg-zinc-50 dark:bg-zinc-950 pt-20 transition-colors duration-300 overflow-hidden">
<Suspense fallback={<LoadingSpinner />}>
{children}
</Suspense>
<Suspense fallback={<LoadingSpinner />}>{children}</Suspense>
</div>
</RootProvider>
</body>