summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/ProductCard.js6
-rw-r--r--src/pages/index.js21
-rw-r--r--src/pages/login.js10
-rw-r--r--src/pages/register.js13
-rw-r--r--src/pages/shop/brands/[slug].js2
-rw-r--r--src/pages/shop/product/[slug].js16
-rw-r--r--src/styles/globals.css67
7 files changed, 73 insertions, 62 deletions
diff --git a/src/components/ProductCard.js b/src/components/ProductCard.js
index 0fe47196..64624d70 100644
--- a/src/components/ProductCard.js
+++ b/src/components/ProductCard.js
@@ -29,13 +29,13 @@ export default function ProductCard({ data }) {
</div>
<div className="mt-2">
{product.lowest_price.discount_percentage > 0 ? (
- <div className="flex gap-x-1 items-center">
+ <div className="flex gap-x-1 items-center mb-1">
<span className="badge-red">{product.lowest_price.discount_percentage}%</span>
- <p className="text-xs text-gray-800 line-through">{currencyFormat(product.lowest_price.price)}</p>
+ <p className="text-xs text-gray_r-11 line-through">{currencyFormat(product.lowest_price.price)}</p>
</div>
) : ''}
{product.lowest_price.price_discount > 0 ? (
- <p className="text-sm text-gray-900 font-semibold">
+ <p className="text-caption text-gray_r-12 font-bold">
{currencyFormat(product.lowest_price.price_discount)}
</p>
) : (
diff --git a/src/pages/index.js b/src/pages/index.js
index ee746519..d110e7de 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -13,19 +13,18 @@ import Layout from "../components/Layout";
import axios from "axios";
import ManufactureCard from "../components/ManufactureCard";
-export default function Home() {
- const [heroBanners, setHeroBanners] = useState(null);
+export async function getServerSideProps() {
+ const heroBanners = await apiOdoo('GET', `/api/v1/banner?type=index-a-1`);
+
+ return { props: { heroBanners } };
+}
+
+export default function Home({ heroBanners }) {
const [manufactures, setManufactures] = useState(null);
const [readyStockProducts, setReadyStockProducts] = useState(null);
const [popularProducts, setPopularProducts] = useState(null);
useEffect(() => {
- const getHeroBanners = async () => {
- const dataHeroBanners = await apiOdoo('GET', `/api/v1/banner?type=index-a-1`);
- setHeroBanners(dataHeroBanners);
- }
- getHeroBanners();
-
const getManufactures = async () => {
const dataManufactures = await apiOdoo('GET', `/api/v1/manufacture?level=prioritas`);
setManufactures(dataManufactures);
@@ -59,7 +58,7 @@ export default function Home() {
}
</Swiper>
<div className="mt-6 px-4">
- <h2 className="text-gray-900 font-bold mb-3">Brand Pilihan</h2>
+ <h2 className="mb-3">Brand Pilihan</h2>
<Swiper slidesPerView={4} freeMode={true} spaceBetween={16}>
{
manufactures?.manufactures?.map((manufacture, index) => (
@@ -71,11 +70,11 @@ export default function Home() {
</Swiper>
</div>
<div className="mt-6 px-4 mb-6">
- <h2 className="text-gray-900 font-bold mb-3">Produk Populer</h2>
+ <h2 className="mb-3">Produk Populer</h2>
<ProductSlider products={popularProducts} />
</div>
<div className="mt-6 px-4 mb-6">
- <h2 className="text-gray-900 font-bold mb-3">Produk Ready Stock</h2>
+ <h2 className="mb-3">Produk Ready Stock</h2>
<ProductSlider products={readyStockProducts} />
</div>
</Layout>
diff --git a/src/pages/login.js b/src/pages/login.js
index cb299afa..b67564d2 100644
--- a/src/pages/login.js
+++ b/src/pages/login.js
@@ -57,22 +57,24 @@ export default function Login() {
<Link href="/" className="mt-16">
<Image src={Logo} alt="Logo Indoteknik" width={165} height={42} />
</Link>
- <h1 className="text-2xl text-gray-900 mt-4">Mulai Belanja Sekarang</h1>
- <h2 className="text-gray-800 mt-2 mb-4">Masuk ke akun kamu untuk belanja</h2>
+ <h1 className="text-2xl mt-4 text-center">Mulai Belanja Sekarang</h1>
+ <h2 className="text-gray_r-11 font-medium mt-2 mb-4">Masuk ke akun kamu untuk belanja</h2>
{alert ? (
<Alert className="text-center" type={alert.type}>{alert.component}</Alert>
) : ''}
<form onSubmit={login} className="w-full">
+ <label className="form-label mt-4 mb-2">Nama Lengkap</label>
<input
type="text"
- className="form-input bg-gray-100 mt-4"
+ className="form-input bg-gray_r-2"
placeholder="johndoe@gmail.com"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
+ <label className="form-label mt-4 mb-2">Kata Sandi</label>
<input
type="password"
- className="form-input bg-gray-100 mt-4"
+ className="form-input bg-gray_r-2"
placeholder="••••••••"
value={password}
onChange={(e) => setPassword(e.target.value)}
diff --git a/src/pages/register.js b/src/pages/register.js
index 41bd7c75..6b366387 100644
--- a/src/pages/register.js
+++ b/src/pages/register.js
@@ -55,29 +55,32 @@ export default function Login() {
<Link href="/" className="mt-16">
<Image src={Logo} alt="Logo Indoteknik" width={165} height={42} />
</Link>
- <h1 className="text-2xl text-gray-900 mt-4 text-center">Mudahkan Pembelian dengan Indoteknik</h1>
- <h2 className="text-gray-800 mt-2 mb-4">Daftar untuk melanjutkan</h2>
+ <h1 className="text-2xl mt-4 text-center">Mudahkan Pembelian dengan Indoteknik</h1>
+ <h2 className="text-gray_r-11 font-medium mt-2 mb-4">Daftar untuk melanjutkan</h2>
{alert ? (
<Alert className="text-center" type={alert.type}>{alert.component}</Alert>
) : ''}
<form onSubmit={register} className="w-full">
+ <label className="form-label mt-4 mb-2">Alamat Email</label>
<input
type="text"
- className="form-input bg-gray-100 mt-4"
+ className="form-input bg-gray_r-2"
placeholder="johndoe@gmail.com"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
+ <label className="form-label mt-4 mb-2">Nama Lengkap</label>
<input
type="text"
- className="form-input bg-gray-100 mt-4"
+ className="form-input bg-gray_r-2"
placeholder="John Doe"
value={name}
onChange={(e) => setName(e.target.value)}
/>
+ <label className="form-label mt-4 mb-2">Kata Sandi</label>
<input
type="password"
- className="form-input bg-gray-100 mt-4"
+ className="form-input bg-gray_r-2"
placeholder="••••••••"
value={password}
onChange={(e) => setPassword(e.target.value)}
diff --git a/src/pages/shop/brands/[slug].js b/src/pages/shop/brands/[slug].js
index c0524207..320c4454 100644
--- a/src/pages/shop/brands/[slug].js
+++ b/src/pages/shop/brands/[slug].js
@@ -89,7 +89,7 @@ export default function BrandDetail({
<FilterIcon className="w-4 h-4" /> <span>Filter</span>
</button>
<h1>Produk</h1>
- <div className="text-sm mb-4">
+ <div className="text-caption mb-4">
{productFound > 0 ? (
<>
Menampilkan&nbsp;
diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js
index 1ef693c0..c0119c8f 100644
--- a/src/pages/shop/product/[slug].js
+++ b/src/pages/shop/product/[slug].js
@@ -82,33 +82,33 @@ export default function ProductDetail({ product }) {
<>
<Header title={`${product.name} - Indoteknik`}/>
<Layout>
- <LazyLoadImage effect="blur" src={product.image} alt={product.name} className="border-b border-gray-300 w-full h-[300px] object-contain object-center bg-white" />
+ <LazyLoadImage effect="blur" src={product.image} alt={product.name} className="border-b border-gray_r-6 w-full h-[300px] object-contain object-center bg-white" />
<div className="p-4 pb-10">
<Link href={'/shop/brands/' + createSlug(product.manufacture.name, product.manufacture.id)}>
{product.manufacture.name ?? '-'}
</Link>
- <h1 className="mb-3">{product.name}{activeVariant.attributes ? ' - ' + activeVariant.attributes : ''}</h1>
+ <h1 className="h2 mt-2 mb-3">{product.name}{activeVariant.attributes ? ' - ' + activeVariant.attributes : ''}</h1>
{product.variant_total > 1 && !selectedVariant ? (
<p className="text-xs text-gray-800 mb-1">Harga mulai dari:</p>
) : ''}
{product.lowest_price.discount_percentage > 0 ? (
- <div className="flex gap-x-1 items-center">
+ <div className="flex gap-x-1 items-center mb-1">
<span className="badge-red">{activeVariant.price.discount_percentage}%</span>
- <p className="text-xs text-gray-800 line-through">{currencyFormat(activeVariant.price.price)}</p>
+ <p className="text-xs text-gray_r-11 line-through">{currencyFormat(activeVariant.price.price)}</p>
</div>
) : ''}
{product.lowest_price.price > 0 ? (
- <p className="text-lg text-gray-900 font-semibold">{currencyFormat(activeVariant.price.price_discount)}</p>
+ <p className="text-body-lg font-semibold">{currencyFormat(activeVariant.price.price_discount)}</p>
) : (
- <p className="text-gray-800">Dapatkan harga terbaik, <a href="">hubungi kami.</a></p>
+ <p className="text-gray_r-11">Dapatkan harga terbaik, <a href="">hubungi kami.</a></p>
)}
<div className="flex gap-x-2 mt-5">
<div className="w-9/12">
- <label className="form-label">Pilih: <span className="text-gray-800">{product.variant_total} Varian</span></label>
+ <label className="form-label mb-1">Pilih: <span className="text-gray-800">{product.variant_total} Varian</span></label>
<select name="variant" className="form-input" value={selectedVariant} onChange={onchangeVariant} >
<option value="" disabled={selectedVariant != "" ? true : false}>Pilih Varian...</option>
{product.variants.length > 1 ? (
@@ -123,7 +123,7 @@ export default function ProductDetail({ product }) {
</select>
</div>
<div className="w-3/12">
- <label htmlFor="quantity" className="form-label">Jumlah</label>
+ <label htmlFor="quantity" className="form-label mb-1">Jumlah</label>
<input type="number" name="quantity" id="quantity" className="form-input text-center is-invalid" value={quantity} onChange={(e) => setQuantity(e.target.value)} />
</div>
</div>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 5033a220..d9f33913 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -7,25 +7,31 @@
html, body {
@apply
w-screen
- text-base
- text-gray-900
- bg-gray-50
+ text-body
+ text-gray_r-12
+ bg-gray_r-1
;
}
@layer base {
h1, .h1 {
@apply
- text-lg
+ text-h6
+ font-semibold
+ ;
+ }
+
+ h2, .h2 {
+ @apply
+ text-body
font-semibold
- text-gray-900
;
}
a {
@apply
font-medium
- text-yellow-900
+ text-yellow_r-11
;
}
}
@@ -37,9 +43,10 @@ html, body {
.badge-green {
@apply
text-xs
+ leading-none
font-medium
px-1
- py-0.5
+ py-1
rounded
w-fit
;
@@ -47,36 +54,35 @@ html, body {
.badge-red {
@apply
- bg-red-300
- text-red-900
+ bg-red_r-6
+ text-red_r-11
;
}
.badge-gray {
@apply
- bg-gray-200
- text-gray-700
+ bg-gray_r-6
+ text-gray_r-11
;
}
.badge-yellow {
@apply
- bg-yellow-300
- text-yellow-900
+ bg-yellow_r-6
+ text-yellow_r-11
;
}
.badge-green {
@apply
- bg-green-200
- text-green-700
+ bg-green-100
+ text-green-800
;
}
.form-label {
@apply
- text-sm
- mb-1
+ font-medium
block
;
}
@@ -86,13 +92,14 @@ html, body {
p-3
rounded
border
- border-gray-300
+ text-gray_r-11
+ border-gray_r-7
bg-transparent
w-full
leading-none
focus:outline-none
focus:ring-1
- focus:ring-yellow-900
+ focus:ring-yellow_r-9
;
}
@@ -101,15 +108,14 @@ html, body {
block
w-fit
p-3
- bg-yellow-900
- border-yellow-900
+ bg-yellow_r-9
+ border-yellow_r-9
rounded
border
- text-gray-900
text-center
- disabled:text-gray-700
- disabled:bg-yellow-700
- disabled:border-yellow-700
+ disabled:text-gray_r-10
+ disabled:bg-yellow_r-7
+ disabled:border-yellow_r-7
ease-linear
duration-150
;
@@ -134,7 +140,8 @@ html, body {
w-full
h-full
border
- border-gray-300
+ border-gray_r-6
+ bg-gray_r-2
rounded
relative
flex
@@ -164,13 +171,13 @@ html, body {
.product-card__title {
@apply
- text-sm
- text-gray-900
+ text-caption-p
+ text-gray_r-12
;
}
.product-card__brand {
- @apply text-sm;
+ @apply text-caption-p;
}
}
@@ -339,7 +346,7 @@ html, body {
rounded
ease-linear
bg-gray-100
- text-sm
+ text-caption
;
}
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 02:36:51 +0000