5 feature single article

.github/ISSUE_TEMPLATE/feature_request.md

@@ -3,11 +3,10 @@ name: Feature request
 about: Add  a featrue to this project
 title: "[Feature] : "
 labels: enhancement, feature
-assignees: ''
-
+assignees: ""
 ---
 
-**Please Describe the feature.** 
+**Please Describe the feature.**
 A clear and concise description of what the feature is [...].
 
 **Describe the solution you'd like**

src/components/Rating/StarRating.jsx

@@ -0,0 +1,23 @@
+import React from "react"
+
+const StarRating = ({ rating }) => {
+  const stars = []
+  for (let i = 0; i < 5; i++) {
+    if (i < rating) {
+      stars.push(
+        <span key={i} role="img" aria-label="star" className="star">
+          &#11088;
+        </span>,
+      )
+    } else {
+      stars.push(
+        <span key={i} role="img" aria-label="star" className="star">
+          &#9734;
+        </span>,
+      )
+    }
+  }
+  return <div className="star-rating">{stars}</div>
+}
+
+export default StarRating

src/components/ShoppingCard/ShoppingCard.jsx

@@ -1,34 +1,34 @@
 import Link from "next/link"
 import StarRating from "../Rating/StarRating"
-
-export default function ShoppingCard({ product }) {
+export default function ShoppingCard({ id, title, image, price, rating }) {
   return (
-    <Link href={`/products/${product.id}`}>
+    <Link href={`/products/${id}`}>
       <div
         className="card w-90 bg-white glass border-gold-g "
         style={{ minHeight: "450px" }}
-        key={product.id}
+        key={id}
       >
         <figure>
           <img
-            src={product.image}
-            alt={product.title}
+            src={image}
+            alt={title}
+
             style={{ width: "60%", height: "250px", padding: "1rem" }}
           />
         </figure>
         <div className="card-body text-center">
           <h2 className="card-title text-text-brown mb-2 ">
-            {product.title.length > 25
-              ? `${product.title.slice(0, 25)}...`
-              : product.title}
-          </h2>
-          <StarRating rating={product.rating.rate} />
 
+            {title.length > 25 ? `${title.slice(0, 25)}...` : title}
+          </h2>
+          <StarRating rating={rating.rate} />
           <div className="flex flex-wrap items-start gap-16 ">
             <button className="btn bg-buttongold text-brown-text-brown px-4 py-2 hover:bg-buttongoldhov border border-brown-100 btn-xs sm:btn-sm md:btn-sm lg:btn-sm">
               add to cart
             </button>
-            <p className="font-bold text-xl">{product.price}$</p>
+
+            <p className="font-bold text-xl">{price}$</p>
+
           </div>
         </div>
       </div>

src/pages/products/[productid].jsx

@@ -0,0 +1,122 @@
+import Link from "next/link"
+import React from "react"
+import StarRating from "@/components/Rating/StarRating"
+
+function splitTitleIntoLines(title) {
+  const words = title.split(" ")
+  const lines = []
+  let currentLine = ""
+
+  for (let i = 0; i < words.length; i++) {
+    currentLine += words[i] + " "
+    if ((i + 1) % 4 === 0 || i === words.length - 1) {
+      lines.push(currentLine.trim())
+      currentLine = ""
+    }
+  }
+
+  return lines
+}
+
+export default function productPage({ productData }) {
+  return (
+    <>
+      <div className="min-w-screen min-h-screen bg-gold-g flex items-center p-5 lg:p-10 overflow-hidden relative">
+        <div className="w-full max-w-6xl rounded bg-pale-thing shadow-xl p-10 lg:p-20 mx-auto text-gray-800 relative md:text-left">
+          <div className="md:flex items-center -mx-10">
+            <div className="w-full md:w-1/2 px-10 mb-10 md:mb-0">
+              <div className="relative">
+                <img
+                  src={productData.image}
+                  className="w-full relative z-10"
+                  alt=""
+                />
+                <div className="border-4 border-yellow-200 absolute top-10 bottom-10 left-10 right-10 z-0"></div>
+              </div>
+            </div>
+            <div className="w-full md:w-1/2 px-10">
+              <div className="relative text-xs uppercase mb-10 text-buttongold opacity-75 hover:opacity-100 inline-block leading-none text-2xl">
+                {productData.category}
+              </div>
+              <div className="mb-10 text-text-brown">
+                {splitTitleIntoLines(productData.title).map((line, index) => (
+                  <h1 key={index} className="font-bold text-2xl mb-5">
+                    {line}
+                  </h1>
+                ))}
+
+                <div className="my-2">
+                  <StarRating rating={productData.rating.rate} />
+                </div>
+                <p className="text-sm text-text-brown">
+                  {productData.description}
+                </p>
+              </div>
+              <div>
+                <div className="inline-block align-bottom mr-5">
+                  <span className="text-2xl leading-none align-baseline">
+                    $
+                  </span>
+                  <span className="font-bold text-5xl leading-none align-baseline">
+                    {productData.price}
+                  </span>
+                </div>
+
+                <div className="inline-block align-bottom">
+                  <button className="bg-buttongold opacity-75 hover:opacity-100 text-yellow-900 hover:text-gray-900 rounded-full px-10 py-2 font-semibold">
+                    <i className="mdi mdi-cart -ml-2 mr-2"></i> ADD TO CART
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className=" mt-20"></div>
+          <div className="absolute bottom-3 left-3">
+            <Link href="/">
+              <button className="bg-buttongold opacity-100 hover:bg-buttongoldhov opacity-80 text-yellow-900 hover:text-gray-900 rounded-full px-10 py-2 font-semibold flex items-center">
+                <i className="mdi mdi-cart -ml-2 mr-2"></i>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  strokeWidth={1.5}
+                  stroke="currentColor"
+                  className="w-6 h-6"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M19.5 12h-15m0 0l6.75 6.75M4.5 12l6.75-6.75"
+                  />
+                </svg>
+                <span className="ml-2">Back to shopping</span>
+              </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export async function getServerSideProps(context) {
+  const { productid } = context.params
+  const url = `https://fakestoreapi.com/products/${productid}`
+  console.log(context.params, context.query, "hello", productid)
+
+  const options = {
+    method: "GET",
+    headers: {
+      accept: "application/json",
+    },
+  }
+
+  const response = await fetch(url, options)
+  const data = await response.json()
+
+  return {
+    props: {
+      productData: data,
+    },
+  }
+}

src/pages/products/electronics.jsx

@@ -0,0 +1,64 @@
+import React from "react"
+import Link from "next/link"
+import StarRating from "@/components/Rating/StarRating"
+import Card from "@/components/ShoppingCard/ShoppingCard"
+
+const buttonStyle = {
+  backgroundColor: "#BC9B7F",
+  color: "white",
+  fontWeight: "bold",
+  borderRadius: "5px",
+  padding: "10px 20px",
+  marginLeft: "1rem",
+  marginRight: "1rem",
+}
+
+export default function electronics({ electronicsData }) {
+  console.log(electronicsData.results)
+  return (
+    <>
+      <div className="bg-pale-thing">
+        <Link href={`/products/electronics`} target="_BLANK">
+          <button style={buttonStyle}>01</button>
+        </Link>
+        <Link href={`/products/men's%20clothing`} target="_BLANK">
+          <button style={buttonStyle}>02</button>
+        </Link>
+        <Link href={`/products/women's%20clothing`} target="_BLANK">
+          <button style={buttonStyle}>03</button>
+        </Link>
+
+        <div className="py-10">
+          <div style={{ textAlign: "center" }}>
+            <h1 className="text-4xl font-bold text-brown-700">
+              electronics section
+            </h1>
+          </div>
+          <div className="grid grid-cols-4 gap-6 ml-16 mr-16 my-10">
+            {electronicsData.map((product) => (
+              <Card key={product.id} {...product} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export async function getStaticProps() {
+  const url = "https://fakestoreapi.com/products/category/electronics"
+  const options = {
+    headers: {
+      accept: "application/json",
+    },
+  }
+
+  const response = await fetch(url, options)
+  const data = await response.json()
+
+  return {
+    props: {
+      electronicsData: data,
+    },
+  }
+}

src/pages/products/index.js

@@ -0,0 +1,5 @@
+import React from "react"
+
+export default function Products() {
+  return <div>Products</div>
+}