ML
Mẫn Lê

RiskQuest UI Copy this Tailwind FinancialRiskQuestionnaireto Your Project

Build a modern, responsive React component using Next.js, Tailwind CSS, and shadcn/ui to display a financial risk assessment question for business users. The component should: Fetch data from the following API: pgsql Copy Edit GET localhost:3333/admin/risk assessment/questions?isActive=true&sortBy=order&sortDirection=ASC&page=1&limit=1 The API response looks like this: json Copy Edit { "success": true, "data": { "data": [ { "id": "question id", "text": "Nhà đầu tư có kinh nghiệm... / How many years does Investor have experience in securities investment for?", "order": 1, "isActive": true, "category": "ABILITY_TO_TAKE_RISK", "options": [ { "text": "Chưa có kinh nghiệm / Inexperienced", "value": 1 }, { "text": "Dưới 1 năm... / Less than 1 year...", "value": 2 } ] } ], "pagination": { "offset": 0, "totalItems": 10, "page": 1, "limit": 1 } }, "message": "Success", "statusCode": 200 } Design & Functionality Requirements: Use shadcn/ui components like Card, RadioGroup, Button, and Progress. Display the question clearly with support for bilingual format (Vietnamese / English in same string). Render the options using a stylish and user friendly radio group or clickable cards. Responsive layout with good spacing and mobile friendly touch targets. Include a "Next" button to load the next question using pagination (page, limit). Show a simple progress bar (e.g. “Question 1 of 10”) using the Progress component from shadcn/ui. (Optional) Handle answer selection state and send the selected value to the server (or keep in local state for now). Prioritize clean layout, good UX for business professionals, and quick responsiveness.

Prompt
Component Preview

About

Tailwind FinancialRiskQuestionnaire - Get a ready-to-use financial risk questionnaire for your app. Easily customize and copy the code now!

Share

Last updated 1 month ago