order review basic

n-festa · Jan 12, 2024 · 68fa9da · 68fa9da
1 parent b7e10a0
commit 68fa9da
Show file tree

Hide file tree

Showing 7 changed files with 291 additions and 3 deletions.
diff --git a/public/images/1a6dae6eb45d59381766dc0807588d37.png b/public/images/1a6dae6eb45d59381766dc0807588d37.png
diff --git a/public/images/2b15aafddc47045162b39e37730e23c7.png b/public/images/2b15aafddc47045162b39e37730e23c7.png
diff --git a/public/images/Frame 427320394.svg b/public/images/Frame 427320394.svg
diff --git a/public/images/Friver.svg b/public/images/Friver.svg
diff --git a/src/app/order/payment-process/page.tsx b/src/app/order/payment-process/page.tsx
@@ -1,8 +1,7 @@
 
 
 import Breadcrumb from "@/app/ui/breadcrumb";
-const SearchPage = () =>{
-
+const PaymentProcessPage = () =>{
     return (
         <div className="w-100 h-100 d-flex justify-content-center align-items-center">
             <div className="payment-process d-flex flex-column">
@@ -83,4 +82,4 @@ const SearchPage = () =>{
     )
 }
 
-export default SearchPage;
+export default PaymentProcessPage;
diff --git a/src/app/order/review/page.tsx b/src/app/order/review/page.tsx
@@ -0,0 +1,91 @@
+
+const ReviewPage = () =>{
+    return (
+        <section className="body-section container">
+            <div className="back-to-previous">
+                <img src="/images/chevronleft.svg" alt="" />
+                <div>Quay lại trang trước</div>
+            </div>
+
+            <div className="rating-service d-flex flex-column">
+                <div className="title">
+                    Đánh giá dịch vụ
+                </div>
+
+                <div className="order-number-and-date">
+                    <div>Đơn hàng: #1234567</div>
+                    <div>-</div>
+                    <div>Ngày: 26/07/2023</div>
+                </div>
+
+                <div className="review-tabs">
+                    <div className="quick-review tab-button-base active">
+                        Đánh giá nhanh
+                    </div>
+                    <div className="detail-review tab-button-base">
+                        Đánh giá chi tiết
+                    </div>
+                </div>
+
+                <div className="shipper-review">
+                    <div className="label d-flex gap-3 align-items-center">
+                        <img src="/images/Friver.svg" alt="" />
+                        <div>Đánh giá tài xế</div>
+                    </div>
+
+                    <div className="big-rating-stars">
+                        <img src="/images/star-icon.svg" alt="" />
+                        <img src="/images/star-icon.svg" alt="" />
+                        <img src="/images/star-icon.svg" alt="" />
+                        <img src="/images/star-icon.svg" alt="" />
+                        <img src="/images/star-icon.svg" alt="" />
+                    </div>
+                </div>
+
+                <div className="dishes-review">
+                    <div className="label d-flex gap-3 align-items-center">
+                        <img src="/images/Frame%20427320394.svg" alt="" />
+                        <div>Đánh giá món ăn</div>
+                    </div>
+
+                    <div className="big-rating-stars">
+                        <img src="/images/star-icon.svg" alt="" />
+                        <img src="/images/star-icon.svg" alt="" />
+                        <img src="/images/star-icon.svg" alt="" />
+                        <img src="/images/star-icon.svg" alt="" />
+                        <img src="/images/star-icon.svg" alt="" />
+                    </div>
+                </div>
+
+                <div className="dishes-review-2 d-flex flex-column gap-2">
+                    <div>
+                        Bạn có hài lòng về món ăn của chúng tôi không? Hãy cho chúng tôi biết ý kiến của bạn
+                    </div>
+
+                    <div className="d-flex gap-3">
+                        <div className="dish-rating-tag">Đồ ăn chất lượng</div>
+                        <div className="dish-rating-tag active">Đóng gói chắc chắn</div>
+                        <div className="dish-rating-tag">Đồ ăn hợp khẩu vị</div>
+                        <div className="dish-rating-tag">Đồ ăn tươi</div>
+                    </div>
+                </div>
+
+                <input className="review-comment" type="text" placeholder="Hãy chia sẻ nhận xét cho dịch vụ này bạn nhé!" />
+
+                <div className="divider"></div>
+
+                <div className="review-with-images">
+                    <img src="/images/1a6dae6eb45d59381766dc0807588d37.png" alt="" />
+                    <img src="/images/2b15aafddc47045162b39e37730e23c7.png" alt="" />
+                </div>
+
+                <div className="review-action-buttons">
+                    <button type="button" className="review-action-button">Thêm ảnh</button>
+                    <button type="button" className="review-action-button primary">Gửi đánh giá</button>
+                </div>
+            </div>
+        </section>
+    )
+}
+
+export default ReviewPage;
diff --git a/src/styles/order.css b/src/styles/order.css
@@ -1,3 +1,6 @@
+[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
+    cursor: pointer;
+}
 .payment-process {
     background: white;
     gap: 10px;
@@ -146,4 +149,175 @@
     font-style: normal;
     font-weight: 600;
     line-height: 24px;
+}
+
+
+/* review and rating */
+.back-to-previous {
+    padding: 16px 0;
+    display: flex;
+    gap: 8px;
+    color: #475467;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 20px;
+}
+.rating-service {
+    gap: 10px;
+    max-width: 1166px;
+    padding-bottom: 16px;
+    margin: 0 auto;
+}
+.rating-service .title {
+    color: #000;
+    text-align: center;
+    font-size: 30px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 38px;
+}
+.order-number-and-date {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 16px;
+    color: #000;
+    text-align: center;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px;
+}
+.review-tabs {
+    display: flex;
+    height: 34px;
+    align-items: flex-start;
+    gap: 16px;
+    border-bottom: 1px solid #EAECF0;
+}
+.tab-button-base.active {
+    color: #00322A;
+    border-bottom: 2px solid #00322A;
+}
+.tab-button-base {
+    display: flex;
+    padding: 0px 4px 10px 4px;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    color: #667085;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 24px;
+}
+.shipper-review, .dishes-review {
+    display: flex;
+    padding: 10px 0px;
+    justify-content: space-between;
+    align-items: flex-start;
+    align-self: stretch;
+    border-bottom: 1px solid #EAECF0;
+}
+.shipper-review .label, .dishes-review .label {
+    color: #101828;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 28px;
+}
+.shipper-review img {
+    width: 48px;
+    height: 48px;
+}
+.big-rating-stars {
+    display: flex;
+    height: 48px;
+    align-items: center;
+    gap: 8px;
+}
+.big-rating-stars img {
+    width: 40px;
+    height: 40px;
+}
+.dishes-review {
+    border-bottom: none;
+}
+.dish-rating-tag {
+    display: flex;
+    padding: 8px 14px;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    border-radius: 24px;
+    border: 1px solid #D0D5DD;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    color: #344054;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 20px;
+}
+
+.dish-rating-tag.active {
+    border-radius: 24px;
+    border: 1px solid #00473C;
+    background: #00473C;
+    color: #E6FF55;
+}
+.review-comment {
+    border-radius: 8px;
+    border: 1px solid #D0D5DD;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    padding: 12px 14px;
+}
+.divider {
+    border-bottom: 1px solid #EAECF0;
+    height: 1px;
+    width: 100%;
+}
+.review-with-images {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+    align-self: stretch;
+    padding: 10px 0;
+}
+.review-with-images img {
+    width: 100px;
+    height: 100px;
+    border-radius: 8px;
+}
+.review-action-buttons {
+    display: flex;
+    height: 55px;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 10px;
+    flex-shrink: 0;
+    align-self: stretch;
+}
+.review-action-button {
+    display: flex;
+    padding: 8px 14px;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    flex: 1 0 0;
+    align-self: stretch;
+    border-radius: 24px;
+    border: 1px solid #D0D5DD;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    color: #344054;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 24px;
+    background: #fff;
+}
+.review-action-button.primary {
+    border: 1px solid #00473C;
+    background: #00473C;
+    color: #E6FF55;
 }