mirror of
https://github.com/FranP-code/create-better-t-stack.git
synced 2025-10-12 23:52:15 +00:00
Add todo example, remove yarn, change schema structure, update readme
This commit is contained in:
Aman Varshney
@@ -3,9 +3,7 @@ import { useEffect, useRef, useState } from "react";
|
||||
|
||||
const CodeContainer = () => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [selectedPM, setSelectedPM] = useState<"npm" | "yarn" | "pnpm" | "bun">(
|
||||
"npm",
|
||||
);
|
||||
const [selectedPM, setSelectedPM] = useState<"npm" | "pnpm" | "bun">("npm");
|
||||
const [copied, setCopied] = useState(false);
|
||||
const menuRef = useRef<HTMLDivElement>(null);
|
||||
const [typingComplete, setTypingComplete] = useState(false);
|
||||
@@ -24,12 +22,11 @@ const CodeContainer = () => {
|
||||
|
||||
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") => {
|
||||
const copyToClipboard = async (pm: "npm" | "pnpm" | "bun") => {
|
||||
await navigator.clipboard.writeText(commands[pm]);
|
||||
setSelectedPM(pm);
|
||||
setCopied(true);
|
||||
@@ -93,25 +90,23 @@ const CodeContainer = () => {
|
||||
{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>
|
||||
))}
|
||||
{(Object.keys(commands) as Array<"npm" | "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>
|
||||
)}
|
||||
|
||||
@@ -7,30 +7,6 @@ const PackageIcon = ({ pm, className }: { pm: string; className?: string }) => {
|
||||
<path d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z" />
|
||||
</svg>
|
||||
);
|
||||
case "yarn":
|
||||
return (
|
||||
<svg
|
||||
className={className}
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
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"
|
||||
fillRule="nonzero"
|
||||
/>
|
||||
<path
|
||||
d="M430.16 333.59c-1.78-14.035-13.641-23.721-28.863-23.524-22.733.297-41.81 12.06-54.461 19.868-4.943 3.064-9.193 5.337-12.85 7.017.79-11.465.099-26.49-5.832-42.996-7.215-19.768-16.901-31.926-23.82-38.943 8.006-11.664 18.977-28.665 24.117-54.956 4.448-22.437 3.064-57.329-7.117-76.9-2.075-3.953-5.535-6.82-9.884-8.005-1.779-.495-5.14-1.483-11.762.395-9.983-20.658-13.442-22.832-16.111-24.612-5.535-3.558-12.059-4.349-18.187-2.075-8.204 2.965-15.222 10.872-21.844 24.908-.988 2.075-1.878 4.052-2.669 6.03-12.553.889-32.321 5.435-49.025 23.523-2.076 2.274-6.128 3.954-10.379 5.536h.1c-8.699 3.064-12.653 10.18-17.496 23.03-6.721 17.989.198 35.682 7.018 47.147-9.291 8.303-21.646 21.548-28.17 37.066-8.105 19.175-8.994 37.955-8.698 48.136-6.919 7.314-17.594 21.053-18.78 36.472-1.581 21.548 6.227 36.176 9.687 41.514.988 1.581 2.075 2.866 3.261 4.151-.395 2.669-.494 5.535.1 8.5 1.284 6.92 5.633 12.553 12.256 16.112 13.047 6.919 31.234 9.884 45.27 2.866 5.04 5.338 14.232 10.477 30.937 10.477h.988c4.25 0 58.218-2.866 73.934-6.72 7.017-1.681 11.86-4.646 15.023-7.315 10.082-3.163 37.956-12.652 64.248-29.653 18.582-12.058 25.007-14.628 38.844-17.989 13.443-3.262 21.844-15.518 20.164-29.06zm-23.525 14.53c-15.815 3.756-23.821 7.216-43.392 19.966-30.542 19.769-63.95 28.961-63.95 28.961s-2.768 4.151-10.774 6.03c-13.838 3.36-65.927 6.226-70.672 6.325-12.75.1-20.559-3.261-22.733-8.5-6.623-15.815 9.488-22.734 9.488-22.734s-3.558-2.174-5.634-4.151c-1.878-1.878-3.854-5.634-4.448-4.25-2.47 6.03-3.756 20.757-10.378 27.379-9.093 9.192-26.292 6.128-36.473.79-11.169-5.93.791-19.866.791-19.866s-6.03 3.558-10.872-3.756c-4.35-6.722-8.402-18.187-7.315-32.322 1.186-16.11 19.176-31.728 19.176-31.728s-3.163-23.82 7.215-48.235c9.39-22.239 34.694-40.13 34.694-40.13s-21.251-23.524-13.344-44.676c5.14-13.838 7.215-13.739 8.896-14.332 5.93-2.273 11.663-4.744 15.913-9.39 21.251-22.931 48.334-18.582 48.334-18.582s12.85-39.043 24.71-31.432c3.657 2.372 16.803 31.63 16.803 31.63s14.036-8.204 15.617-5.14c8.5 16.506 9.49 48.037 5.733 67.212-6.326 31.63-22.14 48.63-28.466 59.305-1.483 2.471 17 10.28 28.664 42.601 10.774 29.554 1.186 54.363 2.866 57.13.297.495.396.692.396.692s12.355.989 37.164-14.332c13.245-8.204 28.96-17.396 46.851-17.593 17.297-.297 18.187 19.966 5.14 23.128z"
|
||||
fill="#fff"
|
||||
fillRule="nonzero"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
case "pnpm":
|
||||
return (
|
||||
<svg
|
||||
|
||||
@@ -35,7 +35,6 @@ const techOptions: Record<string, TechOption[]> = {
|
||||
packageManager: [
|
||||
{ id: "npm", label: "NPM", category: "packageManager" },
|
||||
{ id: "pnpm", label: "PNPM", category: "packageManager" },
|
||||
{ id: "yarn", label: "Yarn", category: "packageManager" },
|
||||
{ id: "bun", label: "Bun", category: "packageManager" },
|
||||
],
|
||||
addons: [
|
||||
|
||||
Reference in New Issue
Block a user