updated feedback card #12
Conversation
WalkthroughThe recent updates introduce new dependencies and significant enhancements to the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Feedback as Feedback Component
participant Carousel as Carousel Component
User->>Feedback: Open Feedback Section
Feedback->>Carousel: Initialize with User Data
Carousel-->>Feedback: Render Feedback Cards Using Props
Feedback->>User: Display Rendered Feedback Carousel
Assessment against linked issues
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
❌ Deploy Preview for appoint-next failed. Why did it fail? →
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (1)
client/package-lock.jsonis excluded by!**/package-lock.json
Files selected for processing (3)
- client/package.json (1 hunks)
- client/src/components/ui/FeedBox.jsx (1 hunks)
- client/src/components/ui/Feedback.jsx (3 hunks)
Additional comments not posted (5)
client/package.json (3)
26-26: The addition ofreact-multi-carouselis appropriate for implementing responsive carousel functionality as described in the PR.
29-29: Verify if bothreact-multi-carouselandreact-slickare necessary, as they serve similar functionalities. Consider removing one to reduce bundle size and complexity.
30-30: The addition ofslick-carouselcomplementsreact-slickfor styling purposes.client/src/components/ui/FeedBox.jsx (1)
30-54: The redesign of theFeedBoxcomponent enhances its visual appeal and aligns with the objective to improve the feedback card's design and responsiveness. Ensure that all referenced images and styles are available and correctly linked.client/src/components/ui/Feedback.jsx (1)
110-116: The implementation of the carousel usingreact-multi-carouselis well-executed, with appropriate responsive settings. This enhances the user experience across different devices.
| const users = [ | ||
| { | ||
| name: "John", | ||
| title: "CEO", | ||
| address: "New York", | ||
| feedback: | ||
| "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget augue nec massa volutpat aliquam fringilla.", | ||
| }, | ||
| { | ||
| name: "John", | ||
| title: "CEO", | ||
| address: "New Delhi", | ||
| feedback: | ||
| "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget augue nec massa volutpat aliquam fringilla.", | ||
| }, | ||
| { | ||
| name: "John", | ||
| title: "CEO", | ||
| address: "Dubai", | ||
| feedback: | ||
| "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget augue nec massa volutpat aliquam fringilla.", | ||
| }, | ||
| { | ||
| name:"Sudhanva", | ||
| title:"CEO", | ||
| address:"Bengaluru", | ||
| feedback:"lorem ispum", | ||
|
|
||
| }, | ||
| { | ||
| name: "John", | ||
| title: "CEO", | ||
| address: "New York", | ||
| feedback: | ||
| "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget augue nec massa volutpat aliquam fringilla.", | ||
| }, | ||
| user2: { | ||
| { | ||
| name: "John", | ||
| title: "CEO", | ||
| address: "New Delhi", | ||
| feedback: | ||
| "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget augue nec massa volutpat aliquam fringilla.", | ||
| }, | ||
| user3: { | ||
| { | ||
| name: "John", | ||
| title: "CEO", | ||
| address: "Dubai", | ||
| feedback: | ||
| "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget augue nec massa volutpat aliquam fringilla.", | ||
| }, | ||
| { | ||
| name:"Sudhanva", | ||
| title:"CEO", | ||
| address:"Bengaluru", | ||
| feedback:"lorem ispum", | ||
|
|
||
| }, | ||
| ]; |
There was a problem hiding this comment.
Ensure that the user data does not contain duplicates unless intentionally designed to simulate multiple entries. Consider implementing a mechanism to filter or verify unique entries if needed.
|
@Sudhanva21 can you video of it |
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- client/src/components/ui/Feedback.jsx (2 hunks)
Files skipped from review as they are similar to previous changes (1)
- client/src/components/ui/Feedback.jsx
|
@Latish705 Do you want video of the implementation?? |
| // </div> | ||
| // <div> | ||
| // <h3 className=" text-[13px] font-bold ">{user.name}</h3> | ||
| // <p className=" text-[10px] ">{user.address}</p> |
There was a problem hiding this comment.
@Sudhanva21 try to match the color scheme of the project and improve the design of cards make it more rounded
|
This pull request did not get any activity in the past 10 days and will be closed in 180 days if no update occurs. Please verify it has no conflicts with the develop branch and rebase if needed. Mention it now if you need help or give permission to other people to finish your work. |
Pull Request Details
Description
Do some CSS changes in react-multi-carousel->lib->style.css if not already done
.react-multiple-carousel__arrow => change background to black rgba
react-multiple-carousel__arrow--left and of arrow--right=> calc(1px) instead of (4%+1px)
Fixes
Fixed #1
Type of PR
Summary
Made responsive for different width of screen and changed the design of feedback card
Screenshots (if applicable)
Additional Notes
[Include any additional information or context that might be helpful for reviewers.]
Checklist
npm run lint:fixandnpm run format:fix.Summary by CodeRabbit
New Features
Feedbackcomponent to display user feedback cards dynamically.Enhancements
FeedBoxcomponent with improved layout, styling, and content structure, enhancing the display of user information and feedback.Dependencies
react-multi-carousel,react-slick, andslick-carouselfor improved carousel support.