Merge pull request #2 from Naicriz/development

Development stable version merge

.vscode/settings.json

@@ -1,4 +1,9 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "synthwave84.brightness": 0.45,
+  "synthwave84.disableGlow": false,
+  "files.associations": {
+  "*.css": "tailwindcss"
+  },
 }

app/Header.tsx

@@ -4,37 +4,34 @@ import Image from 'next/image'
 import { Inter } from '@next/font/google'
 import Link from 'next/link'
 
-export default function Header() {
+export default function HeaderStore() {
     return (
         <>
             <header>
-                <div className="flex items-center justify-between p-2 bg-gray-100 rounded-b-sm shadow-md">
-                    <div className="absolute items-center justify-center m-1 overflow-hidden bg-gray-200 rounded-lg shadow-lg">
-                        <Link href="/">
-                            <Image
-                                src="/astraqr.png"
-                                alt="Astra Logo"
-                                className="relative object-cover w-11 h-11"
-                                priority
-                                height={500}
-                                width={500}
-                                quality={100}
-                            />
-                        </Link>
-                    </div>
-                    <div>
-
-                    </div>
-                    <button className="py-2 m-1 font-medium text-white bg-black rounded-md px-14 text-md hover:bg-gray-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
-                        Crea tu tienda
+                <div className="flex items-center justify-between bg-white shadow-md rounded-b-md">
+                    <Link href="/" className="items-center justify-start m-1 overflow-hidden rounded-full">
+                        <Image
+                            src="/astraqr.png"
+                            alt="Astra Logo"
+                            className="relative object-cover w-11 h-11"
+                            priority
+                            height={500}
+                            width={500}
+                            quality={80}
+                        />
+                    </Link>
+                    <br />
+                    <Link href="/signin" className="flex flex-row px-6 py-1 my-1 mr-2 transition rounded-full md:mr-4 bg-slate-800 hover:bg-slate-600 focus:outline-none focus-visible:ring-1 focus-visible:ring-slate-500 focus-visible:ring-opacity-55">
+                        <div className="font-medium text-white text-start">Registrar mi tienda</div>
                         <Image
                             src="/tienda.svg"
-                            width={12}
-                            height={12}
-                            alt="tienda"
-                            className=""
+                            width={19}
+                            height={19}
+                            alt="Tienda Icon"
+                            className="items-center justify-end ml-2"
+                            quality={75}
                         />
-                    </button>
+                    </Link>
                 </div>
             </header>
         </>

app/[storeid]/bannerProfile.tsx

@@ -1,32 +1,32 @@
 import React from "react";
 import Image from 'next/image'
+import bannerStore1 from "public/bannerstore1.png";
+import bannerStore3 from "public/bannerstore3.jpg";
 
-function BannerProfile() {
+export default function BannerProfile() {
     return (
-        <div className="relative flex flex-col items-center justify-center w-full p-4 m-4 mx-auto rounded-lg shadow-xl mb-14 border-1 h-36 md:h-48">
-            <div className="">
+        <div className="relative flex flex-col items-center justify-center w-full m-1 mx-auto border-4 rounded-lg shadow-lg mb-14 h-36 md:h-48 border-slate-200 group">
+            <div className="relative items-center justify-center w-full h-full">
                 <Image
-                    src="/banner1.png"
-                    alt="Banner tienda"
-                    className="object-cover w-full h-full rounded-lg"
-                    fill={true}
+                    src={bannerStore3}
+                    alt="Picture banner tienda"
+                    className="absolute object-cover w-full h-full rounded-lg"
+                    quality={90}
                     priority
-                    quality={100}
                 />
             </div>
-            <div className="absolute w-32 h-32 mx-auto my-auto overflow-hidden border-2 border-yellow-100 rounded-full shadow-xl md:w-36 md:h-36 -bottom-12">
+            <div className="absolute w-32 h-32 mx-auto my-auto overflow-hidden border-4 rounded-full shadow-md border-slate-200 md:w-36 md:h-36 -bottom-12">
                 <Image
                     src="/openboxlogo.jpg"
                     alt="Profile tienda"
-                    className="object-center w-full h-full"
-                    fill={true}
+                    className="object-contain object-center w-full h-full"
+                    height={1024}
+                    width={1024}
                     priority
-                    quality={100}
+                    quality={80}
                 />
             </div>
         </div>
 
     );
-};
-
-export default BannerProfile;
+}

app/[storeid]/catalogContainer.tsx

@@ -0,0 +1,23 @@
+import ItemCard from "./itemCard"
+
+export default function CatalogContainer() {
+    return (
+        <div className="relative grid col-span-11 grid-rows-1 row-start-1 p-2 bg-white border border-gray-100 rounded-md shadow-sm bg-black-400 md:col-span-8">
+            <div className="relative grid h-16 grid-rows-2 mb-2 text-start">
+                <span className="block mb-2 font-sans text-2xl uppercase text-slate-700">
+                    sushi
+                </span>
+                <span className="block mt-2 font-sans text-xl uppercase border-t text-slate-600">
+                    avocado rolls
+                </span>
+            </div>
+            <div className="relative grid grid-cols-1 gap-1 lg:grid-cols-2">
+                {/* <ItemCard /> */}
+                <ItemCard />
+                <ItemCard />
+                <ItemCard />
+                <ItemCard />
+            </div>
+        </div>
+    );
+}

app/[storeid]/itemCard.tsx

@@ -0,0 +1,37 @@
+import Image from 'next/image'
+
+export default function ItemCard() {
+    return (
+        <div className="relative h-32 row-span-1 bg-white border rounded-md shadow-sm w-38 border-slate-100">
+            <div className="relative grid grid-flow-row grid-cols-6">
+                <div className="relative items-center justify-center order-last w-auto col-span-2 overflow-hidden">
+                    <Image
+                        src="/imagesushi.jpg"
+                        alt="Item tienda"
+                        className="object-cover object-center w-full h-32 rounded-md rounded-l-none"
+                        width={500}
+                        height={500}
+                        priority
+                        quality={80}
+                    />
+                </div>
+                <div className="relative h-32 grid-flow-row col-span-4 grid-rows-3 p-1 overflow-hidden">
+                    <p className="relative row-span-1 font-sans text-lg font-medium capitalize truncate text-slate-600">
+                        California ebi sake roll
+                    </p>
+                    <div className="relative flex items-baseline justify-start flex-auto row-span-1 gap-1">
+                        <p className="font-sans font-normal text-green-600 text-md">
+                            CLP 19.200
+                        </p>
+                        <p className="relative font-sans text-sm font-thin line-through text-slate-500">
+                            CLP 22.100
+                        </p>
+                    </div>
+                    <p className="relative row-span-1 font-sans font-normal text-ellipsis text-slate-500">
+                        Lorem ipsum dolor sit ame consectetur adipisicing elit. Quisquam, quod. Lorem ipsum dolor sit ame consectetur adipisicing elit. Quisquam, quod. Lorem ipsum dolor sit ame consectetur adipisicing elit. Quisquam, quod.
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+}

app/[storeid]/itemCardfFeatured.tsx

@@ -0,0 +1,13 @@
+
+export default function ItemCardFeatured() {
+    return (
+        <div className="h-40 max-w-sm bg-slate-500">
+            <ul>
+                <li>I'll be a featured card juasjuasjuas</li>
+                <li>// ItemCardFeatured</li>
+                <li>⭐ Prod Destacado - slider de unos 3 o 4 productos</li>
+                <li>🖼️ cubrir todo? - texto se vea en el fondo?</li>
+            </ul>
+        </div>
+    );
+}

app/[storeid]/layout.tsx

@@ -0,0 +1,15 @@
+import '../globals.css'
+import HeaderStore from "../Header";
+
+export default function RootLayout({
+    children,
+}: {
+    children: React.ReactNode
+}) {
+    return (
+        <section>
+            <HeaderStore />
+            {children}
+        </section>
+    )
+}

app/[storeid]/navBar.tsx

@@ -0,0 +1,12 @@
+export default function NavBar() {
+    return (
+        <nav className="sticky inset-0 w-auto grid-rows-1 gap-4 p-4 overflow-auto bg-white border rounded-md shadow-md border-slate-100 h-14 lg:hidden scroll-smooth">
+            <div className="divide-x bg-slate-100 text-start">
+                Categoría Padre - Slider
+            </div>
+            <div className="bg-slate-100 text-start">
+                Categoría Padre - Slider
+            </div>
+        </nav>
+    );
+}

app/[storeid]/page.tsx

@@ -1,17 +1,31 @@
+"use client";
+
 import React from "react";
 import BannerProfile from "./bannerProfile";
-import CardCategory from "./cardItem";
+import SideBar from './sideBar';
+import CatalogContainer from './catalogContainer';
+import ItemCardFeatured from "./itemCardfFeatured";
+import NavBar from "./navBar";
 
-function StoreMenu() {
+export default function StorePage() {
     return (
         <>
             <BannerProfile />
-            <div className="text-center">
-                PÁGINA CARTA QR - RESTAURANTE | TEXTO DE PRUEBA
+            {/* Contenedor de Sidebar e Itemcards con grid */}
+            <div>
+                <div className="container relative items-center justify-center">
+                    <div className="grid-cols-1 grid-rows-1 row-span-1 sm:mx-6 lg:mx-10 lg:grid-cols-11 lg:gap-4">
+                        <ItemCardFeatured />
+                    </div>
+                    <div className="grid-cols-1 grid-rows-1 row-span-1 sm:mx-6 lg:mx-10 lg:grid-cols-11 lg:gap-4">
+                        <NavBar />
+                    </div>
+                    <div className="grid items-center grid-cols-1 grid-rows-2 row-span-1 sm:mx-6 lg:mx-10 lg:grid-cols-11 lg:gap-4">
+                        <SideBar />
+                        <CatalogContainer />
+                    </div>
+                </div>
             </div>
-            <CardCategory />
         </>
     );
-};
-
-export default StoreMenu;
+}

app/[storeid]/sideBar.tsx

@@ -0,0 +1,27 @@
+export default function SideBar() {
+    return (
+        <nav className="sticky inset-0 hidden w-full h-screen grid-cols-1 gap-4 p-4 overflow-auto bg-white border rounded-md shadow-sm border-slate-100 scroll-smooth lg:col-span-3 lg:grid">
+            <div className="divide-y bg-slate-100 text-start">
+                Categoría Padre -
+            </div>
+            <div className="bg-slate-100 text-start">
+                Categoría Padre -
+            </div>
+            <div className="bg-slate-100 text-start">
+                Categoría Padre -
+            </div>
+            <div className="bg-slate-100 text-start">
+                Categoría Padre -
+            </div>
+            <div className="bg-slate-100 text-start">
+                Categoría Padre -
+            </div>
+            <div className="bg-slate-100 text-start">
+                Categoría Padre -
+            </div>
+            <div className="bg-slate-100 text-start">
+                Categoría Padre -
+            </div>
+        </nav>
+    );
+}

app/dashboard/page.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+export default function Dashboard() {
+    return (
+        <>
+            <h1 className="text-3xl font-bold text-center underline">
+                Página de Panel de Control de Administrador AstraQR
+            </h1>
+        </>
+    );
+}