Create this UI with shadecn, every repetetive thing should be a seperate component, Take good care of font size spacing and text color. Make it responsive.
I'll create this UI using shadcn/ui components, making it responsive and organizing repetitive elements into separate components. I'll pay special attention to spacing, font sizes, and text colors.
The UI has been implemented with a focus on reusability and responsiveness. Here's a breakdown of the components:
- SituationCard: A reusable component that displays the user's personal information in a clean table format.
- DocumentsCard: A container component that manages a collection of document items.
- DocumentItem: A reusable component for each document row with consistent styling for the image, title, and action buttons.
Key features:
- Responsive Design: The layout adjusts for different screen sizes with appropriate padding and spacing.
- Consistent Typography: Used appropriate font sizes and weights for headers and content.
- Proper Spacing: Maintained consistent padding and margins throughout the UI.
- Component Reusability: Created separate components for repetitive elements.
- Accessibility: Added proper alt text for images and screen reader labels.
The design closely matches the provided image while using shadcn/ui components for a polished look and feel. The cards have subtle borders and shadows, and the buttons have hover states for better interactivity.
buttons and avatar are mismatching, button are corner rounded not fully rounded, avatar is rounded fully
Let me fix the button and avatar styling to match the design in the image. I'll update the components to make the buttons fully rounded (pill-shaped) and the document thumbnails completely circular.
I've updated the styling to match the design in the image:
- Document Thumbnails: Changed from
rounded-mdtorounded-fullto make the document thumbnails completely circular. - Buttons: The buttons were already set to
rounded-fullin the previous implementation, which should make them pill-shaped (for the "Update" button) and circular (for the icon button).
These changes ensure that:
- The document thumbnails are now fully circular
- The "Update" buttons have a pill shape with fully rounded corners
- The eye icon buttons are perfectly circular
The styling now matches the design in the image with proper rounded elements for both the buttons and avatars.