TA
Thuc Anh

Styled Card - Copy this React, Mui Component to your project

Tạo giao diện web sử dụng Node.js và MUI với thiết kế thẩm mỹ, tối giản (tone màu nền trắng, chữ đen, các thành phần bo viền). Dưới đây là các yêu cầu chi tiết: 1. Thành phần giao diện chính 1.1. Nhập link Ô input: Dán link từ Google Drive, Dropbox, hoặc OneDrive. Nút "+": Chức năng: Thêm tối đa 15 ô input, xếp dọc. Mỗi ô có nút "X" để xóa. 1.2. Nhập tên album Textbox: Placeholder là "Nhập tên Album". Nút mở dialog chọn album: Vị trí: Nằm cạnh textbox. Chức năng: Khi click, mở dialog với các yêu cầu: Hiển thị danh sách album: Lấy dữ liệu album (tên, ảnh thumbnail) từ API có sẵn. Sắp xếp album theo thứ tự thời gian gần nhất. Hiển thị mỗi album với: Ảnh thumbnail (50x50). Title. Bố cục: 6 album mỗi hàng, có thể cuộn nếu vượt quá. Giao diện hiển thị 3 hàng album. Ô tìm kiếm album: Cho phép tìm kiếm theo tên album. Checkbox: Thêm checkbox chọn từng album. Nút điều khiển: "Cancel" và "Xác nhận" ở góc phải dialog, bo viền. 1.3. Thao tác file Nút "Tải lên tệp": Chọn nhiều file. Nút "Chọn thư mục": Chọn thư mục. Hiển thị tổng số file đã chọn: Ví dụ: "100 file đã chọn". 1.4. Processbar Vị trí: Nằm ngang trên cùng, hiển thị khi upload. Thiết kế: Nền trắng. Thanh tiến trình xanh dương đậm. Bo viền xám nhạt. Hiển thị phần trăm tiến trình. 1.5. Nút điều khiển Nút "Upload": Vị trí: Góc dưới bên phải. Trạng thái: Ban đầu: Nền trắng, chữ đen. Khi click: Nền xanh lá cây, chữ trắng, hiển thị "Đang upload". Nút "Cancel": Nằm cạnh nút "Upload", nền trắng, chữ đen. 2. Yêu cầu kỹ thuật Công nghệ: Node.js, React, MUI. Giao diện: Responsive. Nhỏ gọn, loại bỏ animation. Tone màu nền trắng, chữ đen. Ưu tiên: Tối ưu hiệu năng. Code rõ ràng, dễ hiểu. Sử dụng component MUI. Bố cục: Linh hoạt.

Prompt
Component Preview

About

StyledCard - A React component professionally built with MUI to display albums with thumbnails, search functionality, and a compact layout. Get free template!

Share

Last updated 1 month ago