Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/ethanniser/mcmaster-next
Browse files Browse the repository at this point in the history
  • Loading branch information
@ethanniser
ethanniser committed Oct 18, 2024
2 parents bd6cabb + d687302 commit 2625a1d
Show file tree
Hide file tree
Showing 5 changed files with 79 additions and 314 deletions.
118 changes: 2 additions & 116 deletions src/app/data.ts
View file
Original file line number Diff line number Diff line change
@@ -1,119 +1,4 @@
export const categories = [
"Abrasives & Polishing",
"Building & Grounds",
"Electrical & Lighting",
"Fabricating",
"Fastening & Joining",
"Filtering",
"Flow & Level Control",
"Furniture & Storage",
"Hand Tools",
"Hardware",
"Heating & Cooling",
"Lubricating",
"Material Handling",
"Measuring & Inspecting",
"Office Supplies & Signs",
"Pipe, Tubing, Hose & Fittings",
"Plumbing & Janitorial",
"Power Transmission",
"Pressure & Temperature Control",
"Pulling & Lifting",
"Raw Materials",
"Safety Supplies",
"Sealing & Cutting",
"Sealing",
"Shipping",
"Suspending",
];

export const productCategories = [
{
name: "Fastening & Joining",
subcategories: [
{ name: "Screws & Bolts", icon: "/placeholder.svg?height=50&width=50" },
{
name: "Threaded Rods & Studs",
icon: "/placeholder.svg?height=50&width=50",
},
{ name: "Eyebolts", icon: "/placeholder.svg?height=50&width=50" },
{ name: "U-Bolts", icon: "/placeholder.svg?height=50&width=50" },
{ name: "Nuts", icon: "/placeholder.svg?height=50&width=50" },
{ name: "Washers", icon: "/placeholder.svg?height=50&width=50" },
{ name: "Shims", icon: "/placeholder.svg?height=50&width=50" },
{
name: "Helical & Threaded Inserts",
icon: "/placeholder.svg?height=50&width=50",
},
{
name: "Spacers & Standoffs",
icon: "/placeholder.svg?height=50&width=50",
},
{ name: "Pins", icon: "/placeholder.svg?height=50&width=50" },
{ name: "Anchors", icon: "/placeholder.svg?height=50&width=50" },
],
},
{
name: "Pipe, Tubing, Hose & Fittings",
subcategories: [
{
name: "Pipe Fittings & Pipe",
icon: "/placeholder.svg?height=50&width=50",
},
{ name: "Pipe Hangers", icon: "/placeholder.svg?height=50&width=50" },
{ name: "Pipe Joints", icon: "/placeholder.svg?height=50&width=50" },
{
name: "Pipe & Tube Repair Tools",
icon: "/placeholder.svg?height=50&width=50",
},
{
name: "Pipe Flange Spreaders",
icon: "/placeholder.svg?height=50&width=50",
},
{ name: "Tubing", icon: "/placeholder.svg?height=50&width=50" },
{ name: "Tube Fittings", icon: "/placeholder.svg?height=50&width=50" },
{ name: "Tube Cutters", icon: "/placeholder.svg?height=50&width=50" },
{
name: "Tube Flaring Tools",
icon: "/placeholder.svg?height=50&width=50",
},
{ name: "Tube Benders", icon: "/placeholder.svg?height=50&width=50" },
{ name: "Manifolds", icon: "/placeholder.svg?height=50&width=50" },
{ name: "Hose", icon: "/placeholder.svg?height=50&width=50" },
{ name: "Hose Fittings", icon: "/placeholder.svg?height=50&width=50" },
{ name: "Hose Nozzles", icon: "/placeholder.svg?height=50&width=50" },
{
name: "Hose & Tube Clamps",
icon: "/placeholder.svg?height=50&width=50",
},
{ name: "Hose Reels", icon: "/placeholder.svg?height=50&width=50" },
{ name: "Tank Fittings", icon: "/placeholder.svg?height=50&width=50" },
],
},
{
name: "Power Transmission",
subcategories: [
{ name: "Bearings", icon: "/placeholder.svg?height=50&width=50" },
{ name: "Bushings", icon: "/placeholder.svg?height=50&width=50" },
{
name: "Bearing & Gear Pullers",
icon: "/placeholder.svg?height=50&width=50",
},
{ name: "Bearing Heaters", icon: "/placeholder.svg?height=50&width=50" },
{ name: "Motors", icon: "/placeholder.svg?height=50&width=50" },
{ name: "Speed Reducers", icon: "/placeholder.svg?height=50&width=50" },
{ name: "Clutches", icon: "/placeholder.svg?height=50&width=50" },
{
name: "Brake & Clutch Lining",
icon: "/placeholder.svg?height=50&width=50",
},
{ name: "Shafts", icon: "/placeholder.svg?height=50&width=50" },
{ name: "Shaft Couplings", icon: "/placeholder.svg?height=50&width=50" },
{ name: "Shaft Collars", icon: "/placeholder.svg?height=50&width=50" },
{ name: "U-Joints", icon: "/placeholder.svg?height=50&width=50" },
],
},
];



