Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/uses next router #29

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Feature/uses next router #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e16f077
next/link added instead of native anchor element
MohdAhmad1 Aug 19, 2021
5e25780
added slim progress bar on page change
MohdAhmad1 Aug 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions components/cart/CartFooter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useContext } from "react";
import { CartContext } from "pages/cart";
import Link from "next/link";

const CartFooter: React.FC = () => {
const { cartState } = useContext(CartContext);
Expand All @@ -12,13 +13,12 @@ const CartFooter: React.FC = () => {
</span>
</div>
<div className="mt-3">税と配送料は購入手続き時に計算されます</div>
<div className="max-w-xs mx-auto md:mr-0">
<a
href={cartState.value.webUrl}
className="bg-gray-700 flex-grow inline-block mt-12 px-4 py-3 text-sm text-white w-full md:w-auto"
>
ご購入手続きへ
</a>
<div className="mx-auto max-w-xs md:mr-0">
<Link href={cartState.value.webUrl} passHref>
<a className="flex-grow bg-gray-700 mt-12 text-sm text-white w-full py-3 px-4 inline-block md:w-auto">
ご購入手続きへ
</a>
</Link>
</div>
</div>
);
Expand Down
45 changes: 28 additions & 17 deletions components/cart/CartItemRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import Image from "next/image";
import { LineItem } from "shopify-buy";
import { CartContext } from "pages/cart";
import { QuantityInput } from "components/cart/QuantityInput";
import Link from "next/link";

type Props = {
item: LineItem;
Expand All @@ -24,27 +25,37 @@ const CartItemRow: React.FC<Props> = ({ item }) => {
};

return (
<tr className="border-gray-200 border-b">
<td className="py-5 text-left w-4/6">
<tr className="border-b border-gray-200">
<td className="text-left py-5 w-4/6">
<div className="flex">
<figure className="flex-grow-0 flex-shrink-0 pr-6 md:pr-12 w-20 md:w-36">
<a
<figure className="flex-grow-0 flex-shrink-0 pr-6 w-20 md:pr-12 md:w-36">
<Link
href={`/products/${variant.product.handle}?variant=${variant.id}`}
passHref
>
<Image priority src={imgSrc} height={150} width={150} />
</a>
<a>
<Image
priority
src={imgSrc}
height={150}
width={150}
alt={title}
/>
</a>
</Link>
</figure>
<div>
<div className="font-semibold text-gray-700 text-sm hover:underline">
<a
<div className="font-semibold text-sm text-gray-700 hover:underline">
<Link
href={`/products/${variant.product.handle}?variant=${variant.id}`}
passHref
>
{title}
</a>
<a>{title}</a>
</Link>
</div>
<div className="mt-3">
{item.variant.selectedOptions.map((opt, idx) => (
<div className="text-gray-700 text-sm" key={idx}>
<div className="text-sm text-gray-700" key={idx}>
<span>{opt.name}:</span>
<span>{opt.value}</span>
</div>
Expand All @@ -53,27 +64,27 @@ const CartItemRow: React.FC<Props> = ({ item }) => {
<div className="mt-3">
<button
onClick={() => onClickHandler(item.id as string)}
className="border-b border-gray-600 text-gray-700 text-sm"
className="border-b border-gray-600 text-sm text-gray-700"
>
削除
</button>
</div>
</div>
</div>
</td>
<td className="align-top md:align-middle p-5 text-right text-gray-700 md:w-1/6 w-2/6">
<td className="text-right p-5 text-gray-700 w-2/6 align-top md:w-1/6 md:align-middle">
<div className="text-sm">¥{price.toLocaleString("ja-JP")}</div>
<div className="md:hidden mt-3">
<label className="inline-block mt-auto mb-auto mr-2 my-auto text-xs">
<div className="mt-3 md:hidden">
<label className="my-auto mt-auto mb-auto mr-2 text-xs inline-block">
数量
</label>
<QuantityInput id={item.id as string} quantity={quantity} />
</div>
</td>
<td className="md:table-cell hidden p-5 text-gray-700 text-right w-1/6">
<td className="text-right p-5 text-gray-700 w-1/6 hidden md:table-cell">
<QuantityInput id={item.id as string} quantity={quantity} />
</td>
<td className="md:table-cell hidden p-5 pr-0 text-gray-700 text-right w-1/6">
<td className="text-right p-5 pr-0 text-gray-700 w-1/6 hidden md:table-cell">
¥{subtotal.toLocaleString("ja-JP")}
</td>
</tr>
Expand Down
26 changes: 15 additions & 11 deletions components/collections/ProductCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from "react";
import Image from "next/image";
import { Product } from "lib/graphql/collection/getCollectionWithProducts";
import Link from "next/link";

type Props = {
product: Product;
Expand All @@ -14,20 +15,23 @@ const ProductCard: React.FC<Props> = ({ product }) => {
<div className="product-card">
<div className="product-card__inner">
<figure className="product-card__image" style={{ margin: 0 }}>
<a href={`/products/${product.handle}`}>
<Image
priority
src={product.images[0]?.originalSrc}
height={400}
width={400}
/>
</a>
<Link href={`/products/${product.handle}`} passHref>
<a>
<Image
priority
src={product.images[0]?.originalSrc}
height={400}
width={400}
alt={product.title}
/>
</a>
</Link>
</figure>
<div className="product-card__info mt-2" style={{ textAlign: "left" }}>
<div className="product-card__title font-semibold text-sm md:text-base">
<div className="mt-2 product-card__info" style={{ textAlign: "left" }}>
<div className="font-semibold text-sm product-card__title md:text-base">
{product.title}
</div>
<div className="product-card__price font-semibold text-sm">
<div className="font-semibold text-sm product-card__price">
¥{price.toLocaleString("ja-JP")}
{priceVaries && "から"}
</div>
Expand Down
2 changes: 1 addition & 1 deletion components/collections/ProductList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ type Props = {
};

const ProductList: React.FC<Props> = ({ products }) => (
<div className="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-9 py-9 md:py-14 md:py-12">
<div className="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-9 py-9 md:py-14">
{products.map((product, idx) => (
<ProductCard product={product} key={idx} />
))}
Expand Down
30 changes: 15 additions & 15 deletions components/common/Footer/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,46 @@
import React from "react";
import Link from "next/link";

const Footer: React.FC = () => {
const onClickHandler = () => {
alert("Sorry, newsletter subscription feature is not implemented");
};
return (
<footer className="bg-gray-50 border-t border-gray-200 pt-12 pb-14">
<div className="footer__upper container md:grid md:grid-cols-2">
<div className="links mb-12 md:mb-0 px-4 md:px-0">
<footer className="border-t bg-gray-50 border-gray-200 pt-12 pb-14">
<div className="container footer__upper md:grid md:grid-cols-2">
<div className="mb-12 px-4 links md:mb-0 md:px-0">
<div className="font-semibold">クイックリンク</div>
<ul>
<li className="py-4">
<a
href="/search"
className="hover:text-opacity-70 text-gray-800 hover:underline"
>
検索
</a>
<Link href="/search" passHref>
<a className="text-gray-800 hover:text-opacity-70 hover:underline">
検索
</a>
</Link>
</li>
</ul>
</div>
<div className="newsletter mb-12 md:mb-0 px-4 md:px-0">
<div className="mb-12 px-4 newsletter md:mb-0 md:px-0">
<div className="font-semibold mb-4">ニュースレター</div>
<div className="flex flex-wrap">
<input
className="border border-gray-200 px-4 py-3 rounded-sm text-sm"
className="border rounded-sm border-gray-200 text-sm py-3 px-4"
type="text"
placeholder="メールアドレス"
style={{ flex: "9999 0 15rem" }}
/>
<button
className="bg-gray-700 flex-grow inline-block px-4 py-3 text-sm text-white"
className="flex-grow bg-gray-700 text-sm text-white py-3 px-4 inline-block"
onClick={onClickHandler}
>
登録する
</button>
</div>
</div>
</div>
<hr className="mt-14 md:mt-24 mb-7 md:mb-5" />
<div className="footer__bottom container md:text-right text-center">
<div className="inline-block text-xs text-gray-800 tracking-tight">
<hr className="mt-14 mb-7 md:mt-24 md:mb-5" />
<div className="container text-center footer__bottom md:text-right">
<div className="text-xs tracking-tight text-gray-800 inline-block">
&copy; 2021, sample-kuma-store1 Powered by Shopify
</div>
</div>
Expand Down
27 changes: 13 additions & 14 deletions components/common/Header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import MenuList from "components/common/Header/MenuList";
import MenuButton from "components/common/Header/MenuButton";
import { bagIcon } from "components/utils/Icon";
import { Collapse } from "@material-ui/core";
import Link from "next/link";

const Header: React.FC = () => {
const [opened, setOpened] = React.useState(false);
Expand All @@ -13,25 +14,23 @@ const Header: React.FC = () => {
};

return (
<header className="header border-b border-gray-200">
<div className="header__inner container items-center flex justify-between md:grid md:grid-cols-3 xl:max-w-none xl:px-14">
<div className="header__logo text-left mt-3 md:mt-6 mb-3 md:mb-6 ">
<a
href="/"
className="font-semibold leading-none text-lg md:text-xl text-gray-800 hover:text-opacity-70 tracking-widest"
>
SAMPLE-KUMA-STORE1
</a>
<header className="border-b border-gray-200 header">
<div className="container flex header__inner items-center justify-between md:grid md:grid-cols-3 xl:max-w-none xl:px-14">
<div className="mt-3 text-left mb-3 header__logo md:mt-6 md:mb-6 ">
<Link href="/" passHref>
<a className="font-semibold text-lg leading-none tracking-widest text-gray-800 md:text-xl hover:text-opacity-70">
SAMPLE-KUMA-STORE1
</a>
</Link>
</div>

<MenuList visibility="hidden md:block" />

<div className="header__icons flex items-center justify-end">
<div className="flex header__icons items-center justify-end">
<SearchDrawer />

<a href="/cart" className="bag inline-block p-2 text-gray-700">
{bagIcon}
</a>
<Link href="/cart" passHref>
<a className="p-2 text-gray-700 bag inline-block">{bagIcon}</a>
</Link>
<MenuButton opened={opened} toggleAccordion={toggleAccordion} />
</div>
</div>
Expand Down
35 changes: 19 additions & 16 deletions components/common/Header/MenuList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from "react";
import Link from "next/link";

type Props = {
visibility: string;
Expand All @@ -8,27 +9,29 @@ const MenuList: React.FC<Props> = ({ visibility }) => {
return (
<nav className={`md:text-center ${visibility}`}>
<ul>
<li className="border-t md:border-t-0 border-gray-200 md:inline-block">
<a
href="/"
className="block mx-auto px-8 md:px-4 py-4 text-gray-700 hover:text-opacity-70 hover:underline"
style={{ maxWidth: "640px" }}
>
All
</a>
<li className="border-t border-gray-200 md:border-t-0 md:inline-block">
<Link href="/" passHref>
<a
className="mx-auto py-4 px-8 text-gray-700 block md:px-4 hover:text-opacity-70 hover:underline"
style={{ maxWidth: "640px" }}
>
All
</a>
</Link>
</li>
{["apple", "watch"].map((title, idx) => (
<li
className="border-t md:border-t-0 border-gray-20 md:inline-block"
className="border-t border-gray-20 md:border-t-0 md:inline-block"
key={idx}
>
<a
href={`/collections/${title}`}
className="block mx-auto px-8 md:px-4 py-4 text-gray-700 hover:text-opacity-70 hover:underline"
style={{ maxWidth: "640px" }}
>
{title[0].toUpperCase() + title.slice(1)}
</a>
<Link href={`/collections/${title}`} passHref>
<a
className="mx-auto py-4 px-8 text-gray-700 block md:px-4 hover:text-opacity-70 hover:underline"
style={{ maxWidth: "640px" }}
>
{title[0].toUpperCase() + title.slice(1)}
</a>
</Link>
</li>
))}
</ul>
Expand Down
Loading