diff --git a/apps/web/components/ShinyText/ShinyText.tsx b/apps/web/components/ShinyText/ShinyText.tsx index 5725559..739b9c0 100644 --- a/apps/web/components/ShinyText/ShinyText.tsx +++ b/apps/web/components/ShinyText/ShinyText.tsx @@ -1,22 +1,26 @@ - interface ShinyTextProps { - text: string; - disabled?: boolean; - speed?: number; - className?: string; + text: string; + disabled?: boolean; + speed?: number; + className?: string; } -const ShinyText = ({ text, disabled = false, speed = 5, className = '' }: ShinyTextProps) => { - const animationDuration = `${speed}s`; +const ShinyText = ({ + text, + disabled = false, + speed = 5, + className = "", +}: ShinyTextProps) => { + const animationDuration = `${speed}s`; - return ( -
- {text} -
- ); + return ( +
+ {text} +
+ ); }; export default ShinyText; diff --git a/apps/web/src/app/(home)/_components/CenterLines.tsx b/apps/web/src/app/(home)/_components/CenterLines.tsx index b8ec108..46ff9e1 100644 --- a/apps/web/src/app/(home)/_components/CenterLines.tsx +++ b/apps/web/src/app/(home)/_components/CenterLines.tsx @@ -1,18 +1,22 @@ -import React from 'react' +import React from "react"; const CenterLines = () => { - return ( - <> -
-
- - ) -} + shadow-lg backdrop-blur-sm" + /> + + ); +}; -export default CenterLines \ No newline at end of file +export default CenterLines; diff --git a/apps/web/src/app/(home)/_components/CodeContainer.tsx b/apps/web/src/app/(home)/_components/CodeContainer.tsx index 6791ef0..926f38d 100644 --- a/apps/web/src/app/(home)/_components/CodeContainer.tsx +++ b/apps/web/src/app/(home)/_components/CodeContainer.tsx @@ -1,123 +1,131 @@ "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 [copied, setCopied] = useState(false); - const menuRef = useRef(null); + const [isOpen, setIsOpen] = useState(false); + const [selectedPM, setSelectedPM] = useState<"npm" | "yarn" | "pnpm" | "bun">( + "npm", + ); + const [copied, setCopied] = useState(false); + const menuRef = useRef(null); - useEffect(() => { - const handleClickOutside = (event: MouseEvent) => { - if (menuRef.current && !menuRef.current.contains(event.target as Node)) { - setIsOpen(false); - } - }; + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if (menuRef.current && !menuRef.current.contains(event.target as Node)) { + setIsOpen(false); + } + }; - 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" - }; + 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", + }; - const copyToClipboard = async (pm: "npm" | "yarn" | "pnpm" | "bun") => { - await navigator.clipboard.writeText(commands[pm]); - setSelectedPM(pm); - setCopied(true); - setIsOpen(false); - setTimeout(() => setCopied(false), 2000); - }; + const copyToClipboard = async (pm: "npm" | "yarn" | "pnpm" | "bun") => { + await navigator.clipboard.writeText(commands[pm]); + setSelectedPM(pm); + setCopied(true); + setIsOpen(false); + setTimeout(() => setCopied(false), 2000); + }; - return ( -
-
-
-
-
-
- - - {commands[selectedPM]} - -
-
- - {isOpen && ( -
- {(["npm", "yarn", "pnpm", "bun"] as const).map((pm) => ( - - ))} -
- )} -
- -
-
-
-
- ); + return ( +
+
+
+
+
+
+ + + {commands[selectedPM]} + +
+
+ + {isOpen && ( +
+ {(["npm", "yarn", "pnpm", "bun"] as const).map((pm) => ( + + ))} +
+ )} +
+
+
+
+
+ ); }; - const CopyIcon = ({ className = "" }) => ( - - - + + copy + + ); const CheckIcon = ({ className = "" }) => ( - - - + + check + + ); -export default CodeContainer; \ No newline at end of file +export default CodeContainer; diff --git a/apps/web/src/app/(home)/_components/CodeExample.tsx b/apps/web/src/app/(home)/_components/CodeExample.tsx index 4dfde7d..c69b650 100644 --- a/apps/web/src/app/(home)/_components/CodeExample.tsx +++ b/apps/web/src/app/(home)/_components/CodeExample.tsx @@ -1,58 +1,58 @@ /** eslint-disable react/jsx-no-comment-textnodes */ -import React from 'react' +import React from "react"; const CodeExample = () => { - return ( -
-
-
-
-
-
-
- example.ts -
+ return ( +
+
+
+
+
+
+
+ example.ts +
-
-
-
{"// ❌ Without Type Safety"}
-
- function processUser(user) { - console.log(user.namee) - } -
-
- Property 'namee' does not exist on type 'User'. - Did you mean 'name'? -
+
+
+
{"// ❌ Without Type Safety"}
+
+ function processUser(user){" "} + {console.log(user.namee)} +
+
+ Property 'namee' does not exist on type 'User'. + Did you mean 'name'? +
-
{"// ✅ With Type Safety"}
-
- interface - User - {'{'} -
-
- name: string; -
- age: number; -
-
{'}'}
-
- function - processUser - (user: - User - ) {'{'} -
-
- console.log(user.name) {"// ✨ Type checked!"} -
-
{'}'}
-
-
-
- ) -} +
{"// ✅ With Type Safety"}
+
+ interface + User + {"{"} +
+
+ name: string; +
+ age: number; +
+
{"}"}
+
+ function + processUser + (user: + User + ) {"{"} +
+
+ console.log(user.name){" "} + {"// ✨ Type checked!"} +
+
{"}"}
+
+
+
+ ); +}; -export default CodeExample +export default CodeExample; diff --git a/apps/web/src/app/(home)/_components/Icons.tsx b/apps/web/src/app/(home)/_components/Icons.tsx index 18f0724..47dad25 100644 --- a/apps/web/src/app/(home)/_components/Icons.tsx +++ b/apps/web/src/app/(home)/_components/Icons.tsx @@ -18,6 +18,7 @@ const PackageIcon = ({ pm, className }: { pm: string; className?: string }) => { strokeLinejoin="round" strokeMiterlimit="2" > + yarn { viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" > - file_type_pnpm + pnpm @@ -58,6 +59,7 @@ const PackageIcon = ({ pm, className }: { pm: string; className?: string }) => { fill="none" viewBox="0 0 100 100" > + bun { const [version, setVersion] = useState(""); - const getLatestVersion = async () => { - const res = await fetch( - "https://registry.npmjs.org/create-better-t-stack/latest", - ); - const data = await res.json(); - setVersion(data.version); - }; - useEffect(() => { + const getLatestVersion = async () => { + const res = await fetch( + "https://registry.npmjs.org/create-better-t-stack/latest", + ); + const data = await res.json(); + setVersion(data.version); + }; getLatestVersion(); }, []); return ( -