Fixes #58 - Show doctors section on home page & Adding components to storybook by rray524 · Pull Request #60 · rt4914/KlinicCon-Frontend

rray524 · 2024-11-04T00:57:41Z

Checklist:

Done: The design will be similar to homy's Our Agents section
Done: Show following details for each profile:

Picture
Name
Rating
Specialisation

Resolves #58

How to Add the Doctor section?

<div className="doctor-section z-10">
        <Container className="pt-8 pb-4">
          <DoctorSectionWrapper />
        </Container>
 </div>

How to Get All components of Doctor Team section

sections > OurDoctors folder

Description

The "Doctor" section typically includes detailed profiles of medical professionals, covering their specialties, qualifications, experience, and availability. Key features often include booking options for consultations, reviews from patients, and contact information. This section aims to help patients make informed choices and streamline appointment scheduling.

Here, additionally storybook is added for below mentioned components for a better designer view:

Container
DoctorSlider
StarRating

Command run: npm run storybook

rt4914

@rray524 Great work.
I have left some suggestions. Also feel free to shift storybook items to next PR but in that case udpate the PR title and description to Fixes part of #xx instead of Fixes #xx and Resolves #xx.

Feel free to reach out if there any doubts.

rt4914 · 2024-11-04T18:26:28Z

src/assets/img_01.webp

Add all these images inside assets/temp folder so that once our project is ready we know that we can delete this temp folder.

Here, I have added the storybook inside this PR - changed title and description and images are shifted to under temp folder. Thank you so much for your kind review.

rt4914 · 2024-11-04T18:27:18Z

src/components/Paragraph.jsx

+  return (
+    <p
+      className={`text-2xl leading-relaxed text-gray-500 ${className} font-normal`}
+    >


Convert this to single line

<p className={text-2xl leading-relaxed text-gray-500 ${className} font-normal}>

And add storybook item for this component.

Done. Thanks

rt4914 · 2024-11-04T18:27:40Z

src/containers/Container.jsx

@@ -0,0 +1,20 @@
+import PropTypes from "prop-types";
+
+const Container = ({ children, className }) => {


Add story book item fro this component.

Nice work.

Thanks, added storybook for this.

rt4914 · 2024-11-04T18:28:24Z

src/index.css

 body {
  font-family: "Open Sans", Arial, sans-serif;
 }
+.with-background::before {


Create a separate slick.css file and import that only for the required component.

Done, thanks

rt4914 · 2024-11-04T18:29:06Z

src/sections/OurDoctors/DoctorSectionWrapper.jsx

+import HeaderTitle from "./HeaderTitle";
+import TeamSlider from "./TeamSlider";
+
+const DoctorSectionWrapper = () => {


Remove OurDoctors folder and keep this directly in sections.

Also renamed to TopDoctorsSection.

Solved it. thank you!

rt4914 · 2024-11-04T18:29:34Z

src/sections/OurDoctors/HeaderTitle.jsx

@@ -0,0 +1,14 @@
+import HeaderText from "../../components/HeaderText";
+
+const HeaderTitle = () => {


This is not required, directly use HeaderText where required.

Solved it. thank you! HeaderText is being used directly now!

rt4914 · 2024-11-04T18:31:29Z

src/sections/OurDoctors/StarRating.jsx

+import PropTypes from "prop-types";
+import "@fortawesome/fontawesome-free/css/all.css";
+
+const StarRating = ({ rating }) => {


Shift this to component folder and also add a storybook for this.

Resolved. thanks!

rt4914 · 2024-11-04T18:32:18Z

src/sections/OurDoctors/TeamSlider.jsx

+  },
+];
+
+const TeamSlider = () => {


This should be doctor slider.

Also add this to containers and not sections
Also add storyboook item for this.

Resolved. thanks!

rt4914 · 2024-11-04T18:35:45Z

src/sections/OurDoctors/TeamSlider.jsx

+    ],
+  };
+
+  return (


This slider does not work on mobile screen. In that there is one item visible which is correct but there are only 2 dots, which means that dots/indicators are not responsive.

Resolved. thanks!

rt4914 · 2024-11-04T18:36:01Z

src/sections/OurDoctors/TeamSlider.jsx

+    </Slider>
+  );
+};
+TeamSlider.propTypes = {


Add one blank line above this.

Resolved. thanks!

rray524 added 2 commits November 4, 2024 01:11

add-doctor-section-1.0

3aba800

add-doctor-section-1.1

46fc8c3

rray524 requested a review from rt4914 November 4, 2024 00:57

rray524 assigned rt4914 Nov 4, 2024

rt4914 requested changes Nov 4, 2024

View reviewed changes

rt4914 assigned rray524 and unassigned rt4914 Nov 4, 2024

rt4914 reviewed Nov 4, 2024

View reviewed changes

add-doctor-section-1.2

946a756

rray524 changed the title ~~Fixes #58 - Show doctors section on home page~~ Fixes #58 - Show doctors section on home page & Adding components to storybook Nov 5, 2024

rray524 assigned rt4914 and unassigned rray524 Nov 5, 2024

rray524 requested a review from rt4914 November 5, 2024 23:05

		@@ -0,0 +1,20 @@
		import PropTypes from "prop-types";

		const Container = ({ children, className }) => {

		@@ -0,0 +1,14 @@
		import HeaderText from "../../components/HeaderText";

		const HeaderTitle = () => {

Comments

Conversation

rray524 commented Nov 4, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Checklist:

How to Add the Doctor section?

How to Get All components of Doctor Team section

Description

Uh oh!

rt4914 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rray524 Nov 5, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

rray524 commented Nov 4, 2024 •

edited

Loading

rray524 Nov 5, 2024 •

edited

Loading