Skip to content

Commit 56ab549

Browse files
nooobcodernooobcoder
committed
Storefront UI build
1 parent 4da5945 commit 56ab549

File tree

8 files changed

+180
-8
lines changed

8 files changed

+180
-8
lines changed

‎remix-medusa-ecommerce/remix-medusa-storefront/app/layouts/footer.jsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from "react";
2+
3+
// Get current year
4+
const currentYear = new Date().getFullYear();
5+
6+
const Footer = () => (
7+
<div className="py-4 text-sm text-center text-gray-200 bg-gray-800">
8+
&copy; Copyright {currentYear} [Brand name]. All Rights Reserved
9+
</div>
10+
);
11+
12+
export default Footer;

‎remix-medusa-ecommerce/remix-medusa-storefront/app/layouts/index.jsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import Footer from "./footer";
2+
import Navbar from "./navbar";
3+
4+
export default function Layout({ children }) {
5+
return (
6+
<>
7+
<header className="border-b">
8+
<Navbar />
9+
</header>
10+
<main className="container flex justify-center flex-grow mx-auto">
11+
{children}
12+
</main>
13+
<Footer />
14+
</>
15+
);
16+
}

‎remix-medusa-ecommerce/remix-medusa-storefront/app/layouts/navbar.jsx

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { Link, NavLink } from "@remix-run/react";
2+
import { BiShoppingBag } from "react-icons/bi";
3+
4+
export default function Navbar() {
5+
const links = [
6+
{
7+
label: "Home",
8+
url: "/",
9+
},
10+
{
11+
label: "Products",
12+
url: "/products",
13+
},
14+
{
15+
label: "About",
16+
url: "/about",
17+
},
18+
];
19+
20+
return (
21+
<nav className="flex items-center justify-between px-8 pt-2">
22+
{/* Site Logo */}
23+
<div className="font-mono text-3xl font-extrabold uppercase">
24+
<Link to="/">
25+
<img className="w-28" src="/logo.svg" alt="Medusa" />
26+
</Link>
27+
</div>
28+
29+
{/* Navigation Links */}
30+
<div className="space-x-4">
31+
{links.map((link, index) => (
32+
<NavLink key={index} to={link.url} className="navlink">
33+
{link.label}
34+
</NavLink>
35+
))}
36+
</div>
37+
38+
{/* Shopping Cart Indicator/Checkout Link */}
39+
<div className="font-semibold text-gray-600 hover:text-emerald-500">
40+
<NavLink
41+
to="/checkout"
42+
className="inline-flex items-center space-x-1 transition-colors duration-300"
43+
>
44+
<BiShoppingBag className="text-xl" /> <span>0</span>
45+
</NavLink>
46+
</div>
47+
</nav>
48+
);
49+
}

‎remix-medusa-ecommerce/remix-medusa-storefront/app/root.tsx

Lines changed: 34 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,31 +7,58 @@ import {
77
ScrollRestoration,
88
} from "@remix-run/react";
99
import stylesUrl from "~/styles/app.css";
10+
import Layout from "./layouts";
1011

11-
import type { LinksFunction, MetaFunction } from "@remix-run/node";
12+
import type {
13+
ErrorBoundaryComponent,
14+
LinksFunction,
15+
MetaFunction,
16+
} from "@remix-run/node";
17+
18+
interface DocumentProps {
19+
children: React.ReactNode;
20+
}
1221

1322
export const meta: MetaFunction = () => ({
1423
charset: "utf-8",
15-
title: "New Remix App",
24+
title: "Medusa Remix StoreFront",
1625
viewport: "width=device-width,initial-scale=1",
1726
});
1827

1928
const links: LinksFunction = () => [{ rel: "stylesheet", href: stylesUrl }];
29+
const ErrorBoundary: ErrorBoundaryComponent = ({ error }) => (
30+
<Document>
31+
<Layout>
32+
<div className="text-red-500">
33+
<h1>Error</h1>
34+
<p>{error.message}</p>
35+
</div>
36+
</Layout>
37+
</Document>
38+
);
2039

21-
export default function App() {
40+
function Document({ children }: DocumentProps) {
2241
return (
2342
<html lang="en">
2443
<head>
2544
<Meta />
2645
<Links />
2746
</head>
28-
<body>
47+
<body>{children}</body>
48+
</html>
49+
);
50+
}
51+
52+
export default function App() {
53+
return (
54+
<Document>
55+
<Layout>
2956
<Outlet />
3057
<ScrollRestoration />
3158
<Scripts />
3259
<LiveReload />
33-
</body>
34-
</html>
60+
</Layout>
61+
</Document>
3562
);
3663
}
37-
export { links };
64+
export { links, ErrorBoundary };

‎remix-medusa-ecommerce/remix-medusa-storefront/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
"@remix-run/react": "^1.5.1",
1414
"@remix-run/serve": "^1.5.1",
1515
"react": "^17.0.2",
16-
"react-dom": "^17.0.2"
16+
"react-dom": "^17.0.2",
17+
"react-icons": "^4.3.1"
1718
},
1819
"devDependencies": {
1920
"@remix-run/dev": "^1.5.1",

‎remix-medusa-ecommerce/remix-medusa-storefront/public/logo.svg

Lines changed: 15 additions & 0 deletions
Loading

‎remix-medusa-ecommerce/remix-medusa-storefront/styles/app.css

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,50 @@
11
@tailwdind base;
22
@tailwind components;
33
@tailwind utilities;
4+
5+
/*
6+
Layout styling
7+
*/
8+
html {
9+
@apply antialiased font-sans text-gray-800 bg-gray-200;
10+
}
11+
12+
body {
13+
@apply flex flex-col min-h-screen overflow-x-hidden;
14+
}
15+
16+
/*
17+
Typography styling
18+
*/
19+
20+
h1 {
21+
@apply text-3xl font-bold;
22+
}
23+
24+
h2 {
25+
@apply text-xl;
26+
}
27+
28+
p {
29+
@apply text-gray-700;
30+
}
31+
32+
/*
33+
Navigation menu styling
34+
*/
35+
36+
.navlink {
37+
@apply inline-block w-20 py-2 font-semibold text-center text-gray-500 hover:text-emerald-500;
38+
}
39+
40+
.navlink:after {
41+
@apply block pb-2 border-b-2 border-emerald-400 transition ease-in-out duration-300 origin-[0%_50%] content-[""] scale-x-0;
42+
}
43+
44+
.navlink:hover:after {
45+
@apply scale-x-100;
46+
}
47+
48+
a.active {
49+
@apply font-bold text-gray-700;
50+
}

‎remix-medusa-ecommerce/remix-medusa-storefront/yarn.lock

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5273,6 +5273,11 @@ react-dom@^17.0.2:
52735273
object-assign "^4.1.1"
52745274
scheduler "^0.20.2"
52755275

5276+
react-icons@^4.3.1:
5277+
version "4.3.1"
5278+
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.3.1.tgz#2fa92aebbbc71f43d2db2ed1aed07361124e91ca"
5279+
integrity sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==
5280+
52765281
react-is@^16.13.1:
52775282
version "16.13.1"
52785283
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"

0 commit comments

Comments
 (0)