basic seach small json data set models and parts
This commit is contained in:
Executable
+265
@@ -0,0 +1,265 @@
|
||||
#!/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!"
|
||||
|
||||
Reference in New Issue
Block a user