First Commit

day-7-complete/NikeJordee/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

day-7-complete/NikeJordee/.gitignore

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

day-7-complete/NikeJordee/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

day-7-complete/NikeJordee/app/actions/actions.ts

@@ -0,0 +1,75 @@
+// actions/actions.ts
+import { Product } from '@/types/product';
+
+
+export const addToWishlist = (product: Product) => {
+    const wishlist: Product[] = JSON.parse(localStorage.getItem('wishlist') || '[]');
+    const existingProductIndex = wishlist.findIndex(item => item._id === product._id);
+
+    if (existingProductIndex === -1) {
+        wishlist.push(product);
+        localStorage.setItem('wishlist', JSON.stringify(wishlist));
+    }
+};
+
+export const removeFromWishlist = (productId: string) => {
+    let wishlist: Product[] = JSON.parse(localStorage.getItem('wishlist') || '[]');
+    wishlist = wishlist.filter(item => item._id !== productId);
+    localStorage.setItem('wishlist', JSON.stringify(wishlist));
+};
+
+export const getWishlistItems = (): Product[] => {
+    return JSON.parse(localStorage.getItem('wishlist') || '[]');
+};
+
+export const moveAllToCart = () => {
+    const wishlist: Product[] = getWishlistItems();
+    const cart: Product[] = JSON.parse(localStorage.getItem('cart') || '[]');
+
+    wishlist.forEach(product => {
+        const existingProductIndex = cart.findIndex(item => item._id === product._id);
+        if (existingProductIndex > -1) {
+            cart[existingProductIndex].quantity += 1;
+        } else {
+            cart.push({ ...product, quantity: 1 });
+        }
+    });
+
+    localStorage.setItem('cart', JSON.stringify(cart));
+    localStorage.setItem('wishlist', '[]');
+};
+
+
+export const addToCart = (product: Product) => {
+    const cart: Product[] = JSON.parse(localStorage.getItem('cart') || '[]');
+    const existingProductIndex = cart.findIndex(item => item._id === product._id);
+
+    if (existingProductIndex > -1) {
+        cart[existingProductIndex].quantity += 1;
+    } else {
+        cart.push({ ...product, quantity: 1 });
+    }
+
+    localStorage.setItem('cart', JSON.stringify(cart));
+};
+
+export const removeFromCart = (productId: string) => {
+    let cart: Product[] = JSON.parse(localStorage.getItem('cart') || '[]');
+    cart = cart.filter(item => item._id !== productId);
+    localStorage.setItem('cart', JSON.stringify(cart));
+};
+
+export const updateCartQuantity = (productId: string, quantity: number) => {
+    const cart: Product[] = JSON.parse(localStorage.getItem('cart') || '[]');
+    const productIndex = cart.findIndex(item => item._id === productId);
+
+    if (productIndex > -1) {
+        cart[productIndex].quantity = quantity;
+        localStorage.setItem('cart', JSON.stringify(cart));
+    }
+};
+
+export const getCartItems = (): Product[] => {
+    return JSON.parse(localStorage.getItem('cart') || '[]');
+};
+

day-7-complete/NikeJordee/app/cart/page.tsx

@@ -0,0 +1,6 @@
+import CartPage from "@/components/cart-page"
+
+export default function Cart() {
+    return <CartPage />
+}
+

day-7-complete/NikeJordee/app/checkout/page.tsx

@@ -0,0 +1,6 @@
+import BillingPage from "@/components/billing-page"
+
+export default function CheckoutPage() {
+    return <BillingPage />
+}
+

day-7-complete/NikeJordee/app/contact/page.tsx

@@ -0,0 +1,12 @@
+import ContactPage from '@/components/contact-page'
+import React from 'react'
+
+const page = () => {
+  return (
+    <div>
+        <ContactPage/>
+    </div>
+  )
+}
+
+export default page

day-7-complete/NikeJordee/app/globals.css

@@ -0,0 +1,66 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%
+  }
+}
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

