266 lines
6.0 KiB
Bash
Executable File
266 lines
6.0 KiB
Bash
Executable File
#!/bin/zsh
|
|
|
|
echo "🚀 Setting up RC Compatibility App (Next.js + Tailwind v4 + Sass)..."
|
|
|
|
BASE="src/app"
|
|
|
|
#############################################
|
|
# 1️⃣ CREATE DIRECTORY STRUCTURE
|
|
#############################################
|
|
|
|
mkdir -p "$BASE"
|
|
mkdir -p "$BASE/model/[modelId]"
|
|
mkdir -p "$BASE/category/[modelId]/[categoryName]"
|
|
mkdir -p "$BASE/part/[partId]"
|
|
mkdir -p "$BASE/compatibility"
|
|
mkdir -p "$BASE/garage"
|
|
mkdir -p "$BASE/components"
|
|
mkdir -p "$BASE/styles/components"
|
|
|
|
#############################################
|
|
# 2️⃣ WRITE ROOT LAYOUT + MAIN PAGES
|
|
#############################################
|
|
|
|
cat > "$BASE/layout.js" << 'EOF'
|
|
import "./styles/globals.scss";
|
|
|
|
export const metadata = {
|
|
title: "RC Compatibility Explorer",
|
|
description: "Find compatibility across RC models and parts",
|
|
};
|
|
|
|
export default function RootLayout({ children }) {
|
|
return (
|
|
<html lang="en">
|
|
<body>
|
|
{children}
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|
|
EOF
|
|
|
|
cat > "$BASE/page.js" << 'EOF'
|
|
export default function HomePage() {
|
|
return (
|
|
<div>
|
|
<h1 className="text-4xl font-bold mb-4 text-primary">RC Compatibility Explorer</h1>
|
|
<p>Search for RC models, parts, and compare compatibility.</p>
|
|
</div>
|
|
);
|
|
}
|
|
EOF
|
|
|
|
#############################################
|
|
# 3️⃣ MODEL PAGE
|
|
#############################################
|
|
|
|
cat > "$BASE/model/[modelId]/page.js" << 'EOF'
|
|
export default function ModelPage({ params }) {
|
|
const { modelId } = params;
|
|
return (
|
|
<div>
|
|
<h1 className="text-2xl font-bold mb-2 text-primary">Model: {modelId}</h1>
|
|
<p>Details and component categories for this RC model.</p>
|
|
</div>
|
|
);
|
|
}
|
|
EOF
|
|
|
|
#############################################
|
|
# 4️⃣ CATEGORY PAGE
|
|
#############################################
|
|
|
|
cat > "$BASE/category/[modelId]/[categoryName]/page.js" << 'EOF'
|
|
export default function CategoryPage({ params }) {
|
|
const { modelId, categoryName } = params;
|
|
return (
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-primary">{categoryName} for {modelId}</h1>
|
|
<p>List of compatible parts for this category.</p>
|
|
</div>
|
|
);
|
|
}
|
|
EOF
|
|
|
|
#############################################
|
|
# 5️⃣ PART DETAIL PAGE
|
|
#############################################
|
|
|
|
cat > "$BASE/part/[partId]/page.js" << 'EOF'
|
|
export default function PartDetailPage({ params }) {
|
|
const { partId } = params;
|
|
return (
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-primary">Part Detail: {partId}</h1>
|
|
<p>Specifications and compatibility info.</p>
|
|
</div>
|
|
);
|
|
}
|
|
EOF
|
|
|
|
#############################################
|
|
# 6️⃣ COMPATIBILITY EXPLORER
|
|
#############################################
|
|
|
|
cat > "$BASE/compatibility/page.js" << 'EOF'
|
|
export default function CompatibilityPage() {
|
|
return (
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-primary mb-4">Compatibility Explorer</h1>
|
|
<p>Compare RC models and parts side-by-side.</p>
|
|
</div>
|
|
);
|
|
}
|
|
EOF
|
|
|
|
#############################################
|
|
# 7️⃣ GARAGE
|
|
#############################################
|
|
|
|
cat > "$BASE/garage/page.js" << 'EOF'
|
|
export default function GaragePage() {
|
|
return (
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-primary mb-4">Your Garage</h1>
|
|
<p>Save your RC models and parts here.</p>
|
|
</div>
|
|
);
|
|
}
|
|
EOF
|
|
|
|
#############################################
|
|
# 8️⃣ COMPONENTS
|
|
#############################################
|
|
|
|
cat > "$BASE/components/SearchBar.js" << 'EOF'
|
|
export default function SearchBar() {
|
|
return (
|
|
<input
|
|
type="text"
|
|
placeholder="Search..."
|
|
className="border p-2 rounded w-full"
|
|
/>
|
|
);
|
|
}
|
|
EOF
|
|
|
|
cat > "$BASE/components/ModelCard.js" << 'EOF'
|
|
export default function ModelCard({ model }) {
|
|
return (
|
|
<div className="model-card">
|
|
<h2 className="font-bold">{model.name}</h2>
|
|
<p>{model.scale} Scale</p>
|
|
</div>
|
|
);
|
|
}
|
|
EOF
|
|
|
|
cat > "$BASE/styles/components/model-card.scss" << 'EOF'
|
|
.model-card {
|
|
@apply border rounded p-4 shadow;
|
|
background: $card-bg;
|
|
}
|
|
EOF
|
|
|
|
cat > "$BASE/components/PartCard.js" << 'EOF'
|
|
export default function PartCard({ part }) {
|
|
return (
|
|
<div className="part-card">
|
|
<h2 className="font-bold">{part.name}</h2>
|
|
<p>ID: {part.id}</p>
|
|
</div>
|
|
);
|
|
}
|
|
EOF
|
|
|
|
cat > "$BASE/styles/components/part-card.scss" << 'EOF'
|
|
.part-card {
|
|
@apply border rounded p-4 shadow;
|
|
background: $card-bg;
|
|
}
|
|
EOF
|
|
|
|
cat > "$BASE/components/NavBar.js" << 'EOF'
|
|
import Link from "next/link";
|
|
import "../styles/components/navbar.scss";
|
|
|
|
export default function NavBar() {
|
|
return (
|
|
<nav className="navbar">
|
|
<Link href="/">Home</Link>
|
|
<Link href="/compatibility">Compatibility</Link>
|
|
<Link href="/garage">Garage</Link>
|
|
</nav>
|
|
);
|
|
}
|
|
EOF
|
|
|
|
cat > "$BASE/styles/components/navbar.scss" << 'EOF'
|
|
.navbar {
|
|
@apply flex gap-4 p-4 border-b;
|
|
background: $nav-bg;
|
|
}
|
|
EOF
|
|
|
|
#############################################
|
|
# 9️⃣ INSTALL TAILWIND v4 + SASS
|
|
#############################################
|
|
|
|
echo "📦 Installing Tailwind v4 & Sass..."
|
|
npm install -D tailwindcss@latest sass
|
|
|
|
#############################################
|
|
# 🔟 GLOBAL STYLES + VARIABLES
|
|
#############################################
|
|
|
|
cat > "$BASE/styles/variables.scss" << 'EOF'
|
|
$background: #ffffff;
|
|
$text-color: #111111;
|
|
|
|
$primary: #0070f3;
|
|
$secondary: #7928ca;
|
|
|
|
$card-bg: #f8f8f8;
|
|
$nav-bg: #fafafa;
|
|
|
|
:root {
|
|
--color-primary: #0070f3;
|
|
--color-secondary: #7928ca;
|
|
}
|
|
EOF
|
|
|
|
cat > "$BASE/styles/globals.scss" << 'EOF'
|
|
@import "tailwindcss";
|
|
@import "./variables";
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: sans-serif;
|
|
background: $background;
|
|
color: $text-color;
|
|
}
|
|
EOF
|
|
|
|
#############################################
|
|
# 1️⃣1️⃣ OPTIONAL: TAILWIND CONFIG (THEME COLORS)
|
|
#############################################
|
|
|
|
cat > tailwind.config.js << 'EOF'
|
|
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: "var(--color-primary)",
|
|
secondary: "var(--color-secondary)"
|
|
}
|
|
}
|
|
}
|
|
};
|
|
EOF
|
|
|
|
echo "🎉 RC Compatibility App fully set up with Next.js + Tailwind v4 + Sass!"
|
|
|