Stats-Preview-Card-Component (React and Tailwind)

Community feedback

• 

  Ehsan Tatasadi•1,800

  @tatasadiPosted 12 months ago

  Wonderful job on completing the Frontend Mentor challenge! Your Stats component looks fantastic and demonstrates a keen eye for responsive design and layout. Your use of Tailwind CSS for styling is effective and results in a visually appealing component.

  I have two small suggestions that could enhance your component further:

  • Adjust Image Padding for Mobile Devices:

    • Currently, your image might be inheriting padding from the root div, which could lead to unwanted spacing around the image on mobile devices.
    • To ensure the image utilizes the full width of the screen on mobile devices without any padding, you can modify the styling so that the padding is not applied to the image container in the mobile view. This can be achieved by applying padding directly to the content div instead of the root div.

  Here's how you can adjust your code:

  
  export default function Stats() {
    return (
      <div className="w-[20.4375rem] h-[48.75rem] lg:w-[69.375rem] lg:h-[27.875rem] bg-[#1B1937] rounded-lg font-inter lg:grid lg:grid-cols-2">
        <div className="bg-[url(../public/images/image-header-mobile.jpg)] bg-no-repeat bg-cover h-[13.59rem] bg-blend-multiply bg-[#AB5CDB] opacity-[0.7511] rounded-t-lg lg:bg-[url(../public/images/image-header-desktop.jpg)] lg:col-start-2 lg:h-[27.875rem] lg:ml-[0.94rem] lg:rounded-br-lg lg:rounded-tl-none"></div>
        <div className="py-12 px-4 lg:col-start-1 lg:row-start-1 lg:py-0 lg:px-16">
          {/* ... rest of your content ... */}
        </div>
      </div>
    );
  }
  

  In this revised version:

  The padding (px-4 py-12) is moved to the second div that contains the textual content, leaving the image div without padding. This change ensures that on mobile devices, the image extends to the full width of the screen.

  • Use Custom Components for Repetitive Elements:
    • You have repetitive patterns in the bottom section of your component (10k+ Companies, 314 Templates, 12M+ Queries). To make your code more concise and maintainable, consider creating a custom component for these elements.
    • For instance, you can create a StatItem component that takes props like title and description. This not only cleans up your main component but also makes future changes or additions to these stat items much easier.

  Here’s an example of how you could implement a StatItem component:

  
  function StatItem({ title, description }) {
    return (
      <div>
        <h1 className="font-bold text-2xl">{title}</h1>
        <p className="font-lexend font-normal opacity-60 leading-[1.5625rem] text-xs">
          {description}
        </p>
      </div>
    );
  }
  
  // In your Stats component
  <div className="flex flex-col ...">
    <StatItem title="10k+" description="Companies" />
    <StatItem title="314" description="Templates" />
    <StatItem title="12M+" description="Queries" />
  </div>
  

  Implementing these suggestions will improve the layout on mobile devices and make your codebase cleaner and more maintainable. Keep up the excellent work, and continue honing your front-end development skills!

  Marked as helpful

  0