Connected Sanity backend

Author: saajan94

.env

@@ -0,0 +1 @@
+NEXT_PUBLIC_SANITY_TOKEN = skxjuOeFqGI0VuzMcThXkf1d7QTpygziADzD3J2eLUCtpsVfNsr4kBhmNtOQLqvsMSxDSSne1KQu3BaWiLCHzcntbdcU0pQoP5VrhrIEkfBN6cYt4ZnYG5EzkjOwr1yjkiLZm48AIu1sgCUUcXrL81sTYikwCk0yjAdIwPZKJRp4BjQmclUG

.gitignore

@@ -1,7 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
+node_modules
 /.pnp
 .pnp.js
 

components/Cart.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Cart = () => {
+  return (
+    <div>Cart</div>
+  )
+}
+
+export default Cart

components/Footer.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Footer = () => {
+  return (
+    <div>Footer</div>
+  )
+}
+
+export default Footer

components/FooterBanner.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const FooterBanner = () => {
+  return (
+    <div>FooterBanner</div>
+  )
+}
+
+export default FooterBanner

components/HeroBanner.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+import Link from "next/link";
+
+import { urlFor } from "../lib/client";
+
+const HeroBanner = ({ heroBanner }) => {
+  return (
+    <div className="hero-banner-container">
+      <div>
+        <p className="beats-solo">{heroBanner.smallText}</p>
+        <h3>{heroBanner.midText}</h3>
+        <h1>{heroBanner.largeText1}</h1>
+        <img
+          src={urlFor(heroBanner.image)}
+          alt="headphones"
+          className="hero-banner-image"
+        />
+        <div>
+          <Link href={`/product/heroBanner.product`}>
+            <button type="button">{heroBanner.buttonText}</button>
+          </Link>
+          <div className="desc">
+            <h5>Description</h5>
+            <p>{heroBanner.desc}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default HeroBanner;

components/Layout.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Navbar = () => {
+  return (
+    <div>Navbar</div>
+  )
+}
+
+export default Navbar

components/Navbar.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import Link from "next/link";
+
+import { urlFor } from "../lib/client";
+
+const Product = ({ product: { image, name, slug, price } }) => {
+  return (
+    <div>
+      <Link href={`/product/${slug.current}`}>
+        <div className="product-card">
+          <img
+            src={urlFor(image && image[0])}
+            width={250}
+            height={250}
+            className="product-image"
+          />
+          <p className="product-name">{name}</p>
+          <p className="product-price">${price}</p>
+        </div>
+      </Link>
+    </div>
+  );
+};
+
+export default Product;

components/Product.jsx

@@ -0,0 +1,7 @@
+export { default as Footer } from "./Footer";
+export { default as Cart } from "./Cart";
+export { default as FooterBanner } from "./FooterBanner";
+export { default as HeroBanner } from "./HeroBanner";
+export { default as Layout } from "./Layout";
+export { default as Navbar } from "./Navbar";
+export { default as Product } from "./Product";

components/index.js

@@ -0,0 +1,14 @@
+import sanityClient from "@sanity/client";
+import imageUrlBuilder from "@sanity/image-url";
+
+export const client = sanityClient({
+  projectId: "rnf15voj",
+  dataset: "production",
+  apiVersion: "2022-03-10",
+  useCdn: true,
+  token: process.env.NEXT_PUBLIC_SANITY_TOKEN,
+});
+
+const builder = imageUrlBuilder(client);
+
+export const urlFor = (source) => builder.image(source);