day-7-complete/NikeJordee/app/help/[slug]/page.tsx

@@ -0,0 +1,90 @@
+import { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+// import Image from 'next/image';
+import { groq } from 'next-sanity';
+import { client } from '@/sanity/lib/client';
+// import { urlFor } from '@/sanity/lib/image';
+import { HelpType } from '@/types/help';
+
+interface ProductPageProps {
+  params: Promise<{ slug: string }>; // Wrap params in Promise
+}
+
+async function getProduct(slug: string): Promise<HelpType | null> {
+  return client.fetch(
+    groq`*[_type == "help" && slug.current == $slug][0]{
+      _id,
+      _type,
+      name,
+    //   image,
+      subtitle,
+      description
+    }`,
+    { slug }
+  );
+}
+
+export async function generateMetadata({ params }: ProductPageProps): Promise<Metadata> {
+  const { slug } = await params;
+  const product = await getProduct(slug);
+
+  if (!product) {
+    return {
+      title: 'Product Not Found',
+    };
+  }
+
+  return {
+    title: product.name,
+    description: product.description,
+  };
+}
+
+export default async function ProductPage({ params }: ProductPageProps) {
+  const { slug } = await params; // Resolve the promise to get slug
+  const product = await getProduct(slug);
+
+  if (!product) {
+    notFound();
+  }
+
+  return (
+    <div className="max-w-7xl mt-10 mx-auto px-4 h-full mb-10 sm:px-6 lg:px-8 py-12 bg-gray-50">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
+        {/* Image Section */}
+        {/* <div className="flex justify-center items-center">
+          {product.image ? (
+            <Image
+              src={urlFor(product.image).url()}
+              alt={product.name}
+              width={500}
+              height={500}
+              className="rounded-lg shadow-lg object-cover"
+            />
+          ) : (
+            <div className="w-64 h-64 bg-gray-200 flex items-center justify-center rounded-lg shadow-lg">
+              <span className="text-gray-500">No Image Available</span>
+            </div>
+          )}
+        </div> */}
+
+        {/* Details Section */}
+        <div className="flex flex-col gap-6">
+          <h1 className="text-4xl font-bold text-gray-800 tracking-tight">
+            {product.name}
+          </h1>
+          <h2 className="text-xl font-semibold text-gray-600">
+            {product.subtitle}
+          </h2>
+          <p className="text-gray-700 leading-relaxed text-base">
+            {product.description}
+          </p>
+
+          {/* <button className="w-full md:w-48 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-4 rounded-lg transition duration-300">
+            Learn More
+          </button> */}
+        </div>
+      </div>
+    </div>
+  );
+}

day-7-complete/NikeJordee/app/help/page.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { client } from "@/sanity/lib/client";
+import { helpQuery } from "@/sanity/lib/queries";
+import { HelpType } from "@/types/help";
+import React, { useEffect, useState } from "react";
+import Link from "next/link"; // Import Link for routing
+
+const Help = () => {
+  const [helps, setHelps] = useState<HelpType[]>([]);
+
+  useEffect(() => {
+    async function fetchHelps() {
+      const fetchedHelps: HelpType[] = await client.fetch(helpQuery);
+      setHelps(fetchedHelps);
+    }
+    fetchHelps();
+  }, []);
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-10 px-4">
+      <div className="max-w-7xl mx-auto">
+        <h1 className="text-4xl font-bold text-gray-800 mb-8 text-center">Help Topics</h1>
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+          {helps.map((help) => (
+            <div
+              key={help._id}
+              className="bg-white shadow-md rounded-lg p-6 hover:shadow-xl transition-shadow"
+            >
+              <Link href={`/help/${help.slug.current}`}>
+                  <h2 className="text-2xl font-semibold text-blue-600 hover:underline">
+                    {help.name}
+                  </h2>
+                  <p className="text-gray-600 mt-2">{help.subtitle}</p>
+              </Link>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Help;