S S P S Component - Copy this React, Tailwind Component to your project
1. Header (Thanh điều hướng trên cùng) Logo: Hiển thị logo của hệ thống "SSPS". Menu điều hướng: Bao gồm các mục: "Trang chủ" "In tài liệu" "Mua trang in" (được đánh dấu là đang chọn, với màu xanh dương). "Lịch sử in". Ảnh đại diện người dùng: Biểu tượng hình tròn hiển thị avatar. Thông tin số trang hiện có: "Số trang hiện có: 30". Thanh tiến trình (progress bar): Biểu diễn bằng thanh màu xanh lá. 2. Main Content (Nội dung chính) 2.1. Bảng "Chọn số trang" (bên trái) Tiêu đề: "Chọn số trang". Hộp chức năng: Ô nhập liệu (Input): Người dùng nhập số trang muốn mua thêm. Giá hiển thị: "500đ/trang". Nút "Thanh toán": Nút màu xanh để xác nhận bước chọn số trang. 2.2. Bảng "Phương thức thanh toán" (bên phải) Tiêu đề: "Phương thức thanh toán". Hộp chức năng: Chọn tài khoản thanh toán: Một danh sách thả xuống (dropdown), hiển thị thông tin tài khoản ngân hàng (ví dụ: "OCB 1234567790 2.000.000đ"). Chi tiết giao dịch: Số trang mua thêm: "10". Đơn giá: "500đ/trang". Tổng tiền: "5000đ". Nút điều khiển: Nút "Thanh toán" (màu xanh): Để hoàn tất thanh toán. Nút "Hủy" (màu đỏ): Để hủy bỏ giao dịch. 3. Footer (Chân trang) Thông tin bản quyền: "Copyright 2024 SSPS phát triển dựa trên lms". Liên kết mạng xã hội: Biểu tượng Facebook. Biểu tượng GitHub. 4. Tương tác người dùng Hộp nhập liệu: Cho phép người dùng nhập số lượng trang. Danh sách thả xuống (dropdown): Lựa chọn tài khoản thanh toán. Nút "Thanh toán" và "Hủy": Điều khiển luồng giao dịch. Tổng kết Trang có thiết kế cân đối, trực quan với 2 bảng chức năng song song: một bảng để nhập số trang và bảng còn lại để lựa chọn phương thức thanh toán. Màu sắc và bố cục được chia hợp lý giúp người dùng dễ dàng tương tác và thao tác.
