Merged in Feature/perf/product-detail (pull request #127)

Feature/perf/product detail

6 files changed, 131 insertions, 0 deletions

diff --git a/src-migrate/modules/product-detail/styles/image.module.css b/src-migrate/modules/product-detail/styles/image.module.css
new file mode 100644
index 00000000..e472fe8d
--- /dev/null
+++ b/src-migrate/modules/product-detail/styles/image.module.css
@@ -0,0 +1,35 @@
+.wrapper {
+    @apply h-[250px] md:h-[340px] flex items-center justify-center border border-gray-200 rounded-lg p-4 relative;
+}
+
+.image {
+    @apply object-contain object-center h-full w-full;
+}
+
+.absolute-info {
+    @apply absolute hidden md:block top-4 right-4;
+}
+
+.disc-badge {
+    @apply bg-warning-500 py-1 px-3 w-fit font-semibold rounded-full;
+}
+
+.countdown {
+    @apply flex gap-x-1;
+}
+
+.countdown span {
+    @apply py-0.5 w-8 bg-warning-500 rounded-md text-center;
+}
+
+.flashsale-text {
+    @apply flex items-center gap-x-2 text-white font-medium text-caption-1;
+}
+
+.flashsale-bg {
+    @apply absolute top-0 w-full h-full object-cover object-center z-10;
+}
+
+.flashsale {
+    @apply absolute top-0 w-full h-full z-20 flex items-center justify-between px-3;
+}
diff --git a/src-migrate/modules/product-detail/styles/information.module.css b/src-migrate/modules/product-detail/styles/information.module.css
new file mode 100644
index 00000000..c9b29020
--- /dev/null
+++ b/src-migrate/modules/product-detail/styles/information.module.css
@@ -0,0 +1,19 @@
+.wrapper {
+    @apply grid grid-cols-1;
+}
+
+.row {
+    @apply flex p-3 rounded;
+}
+
+.row:nth-child(odd) {
+    @apply bg-gray-100;
+}
+
+.label {
+    @apply w-1/2 md:w-1/3 font-medium text-gray-500;
+}
+
+.value {
+    @apply w-1/2 md:w-3/4 text-gray-950;
+}
diff --git a/src-migrate/modules/product-detail/styles/price-action.module.css b/src-migrate/modules/product-detail/styles/price-action.module.css
new file mode 100644
index 00000000..651de958
--- /dev/null
+++ b/src-migrate/modules/product-detail/styles/price-action.module.css
@@ -0,0 +1,24 @@
+.secondary-text {
+    @apply font-medium text-gray-500;
+}
+.main-price {
+    @apply font-medium text-danger-500 text-title-md;
+}
+.action-wrapper {
+    @apply flex gap-x-2.5;
+}
+.quantity-input {
+    @apply px-2 rounded text-center border border-gray-300 w-14 h-10 focus:outline-none;
+}
+
+.contact-us {
+    @apply text-danger-500 font-medium underline;
+}
+
+.disc-badge {
+    @apply bg-danger-500 px-2 py-1.5 rounded text-white text-caption-2;
+}
+
+.disc-price {
+    @apply line-through text-gray-600 text-caption-2;
+}
diff --git a/src-migrate/modules/product-detail/styles/product-detail.module.css b/src-migrate/modules/product-detail/styles/product-detail.module.css
new file mode 100644
index 00000000..c668167c
--- /dev/null
+++ b/src-migrate/modules/product-detail/styles/product-detail.module.css
@@ -0,0 +1,15 @@
+.title {
+    @apply font-medium text-h-lg leading-8 md:text-title-md md:leading-10;
+}
+
+.section-card {
+    @apply p-4 md:p-6 md:bg-gray-50 rounded-xl;
+}
+
+.heading {
+    @apply text-h-md md:text-h-lg font-medium;
+}
+
+.description {
+    @apply leading-relaxed text-gray-700;
+}
diff --git a/src-migrate/modules/product-detail/styles/side-similar.module.css b/src-migrate/modules/product-detail/styles/side-similar.module.css
new file mode 100644
index 00000000..08692efa
--- /dev/null
+++ b/src-migrate/modules/product-detail/styles/side-similar.module.css
@@ -0,0 +1,3 @@
+.wrapper {
+    @apply max-h-[500px] overflow-auto grid grid-cols-1 gap-y-4 divide-y divide-gray-300 border border-gray-300 rounded-lg;
+}
diff --git a/src-migrate/modules/product-detail/styles/variant-list.module.css b/src-migrate/modules/product-detail/styles/variant-list.module.css
new file mode 100644
index 00000000..6d46df84
--- /dev/null
+++ b/src-migrate/modules/product-detail/styles/variant-list.module.css
@@ -0,0 +1,35 @@
+.wrapper {
+    @apply grid grid-cols-1 w-[200%] md:w-full;
+}
+
+.header {
+    @apply flex py-2.5 pl-4 font-medium bg-gray-200 rounded-md;
+}
+
+.row {
+    @apply flex items-center py-2.5 pl-4 text-gray-800;
+}
+
+.select-btn {
+    @apply !bg-gray-200 hover:!bg-danger-500 hover:!text-white;
+}
+
+.select-btn--active {
+    @apply !text-white !bg-danger-500 hover:!text-white;
+}
+
+.stock-empty {
+    @apply bg-red-50 border border-red-500 text-red-800;
+}
+
+.stock-ready {
+    @apply bg-green-50 border border-green-500 text-green-800;
+}
+
+.disc-badge {
+    @apply bg-danger-500 p-1 rounded text-white text-caption-2;
+}
+
+.disc-price {
+    @apply text-caption-2 line-through text-gray-600;
+}