Expand Down Expand Up @@ -223,12 +108,13 @@ export const artSupplies = [
collectionName: "Painting Supplies",
categories: [{
categoryName: "Acrylic Paints (Basic and Professional Grades)",
icon: "/images/acrylic-paint-icon.png",
categoryItems: [
{
subCollectionName: "Basic Acrylic Paints",
subcategories: [
{
name: "Student Grade",
subcategoryName: "Student Grade",
products: [
{
name: "Basics Acrylic Paint Set",
Expand Down
8 changes: 4 additions & 4 deletions src/app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import localFont from "next/font/local";
import "./globals.css";
import { Input } from "@/components/ui/input";
import { Search } from "lucide-react";
import { categories } from "./data";
// import { artSupplies } from "./data";
import Link from "next/link";

const helvetica = localFont({
Expand Down Expand Up @@ -36,7 +36,7 @@ export default function RootLayout({
className={`${helvetica.variable} ${helveticaRoman.variable} ${futura.variable} flex min-h-full flex-col antialiased`}
>
<div className="flex flex-grow flex-col">
<header className="font-futura flex items-center justify-between border-b-2 border-yellow-300 p-4">
<header className="flex items-center justify-between border-b-2 border-yellow-300 p-4 font-futura">
<div className="flex items-center space-x-4">
<Link href="/" className="text-4xl font-bold text-green-800">
NextMaster
Expand Down Expand Up @@ -70,7 +70,7 @@ export default function RootLayout({
Choose a Category
</h2>
<ul className="">
{categories.map((category) => (
{/* {categories.map((category) => (
<li key={category} className="group pb-2 hover:bg-yellow-200">
<a
href="#"
Expand All @@ -79,7 +79,7 @@ export default function RootLayout({
{category}
</a>
</li>
))}
))} */}
</ul>
</aside>
<main className="flex-grow">{children}</main>
Expand Down
22 changes: 12 additions & 10 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,29 @@
import Link from "next/link";
import { productCategories } from "./data";
import { artSupplies } from "./data";

export default function Home() {
return (
<main className="flex-1 p-4">
{productCategories.map((category) => (
<div key={category.name} className="mb-8">
<h2 className="mb-4 text-xl font-semibold">{category.name}</h2>
{artSupplies.map((collection) => (
<div key={collection.collectionName} className="mb-8">
<h2 className="mb-4 text-xl font-semibold">
{collection.collectionName}
</h2>
<div className="grid grid-cols-2 gap-4 border-b-2 pb-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
{category.subcategories.map((subcategory) => (
{collection.categories.map((category) => (
<Link
key={subcategory.name}
key={category.categoryName}
className="flex flex-col items-center text-center"
href={`/products/${subcategory.name}`}
href={`/products/${category.categoryName}`}
>
<img
src={subcategory.icon}
alt={subcategory.name}
src={category.icon}
alt={category.categoryName}
className="mb-2 h-14 w-14 border hover:bg-yellow-200"
width={48}
height={48}
/>
<span className="text-xs">{subcategory.name}</span>
<span className="text-xs">{category.categoryName}</span>
</Link>
))}
</div>
Expand Down
106 changes: 43 additions & 63 deletions src/app/products/[category]/[subcategory]/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,7 @@
import Link from "next/link";
import Image from "next/image";
const screwTypes = [
{
name: "Socket Head Screws",
items: [
{
name: "Alloy Steel Socket Head Screws",
description: "The standard for high-strength fastening.",
imageUrl: "/placeholder.svg?height=50&width=50",
},
{
name: "Mil. Spec. Alloy Steel Socket Head Screws",
description:
"Choose these screws for their adherence to strict military standards for material and construction.",
imageUrl: "/placeholder.svg?height=50&width=50",
},
{
name: "Torx Alloy Steel Socket Head Screws",
description:
"A Torx-Plus drive has more points of contact than a hex drive, allowing you to tighten these screws with less slippage or damage to the recess.",
imageUrl: "/placeholder.svg?height=50&width=50",
},
{
name: "Left-Hand Threaded Alloy Steel Socket Head Screws",
description:
"Tighten these screws by turning them to the left; once fastened, they prevent counterclockwise-moving parts from loosening.",
imageUrl: "/placeholder.svg?height=50&width=50",
},
],
},
];
import { artSupplies } from "@/app/data";
import { notFound } from "next/navigation";

export default async function Page(props: {
params: Promise<{
Expand All @@ -38,43 +10,51 @@ export default async function Page(props: {
}>;
}) {
const { subcategory, category } = await props.params;
const urlDecodedCategory = decodeURIComponent(category);
const categoryData = artSupplies.find((c) =>
c.categories.find((cat) => cat.categoryName === urlDecodedCategory),
);
const cat = categoryData?.categories.find(
(cat) => cat.categoryName === urlDecodedCategory,
);
const urlDecodedSubcategory = decodeURIComponent(subcategory);
const screwTypes = cat?.categoryItems.find((collection) =>
collection.subcategories.find(
(sub) => sub.subcategoryName === urlDecodedSubcategory,
),
);
const sub = screwTypes?.subcategories.find(
(sub) => sub.subcategoryName === urlDecodedSubcategory,
);
if (!sub) {
return notFound();
}
return (
<div className="container mx-auto p-4">
<h1 className="mb-2 border-b-2 text-sm font-bold">690 Products</h1>
<div className="space-y-4">
{screwTypes.map((collection, index) => (
<div key={index}>
<h2 className="mb-2 border-b-2 text-lg font-semibold">
{collection.name}
</h2>
<div className="grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4">
{collection.items.map((item, subcategoryIndex) => (
<Link
key={subcategoryIndex}
className="group flex h-full flex-row border px-4 py-2 hover:bg-gray-100"
href={`/products/${category}/${subcategory}/${item.name}`}
>
<div className="py-2">
<Image
src="/placeholder.svg?height=48&width=48"
alt={item.name}
width={48}
height={48}
className="h-12 w-12 flex-shrink-0 object-cover"
/>
</div>
<div className="flex h-24 flex-grow flex-col items-start py-2">
<div className="text-sm font-medium text-gray-700 group-hover:underline">
{item.name}
</div>
<p className="overflow-hidden text-xs">
{item.description}
</p>
</div>
</Link>
))}
<div className="grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4">
{sub.products.map((item) => (
<Link
key={item.name}
className="group flex h-full flex-row border px-4 py-2 hover:bg-gray-100"
href={`/products/${category}/${subcategory}/${item.name}`}
>
<div className="py-2">
<Image
src="/placeholder.svg?height=48&width=48"
alt={item.name}
width={48}
height={48}
className="h-12 w-12 flex-shrink-0 object-cover"
/>
</div>
<div className="flex h-24 flex-grow flex-col items-start py-2">
<div className="text-sm font-medium text-gray-700 group-hover:underline">
{item.name}
</div>
<p className="overflow-hidden text-xs">{item.description}</p>
</div>
</div>
</Link>
))}
</div>
</div>
Expand Down
Loading

0 comments on commit 2625a1d

Please sign in to comment.