DEV Community: ryad

Build Responsive Hero Section with React and Tailwind CSS

ryad — Fri, 02 Feb 2024 22:58:00 +0000

In the ever-evolving landscape of digital innovation, the role of Cloud Solutions cannot be overstated. They form the backbone of modern businesses, offering scalability, security, and seamless integration. As developers, our journey often begins with crafting captivating interfaces to represent these solutions. In this article, we’ll dissect a React component responsible for a hero section, showcasing the prowess of Global Cloud Solutions.

Unveiling the Hero.jsx Component

import React from "react";
import {
  CloudUploadIcon,
  DatabaseIcon,
  PaperAirplaneIcon,
  ServerIcon,
} from "@heroicons/react/solid";

const Hero = () => {
  return (
    <div
      name="home"
      className="w-full h-screen bg-zinc-200 flex flex-col justify-between"
    >
      <div className="grid md:grid-cols-2 max-w-[1240px] m-auto">
        <div className="flex flex-col justify-center md:items-start w-full px-2 py-8">
          <p className="text-2xl">Innovative Sequencing & Production</p>
          <h1 className="py-3 text-5xl md:text-7xl font-bold">
            Global Cloud Solutions
          </h1>
          <p className="text-2xl">Empowering Your Digital Future.</p>
          <button className="py-3 px-6 sm:w-[60%] my-4 text-white border bg-indigo-600 border-indigo-600
    hover:bg-transparent hover:text-indigo-600 rounded-md">Explore Now</button>
        </div>
        <div>
          <img
            className="w-full"
            src={"https://i.imgur.com/DWPTxrz.png"}
            alt="/"
          />
        </div>
        <div
          className="absolute flex flex-col py-8 md:min-w-[760px] bottom-[5%]
            mx-1 md:left-1/2 transform md:-translate-x-1/2 bg-zinc-200
            border border-slate-300 rounded-xl text-center shadow-xl"
        >
          <p>Data Services</p>
          <div className="flex justify-between flex-wrap px-4">
            <p className="flex px-4 py-2 text-slate-500">
              <CloudUploadIcon className="h-6 text-indigo-600" /> Data Security
            </p>
            <p className="flex px-4 py-2 text-slate-500">
              <DatabaseIcon className="h-6 text-indigo-600" /> Analytics Tools
            </p>
            <p className="flex px-4 py-2 text-slate-500">
              <ServerIcon className="h-6 text-indigo-600" /> Cloud Infrastructure
            </p>
            <p className="flex px-4 py-2 text-slate-500">
              <PaperAirplaneIcon className="h-6 text-indigo-600" /> Integration
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Hero;

Understanding the Structure

Grid Layout: The hero section employs a responsive grid layout (md:grid-cols-2) to adapt to different screen sizes.
Text and Button: The left column contains text elements like a title, subtitle, and a call-to-action button, styled with Tailwind CSS classes.
Image: The right column showcases an image representing the essence of Global Cloud Solutions.
Data Services Section: Positioned at the bottom, this section highlights key data services using Heroicons and Tailwind CSS classes.

Integrating with App.jsx

Now, let’s integrate this Hero component into the main App.jsx file:

import React from 'react';
import Hero from './components/Hero';
function App() {
  return (
    <>
      <Hero />
    </>
  );
}
export default App;

Final Thoughts

The Hero component provides a visually appealing introduction to your application. Tailwind CSS streamlines styling, making it easy to create responsive and visually appealing interfaces. As you embark on your journey to build global cloud solutions, this component serves as a foundation for user engagement and sets the stage for what lies ahead. Happy coding!

Build Responsive Navbar with Tailwind CSS and React Icons

ryad — Tue, 30 Jan 2024 23:00:00 +0000

Introduction

In the dynamic realm of web development, creating an elegant and responsive navigation bar is a fundamental aspect of designing user-friendly interfaces. In this tutorial, we'll dive into the process of constructing a sleek and adaptable navbar using the powerful combination of Tailwind CSS and React Icons. This navbar will not only enhance the visual appeal of your application but will also seamlessly adjust to various screen sizes, providing an optimal user experience.

Getting Started

Before we embark on our navbar creation journey, let's ensure that our project is equipped with the necessary tools. Install Tailwind CSS and React Icons using the following commands:



  
  
  Install Tailwind CSS


npm install tailwindcss

  
  
  Install React Icons


npm install react-icons

Building the Navbar Component

Now, let's delve into the core of our tutorial—the Navbar component.

Navbar Component (Navbar.jsx)



import React, { useState } from 'react';

import { AiOutlineClose, AiOutlineMenu } from 'react-icons/ai';

const Navbar = () => {

  // State to manage the navbar's visibility

  const [nav, setNav] = useState(false);

// Toggle function to handle the navbar's display

  const handleNav = () => {

    setNav(!nav);

  };

// Array containing navigation items

  const navItems = [

    { id: 1, text: 'Home' },

    { id: 2, text: 'Company' },

    { id: 3, text: 'Resources' },

    { id: 4, text: 'About' },

    { id: 5, text: 'Contact' },

  ];

return (

    <div className='bg-black flex justify-between items-center h-24 max-w-[1240px] mx-auto px-4 text-white'>

      {/* Logo */}

      <h1 className='w-full text-3xl font-bold text-[#00df9a]'>REACT.</h1>

  {/* Desktop Navigation */}
  &lt;ul className='hidden md:flex'&gt;
    {navItems.map(item =&gt; (
      &lt;li
        key={item.id}
        className='p-4 hover:bg-[#00df9a] rounded-xl m-2 cursor-pointer duration-300 hover:text-black'
      &gt;
        {item.text}
      &lt;/li&gt;
    ))}
  &lt;/ul&gt;

  {/* Mobile Navigation Icon */}
  &lt;div onClick={handleNav} className='block md:hidden'&gt;
    {nav ? &lt;AiOutlineClose size={20} /&gt; : &lt;AiOutlineMenu size={20} /&gt;}
  &lt;/div&gt;

  {/* Mobile Navigation Menu */}
  &lt;ul
    className={
      nav
        ? 'fixed md:hidden left-0 top-0 w-[60%] h-full border-r border-r-gray-900 bg-[#000300] ease-in-out duration-500'
        : 'ease-in-out w-[60%] duration-500 fixed top-0 bottom-0 left-[-100%]'
    }
  &gt;
    {/* Mobile Logo */}
    &lt;h1 className='w-full text-3xl font-bold text-[#00df9a] m-4'&gt;REACT.&lt;/h1&gt;

    {/* Mobile Navigation Items */}
    {navItems.map(item =&gt; (
      &lt;li
        key={item.id}
        className='p-4 border-b rounded-xl hover:bg-[#00df9a] duration-300 hover:text-black cursor-pointer border-gray-600'
      &gt;
        {item.text}
      &lt;/li&gt;
    ))}
  &lt;/ul&gt;
&lt;/div&gt;



);

};

export default Navbar;

Integrating the Navbar into Your App

With our Navbar component ready, let's seamlessly integrate it into our main App component.

App Component (app.js)



import React from 'react';

import Navbar from './components/Navbar';

function App() {

  return (

    <div>

      <Navbar />

    </div>

  );

}

export default App;

Conclusion

You've just crafted a visually appealing and responsive navbar for your React application. By leveraging the capabilities of Tailwind CSS and React Icons, you've ensured that your navigation bar not only looks great on various devices but also provides a seamless user experience. Feel free to customize the styles and expand the functionality to suit the unique needs of your project. Happy coding!

Building a Hero Section with React and Tailwind Css

ryad — Mon, 29 Jan 2024 22:51:00 +0000

In the ever-evolving landscape of web development, creating powerful and visually appealing dashboards is a key aspect. Dashboards play a crucial role in presenting data in a comprehensible and user-friendly manner. In this article, we’ll explore a simple yet elegant React codebase for a Data Analytics Dashboard.

The App Structure

Let’s begin by examining the main entry point of our React application, the App.js file:

// app.js
import React from "react";
import Analytics from "./components/Analytics";
function App() {
  return (
    <div>
      <Analytics />
    </div>
  );
}
export default App;

Here, we have a basic React functional component named App that renders an Analytics component. Now, let's delve into the Analytics component.

The Analytics Component

The Analytics.js file contains the code for our Data Analytics Dashboard:

// analytics.js
import React from "react";
const Analytics = () => {
  return (
    <div className="w-full bg-white py-16 px-4">
      <div className="max-w-[1240px] mx-auto grid md:grid-cols-2">
        {/* Image Section */}
        <img
          className="w-[500px] mx-auto my-4"
          src={"https://i.imgur.com/tz4Vkxh.jpg"}
          alt="/"
        />
        {/* Text and Button Section */}
        <div className="flex flex-col justify-center">
          <p className="text-[#00df9a] font-bold ">DATA ANALYTICS DASHBOARD</p>
          <h1 className="md:text-4xl sm:text-3xl text-2xl font-bold py-2">
            Manage Data Analytics Centrally
          </h1>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum
            molestiae delectus culpa hic assumenda, voluptate reprehenderit
            dolore autem cum ullam sed odit perspiciatis. Doloribus quos velit,
            eveniet ex deserunt fuga?
          </p>
          <button className="bg-black text-[#00df9a] hover:text-black hover:bg-[#00df9a] duration-75 w-[200px] rounded-md font-medium my-6 mx-auto md:mx-0 py-3">
            Get Started
          </button>
        </div>
      </div>
    </div>
  );
};
export default Analytics;

In this component, we have divided our dashboard into two main sections: an image section and a text/button section. The styling is achieved using Tailwind CSS classes, providing a responsive and visually appealing layout.

Conclusion

Building a Data Analytics Dashboard with React is made simpler and more modular with components. This codebase serves as a foundation that can be extended and customized based on specific requirements. Whether you are a seasoned developer or just starting with React, this example provides insights into creating dynamic and engaging dashboards.

Feel free to experiment with additional features, integrate data visualization libraries, or enhance the styling further. The world of web development is vast, and creating powerful dashboards is a valuable skill that opens up endless possibilities for data presentation and analysis. Happy coding!

Build Pricing Card Component using React & Tailwind CSS

ryad — Sat, 27 Jan 2024 10:30:00 +0000

Tailwind CSS has rapidly become a go-to framework for building modern and responsive web interfaces. In this article, we’ll dive into a practical example by showcasing a React component, PricingCards.js, where Tailwind CSS is utilized to create sleek and engaging pricing cards. Let's explore the code and understand how Tailwind CSS enhances the styling capabilities of your React application.

Setting the Scene

Firstly, let’s take a look at the PricingCards.js file. This file defines a React component, PricingCards, which generates a set of pricing cards with different plans. Each card includes an image, title, price, and a list of features. The code is clean and easy to follow, but the real magic happens with the Tailwind CSS classes applied.

// PricingCards.js file
import React from "react";

const PricingCards = () => {
  const cardData = [
    {
      image: "https://i.imgur.com/Ql4jRdB.png",
      title: "Single User",
      price: "$149",
      features: ["500 GB Storage", "1 Granted User", "Send up to 2 GB"],
    },
    {
      image: "https://i.imgur.com/pJNFEHR.png",
      title: "Double User",
      price: "$149",
      features: ["500 GB Storage", "1 Granted User", "Send up to 2 GB"],
    },
    {
      image: "https://i.imgur.com/Hg0sUJP.png",
      title: "Triple User",
      price: "$149",
      features: ["500 GB Storage", "1 Granted User", "Send up to 2 GB"],
    },
  ];
  return (
    <div className="w-full py-[10rem] px-4 bg-white">
      <div className="max-w-[1240px] mx-auto grid md:grid-cols-3 gap-8">
        {cardData.map((card, index) => (
          <div
            key={index}
            className={`w-full shadow-xl flex flex-col p-4 my-4 rounded-lg hover:scale-105 duration-300`}
          >
            <img
              className="w-20 mx-auto mt-[-3rem] bg-white"
              src={card.image}
              alt="/"
            />
            <h2 className="text-2xl font-bold text-center py-8">
              {card.title}
            </h2>
            <p className="text-center text-4xl font-bold">{card.price}</p>
            <div className="text-center font-medium">
              {card.features.map((feature, index) => (
                <p
                  key={index}
                  className={`py-2 border-b mx-8 ${index === 0 ? "mt-8" : ""}`}
                >
                  {feature}
                </p>
              ))}
            </div>
            <button
              className={`bg-[#00df9a] hover:text-[#00df9a] hover:bg-gray-50 duration-150 w-[200px] rounded-md font-medium my-6 mx-auto px-6 py-3`}
            >
              Start Trial
            </button>
          </div>
        ))}
      </div>
    </div>
  );
};

export default PricingCards;

Deconstructing the Tailwind CSS Classes

1. Responsive Design

<div className="max-w-[1240px] mx-auto grid md:grid-cols-3 gap-8">

This line ensures a responsive layout with a maximum width of 1240 pixels and a 3-column grid on medium-sized screens (md:grid-cols-3), leaving a gap of 8 units between columns.

2. Hover Effects

className={`w-full shadow-xl flex flex-col p-4 my-4 rounded-lg hover:scale-105 duration-300`}

The use of hover:scale-105 duration-300 creates a subtle scaling effect when hovering over the pricing cards, adding a touch of interactivity.

3. Typography and Spacing


 <h2 className="text-2xl font-bold text-center py-8">{card.title}</h2>
  <p className="text-center text-4xl font-bold">{card.price}</p>
  <div className="text-center font-medium">
    {card.features.map((feature, index) => (
      <p
        key={index}
        className={`py-2 border-b mx-8 ${index === 0 ? "mt-8" : ""}`}
      >
        {feature}
      </p>
    ))}
  </div>

Tailwind CSS makes it easy to manage text styles, sizes, and spacing, ensuring a consistent and visually appealing presentation.

4. Button Styling

<button className={`bg-[#00df9a] hover:text-[#00df9a] hover:bg-gray-50 duration-150 w-[200px] rounded-md font-medium my-6 mx-auto px-6 py-3`}>
  Start Trial
</button>

Tailwind CSS allows for seamless button styling, and here we see a vibrant green background color (bg-[#00df9a]) with a hover effect that changes text and background colors.

Integration in `app.js`

The PricingCards component is then seamlessly integrated into the main App component in app.js:

// app.js file
import React from "react";
import PricingCards from "./components/PricingCards";
function App() {
  return (
    <div>
      <PricingCards />
    </div>
  );
}
export default App;

Conclusion

Tailwind CSS empowers developers to create stunning user interfaces with minimal effort. The code snippets presented showcase how Tailwind CSS classes are applied to style the pricing cards, making the React component both readable and visually impressive. As you continue to explore Tailwind CSS, you’ll find it to be a valuable tool for designing beautiful and responsive web applications. Happy coding!

Building React Footer Components with Tailwindcss

ryad — Thu, 25 Jan 2024 14:26:00 +0000

In web development, a well-designed footer can be the finishing touch that elevates the overall user experience of your website. Today, we’ll explore how to create a stylish and functional footer in React using reusable components.

Introduction

In this tutorial, we’ll be working with a React code snippet that demonstrates how to build a sleek footer component. This footer includes social media icons with a hover effect and neatly organized sections for different types of content.



// Importing necessary React and icon components
import React from 'react';
import {
  FaDribbbleSquare,
  FaFacebookSquare,
  FaGithubSquare,
  FaInstagram,
  FaTwitterSquare,
} from 'react-icons/fa';
// Reusable SocialIcon component with hover effect
const SocialIcon = ({ icon: Icon }) => (
  <Icon className="social-icon hover:text-[#00df9a]" size={30} />
);
// Footer component
const Footer = () => {
  // Array defining the content and structure of the footer
  const items = [
    // Social media icons
    { type: 'icon', icon: FaFacebookSquare },
    { type: 'icon', icon: FaInstagram },
    { type: 'icon', icon: FaTwitterSquare },
    { type: 'icon', icon: FaGithubSquare },
    { type: 'icon', icon: FaDribbbleSquare },
    // Footer sections
    { type: 'section', title: 'Solutions', items: ['Analytics', 'Marketing', 'Commerce', 'Insights'] },
    { type: 'section', title: 'Support', items: ['Pricing', 'Documentation', 'Guides', 'API Status'] },
    { type: 'section', title: 'Company', items: ['About', 'Blog', 'Jobs', 'Press', 'Careers'] },
    { type: 'section', title: 'Legal', items: ['Claim', 'Policy', 'Terms'] },
  ];
  // JSX structure of the footer
  return (
    <div className='bg-[#000300] mx-auto py-16 px-4 grid lg:grid-cols-3 gap-8 text-gray-300'>
      {/* Left section with brand and social icons */}
      <div>
        <h1 className='w-full text-3xl lg:text-4xl xl:text-5xl font-bold text-[#00df9a]'>REACT.</h1>
        <p className='py-4'>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id odit ullam iste repellat consequatur libero reiciendis, blanditiis accusantium.
        </p>
        <div className='flex justify-between md:w-[75%] my-6'>
          {/* Mapping over social icons and rendering the SocialIcon component */}
          {items.map((item, index) => (
            item.type === 'icon' ? (
              <SocialIcon key={index} icon={item.icon} />
            ) : null
          ))}
        </div>
      </div>
      {/* Right section with footer content organized in sections */}
      <div className='lg:col-span-2 flex justify-between mt-6'>
        {/* Mapping over sections and rendering content */}
        {items.map((item, index) => (
          item.type === 'section' ? (
            <div key={index}>
              <h6 className="font-medium text-gray-100 text-xl">{item.title}</h6>
              <ul>
                {/* Mapping over items in each section */}
                {item.items.map((subItem, subIndex) => (
                  <li key={subIndex} className='py-2 text-sm'>{subItem}</li>
                ))}
              </ul>
            </div>
          ) : null
        ))}
      </div>
    </div>
  );
};
export default Footer;

How to Use

To incorporate this footer into your React application, follow these simple steps:

Install React Icons: Make sure to install the react-icons package by running:



npm install react-icons

Copy the Code: Copy the provided Footer component code and paste it into your React project.
Integrate into App: Import the Footer component into your main App.js or any other relevant file:



import React from "react";
import Footer from "./components/Footer";

function App() {
  return (
    <div>
      <Footer />
    </div>
  );
}

export default App;

Styling: Feel free to customize the styles and content of the footer to match your project’s design.

By following these steps, you can quickly enhance your React application with a stylish and functional footer.

Conclusion

Creating reusable components in React not only enhances code maintainability but also allows for the easy incorporation of sophisticated features. This tutorial demonstrated how to build a responsive and visually appealing footer using React components. Feel free to adapt and expand upon this code to suit the specific needs of your project. Happy coding!

Building a Newsletter Component with React and Tailwind CSS

ryad — Tue, 23 Jan 2024 10:23:00 +0000

Introduction:

In the ever-evolving landscape of web development, creating engaging and user-friendly components is crucial. One such important element is the newsletter signup form, a gateway for users to stay connected with your platform. In this article, we’ll explore how to craft an elegant and responsive newsletter signup component using React and Tailwind CSS.

Setting the Stage:

To get started, let’s take a look at the code snippet provided. This React component is aptly named ‘Newsletter,’ and it is designed to seamlessly integrate into any React application. It is clean, concise, and utilizes the popular Tailwind CSS framework for styling.

// Newsletter.jsx
import React from 'react';

const Newsletter = () => {
  return (
    <div className='w-full py-16 text-white bg-[#000300] px-4'>
      <div className='max-w-[1240px] mx-auto grid lg:grid-cols-3'>
        <div className='lg:col-span-2 my-4'>
          <h1 className='md:text-4xl sm:text-3xl text-2xl font-bold py-2'>
            Want tips & tricks to optimize your flow?
          </h1>
          <p>Sign up to our newsletter and stay up to date.</p>
        </div>
        <div className='my-4'>
          <div className='flex flex-col sm:flex-row items-center justify-between w-full'>
            <input
              className='p-3 flex w-full rounded-md text-black'
              type='email'
              placeholder='Enter Email'
            />
            <button className='bg-[#00df9a] text-black rounded-md font-medium w-[200px] ml-4 my-6 px-6 py-3'>
              Notify Me
            </button>
          </div>
          <p>
            We care bout the protection of your data. Read our{' '}
            <span className='text-[#00df9a]'>Privacy Policy.</span>
          </p>
        </div>
      </div>
    </div>
  );
};

export default Newsletter;

The Newsletter component is structured to be flexible and easily integrated into your application.

Integration with App:

Now, let’s see how this component can be seamlessly integrated into a React application.

// App.jsx
import React from "react";
import Newsletter from "./components/Newsletter";
function App() {
  return (
    <div>
      <Newsletter />
    </div>
  );
}
export default App;

The App component serves as the entry point for our application and incorporates the Newsletter component.

Key Features:

Responsive Design: The use of Tailwind CSS classes ensures that the newsletter component adapts seamlessly to various screen sizes.
Clear Messaging: The component communicates its purpose clearly, inviting users to sign up for valuable tips and tricks.
User-Friendly Form: The form design is user-friendly, with a well-placed email input field and a visually appealing “Notify Me” button.
Privacy Assurance: A concise message at the bottom assures users of data protection, with a link to the privacy policy highlighted in a distinctive color.

Creating a Reactive Restaurant Grid with Filtering Using React and Tailwind CSS

ryad — Sun, 21 Jan 2024 11:54:00 +0000

In the realm of web development, creating a delightful user experience is paramount. One way to achieve this is by presenting information in a visually appealing and easily navigable manner. In this article, we'll explore a React code snippet that accomplishes just that - showcasing top-rated menu items with dynamic filtering.

The Code Structure

Let's break down the provided React code:

`App.js`

import React from "react";
import Food from "./components/Food";

function App() {
  return (
    <div>
      <Food />
    </div>
  );
}

export default App;

This is the entry point where the Food component is rendered. The Food component is where the main functionality resides.

`Food.js`

import React, { useState } from 'react';

const data = [
  {
    id: 1,
    name: 'Double Cheeseburger',
    category: 'burger',
    image:
      'https://images.unsplash.com/photo-1607013251379-e6eecfffe234?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8YnVyZ2Vyc3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=1400&q=60',
    price: '$$$$',
  },
  {
    id: 2,
    name: 'Bacon Cheeseburger',
    category: 'burger',
    image:
      'https://images.unsplash.com/photo-1553979459-d2229ba7433b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTh8fGJ1cmdlcnN8ZW58MHx8MHx8&auto=format&fit=crop&w=1400&q=60',
    price: '$',
  },
  {
    id: 3,
    name: 'Mushroom Burger',
    category: 'burger',
    image:
      'https://images.unsplash.com/photo-1608767221051-2b9d18f35a2f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTV8fGJ1cmdlcnN8ZW58MHx8MHx8&auto=format&fit=crop&w=1400&q=60',
    price: '$$',
  },
  {
    id: 4,
    name: 'Loaded Burger',
    category: 'burger',
    image:
      'https://images.unsplash.com/photo-1568901346375-23c9450c58cd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8YnVyZ2Vyc3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=1400&q=60',
    price: '$$$',
  },
  {
    id: 5,
    name: 'Feta & Spinnach',
    category: 'pizza',
    image:
      'https://images.unsplash.com/photo-1593560708920-61dd98c46a4e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8cGl6emF8ZW58MHx8MHx8&auto=format&fit=crop&w=800&q=60',
    price: '$$',
  },
  {
    id: 6,
    name: 'Supreme Pizza',
    category: 'pizza',
    image:
      'https://images.unsplash.com/photo-1604382355076-af4b0eb60143?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8N3x8cGl6emF8ZW58MHx8MHx8&auto=format&fit=crop&w=800&q=60',
    price: '$$$',
  },
  {
    id: 7,
    name: 'Meat Lovers',
    category: 'pizza',
    image:
      'https://images.unsplash.com/photo-1628840042765-356cda07504e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTh8fHBpenphfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60',
    price: '$$$$',
  },
  {
    id: 8,
    name: 'Cheese Pizza',
    category: 'pizza',
    image:
      'https://images.unsplash.com/photo-1548369937-47519962c11a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8Y2hlZXNlJTIwcGl6emF8ZW58MHx8MHx8&auto=format&fit=crop&w=800&q=60',
    price: '$',
  },
  {
    id: 9,
    name: 'Kale Salad',
    category: 'salad',
    image:
      'https://images.unsplash.com/photo-1515543237350-b3eea1ec8082?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8c2FsYWQlMjBjZWFzYXJ8ZW58MHx8MHx8&auto=format&fit=crop&w=800&q=60',
    price: '$$',
  },
  {
    id: 10,
    name: 'Ceasar Salad',
    category: 'salad',
    image:
      'https://images.unsplash.com/photo-1546793665-c74683f339c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8c2FsYWQlMjBjZWFzYXJ8ZW58MHx8MHx8&auto=format&fit=crop&w=800&q=60',
    price: '$$$',
  },
  {
    id: 11,
    name: 'Loaded Salad',
    category: 'salad',
    image:
      'https://images.unsplash.com/photo-1540420773420-3366772f4999?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8c2FsYWR8ZW58MHx8MHx8&auto=format&fit=crop&w=800&q=60',
    price: '$$$$',
  },
  {
    id: 12,
    name: 'Fruit Salad',
    category: 'salad',
    image:
      'https://images.unsplash.com/photo-1564093497595-593b96d80180?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8ZnJ1aXQlMjBzYWxhZHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60',
    price: '$',
  },
  {
    id: 13,
    name: 'Wings',
    category: 'chicken',
    image:
      'https://images.unsplash.com/photo-1567620832903-9fc6debc209f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8Y2hpY2tlbiUyMGZvb2R8ZW58MHx8MHx8&auto=format&fit=crop&w=800&q=60',
    price: '$$',
  },
  {
    id: 14,
    name: 'Baked Chicken',
    category: 'chicken',
    image:
      'https://images.unsplash.com/photo-1594221708779-94832f4320d1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8Y2hpY2tlbiUyMGZvb2R8ZW58MHx8MHx8&auto=format&fit=crop&w=800&q=60',
    price: '$$$$',
  },
  {
    id: 15,
    name: 'Chicken Tenders',
    category: 'chicken',
    image:
      'https://images.unsplash.com/photo-1562967914-608f82629710?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fGNoaWNrZW4lMjBmb29kfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60',
    price: '$',
  },
  {
    id: 16,
    name: 'Chicken Kabob',
    category: 'chicken',
    image:
      'https://images.unsplash.com/photo-1603360946369-dc9bb6258143?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fGNoaWNrZW4lMjBmb29kfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60',
    price: '$$$',
  },
];

const Food = () => {
  const [foods, setFoods] = useState(data);

  //   Filter Type burgers/pizza/etc
  const filterType = (category) => {
    setFoods(
      data.filter((item) => {
        return item.category === category;
      })
    );
  };

  //   Filter by price
  const filterPrice = (price) => {
    setFoods(
      data.filter((item) => {
        return item.price === price;
      })
    );
  };

  return (
    <div className='max-w-[1640px] m-auto px-4 py-12'>
      <h1 className='text-orange-600 font-bold text-4xl text-center'>
        Top Rated Menu Items
      </h1>

      {/* Filter Row */}
      <div className='flex flex-col lg:flex-row justify-between'>
        {/* Fliter Type */}
        <div>
          <p className='font-bold text-gray-700'>Filter Type</p>
          <div className='flex justfiy-between flex-wrap'>
            <button
              onClick={() => setFoods(data)}
              className='m-1 border-orange-600 text-orange-600 hover:bg-orange-600 hover:text-white'
            >
              All
            </button>
            <button
              onClick={() => filterType('burger')}
              className='m-1 border-orange-600 text-orange-600 hover:bg-orange-600 hover:text-white'
            >
              Burgers
            </button>
            <button
              onClick={() => filterType('pizza')}
              className='m-1 border-orange-600 text-orange-600 hover:bg-orange-600 hover:text-white'
            >
              Pizza
            </button>
            <button
              onClick={() => filterType('salad')}
              className='m-1 border-orange-600 text-orange-600 hover:bg-orange-600 hover:text-white'
            >
              Salads
            </button>
            <button
              onClick={() => filterType('chicken')}
              className='m-1 border-orange-600 text-orange-600 hover:bg-orange-600 hover:text-white'
            >
              Chicken
            </button>
          </div>
        </div>

        {/* Filter Price */}
        <div>
          <p className='font-bold text-gray-700'>Filter Price</p>
          <div className='flex justify-between max-w-[390px] w-full'>
            <button
              onClick={() => filterPrice('$')}
              className='m-1 border-orange-600 text-orange-600 hover:bg-orange-600 hover:text-white'
            >
              $
            </button>
            <button
              onClick={() => filterPrice('$$')}
              className='m-1 border-orange-600 text-orange-600 hover:bg-orange-600 hover:text-white'
            >
              $$
            </button>
            <button
              onClick={() => filterPrice('$$$')}
              className='m-1 border-orange-600 text-orange-600 hover:bg-orange-600 hover:text-white'
            >
              $$$
            </button>
            <button
              onClick={() => filterPrice('$$$$')}
              className='m-1 border-orange-600 text-orange-600 hover:bg-orange-600 hover:text-white'
            >
              $$$$
            </button>
          </div>
        </div>
      </div>

      {/* Display foods */}
      <div className='grid grid-cols-2 lg:grid-cols-4 gap-6 pt-4'>
        {foods.map((item, index) => (
          <div
            key={index}
            className='border shadow-lg rounded-lg hover:scale-105 duration-300'
          >
            <img
              src={item.image}
              alt={item.name}
              className='w-full h-[200px] object-cover rounded-t-lg'
            />
            <div className='flex justify-between px-2 py-4'>
              <p className='font-bold'>{item.name}</p>
              <p>
                <span className='bg-orange-500 text-white p-1 rounded-full'>
                  {item.price}
                </span>
              </p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Food;

This component manages the state of displayed foods and provides filtering functionality based on type and price. It also renders a visually appealing grid of food items with their details.

Understanding the Functionality

Filtering by Type

The filterType function filters the displayed foods based on the selected category (burger, pizza, etc.). Each button associated with a category triggers this filter when clicked.

<button onClick={() => filterType('burger')} className='...'>
  Burgers
</button>

Filtering by Price

Similarly, the filterPrice function filters foods based on the selected price range. Each button associated with a price range triggers this filter when clicked.

<button onClick={() => filterPrice('$')} className='...'>
  $
</button>

Displaying Food Items

The code efficiently maps through the filtered foods array and displays each item in a visually appealing card format.

{foods.map((item, index) => (
  <div key={index} className='...'>
    {/* ... (Food item details) ... */}
  </div>
))}

Conclusion

This React code provides a robust foundation for displaying and dynamically filtering top-rated menu items. By understanding and customizing this code, developers can create engaging and user-friendly interfaces for showcasing a variety of content. Whether you're building a restaurant menu or any other categorized content display, this React setup can be a valuable starting point. Happy coding!

Building a Restaurant Category Component with Tailwind CSS in React

ryad — Sat, 20 Jan 2024 09:48:00 +0000

In the world of web development, creating visually appealing and responsive components is key to providing an engaging user experience. One way to achieve this is by using Tailwind CSS, a utility-first CSS framework, in combination with React. In this article, we’ll walk through the process of creating a beautiful Category component using Tailwind CSS and React.

Prerequisites

Before we dive into the code, make sure you have the following prerequisites:

Node.js and npm installed on your development machine.
Basic knowledge of React and JavaScript.
A React project set up. If you haven’t already, create one using Create React App.

Getting Started

In this tutorial, we’ll create a Category component that displays a list of categories with their images. We’ll start by defining the data for our categories and then build the component using React and Tailwind CSS.

Here’s the code for our Category component:

import React from "react";

const Category = () => {
  const categories = [
    {
      id: 1,
      name: "Fast Food",
      image:
        "https://duyt4h9nfnj50.cloudfront.net/new_search_home_eats_icon/FastFood_BrowseHome@3x.png",
    },
    {
      id: 2,
      name: "Pizza",
      image:
        "https://duyt4h9nfnj50.cloudfront.net/new_search_home_eats_icon/Pizza_BrowseHome@3x.png",
    },
    {
      id: 3,
      name: "Wings",
      image:
        "https://duyt4h9nfnj50.cloudfront.net/new_search_home_eats_icon/Wings_BrowseHome@3x.png",
    },
    {
      id: 4,
      name: "Indian",
      image:
        "https://duyt4h9nfnj50.cloudfront.net/new_search_home_eats_icon/Indian_BrowseHome@3x.png",
    },
    {
      id: 5,
      name: "Latest Deals",
      image:
        "https://duyt4h9nfnj50.cloudfront.net/new_search_home_eats_icon/Deals_BrowseHome@3x.png",
    },
    {
      id: 6,
      name: "Restaurant Rewards",
      image:
        "https://duyt4h9nfnj50.cloudfront.net/new_search_home_eats_icon/RestoRewards_BrowseHome@3x.png",
    },
  ];
  return (
    <div className="max-w-[1640px] m-auto px-4 py-12">
      <h1 className="text-orange-600 font-bold text-4xl text-center">
        Top Rated Menu Items
      </h1>
      {/* Categories */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-6 py-6">
        {categories.map((item, index) => (
          <div
            key={index}
            className="bg-gray-100 hover:bg-white cursor-pointer duration-500 rounded-lg p-4 flex justify-between items-center"
          >
            <h2 className="font-bold sm:text-xl">{item.name}</h2>
            <img src={item.image} alt={item.name} className="w-20" />
          </div>
        ))}
      </div>
    </div>
  );
};

export default Category;

In the Category component, we have defined an array of categories, each containing an id, name, and image. We then use the map function to loop through the categories and render them as cards with their names and images. The styling is done using Tailwind CSS classes, making it easy to achieve a clean and responsive design.

Integrating the Component

Now that we have our Category component ready, let's integrate it into our main App component:

import React from "react";
import Category from "./components/Category";

function App() {
  return (
    <div>
      <Category />
    </div>
  );
}

export default App;

Here, we simply import the Category component and include it in our App component. When you run your React application, you should see the beautifully styled category cards displayed on your page.

Conclusion

In this article, we’ve demonstrated how to create a stunning Category component using Tailwind CSS and React. This combination allows you to build visually appealing and responsive UI components with ease. Feel free to customize and expand upon this component to suit your project’s needs. Happy coding!

Responsive Footer using React with Tailwind CSS and React Icons

ryad — Thu, 18 Jan 2024 09:43:31 +0000

In web development, creating an appealing and functional footer is crucial for a polished user experience. In this article, we’ll explore how to build a sleek footer component using Tailwind CSS and React Icons. We’ll break down the code step by step and explain the key components involved.

Prerequisites

Before diving into the code, make sure you have the following set up:

React project
Tailwind CSS integration
react-icons library for icon integration

Getting Started

Let’s start by creating a functional React component for our footer. Here’s the code:

import {
  FaInstagram,
  FaDribbble,
  FaXTwitter,
  FaYoutube,
} from "react-icons/fa6";

const Footer = () => {
  const socialLinks = [
    { label: "YouTube", icon: FaYoutube },
    { label: "Instagram", icon: FaInstagram },
    { label: "Twitter", icon: FaXTwitter },
    { label: "Dribbble", icon: FaDribbble },
  ];

  const links = [
    [
      { label: "Company", key: "header-1" },
      { label: "About us", key: "item-1-1" },
      { label: "Blog", key: "item-1-2" },
      { label: "Contact us", key: "item-1-3" },
      { label: "Pricing", key: "item-1-4" },
      { label: "Testimonials", key: "item-1-5" },
    ],
    [
      { label: "Support", key: "header-2" },
      { label: "Help center", key: "item-2-1" },
      { label: "Terms of service", key: "item-2-2" },
      { label: "Legal", key: "item-2-3" },
      { label: "Privacy policy", key: "item-2-4" },
      { label: "Status", key: "item-2-5" },
    ],
  ];

  return (
    <div className="app min-h-screen flex items-end justify-center font-poppins">
      <div className="py-16 grid lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-2 grid-cols-1 bg-green-800 text-white w-full p-4 relative">
        <div className="  ">
          <div className="footer-img flex items-center">
            <img
              src={"https://i.imgur.com/520zDfd.png"}
              alt=""
              className="w-16 h-auto"
            />
            <span className="text-3xl font-bold pl-2 text-white">
              Company name
            </span>
          </div>
          <div className="infos text-gray-400">
            <span>Copyright © 2020 Nexcent ltd.</span>
            <span>All rights reserved</span>
          </div>
          <div className="footer-icons flex items-center space-x-3">
            {socialLinks.map((socialLink, index) => {
              const Icon = socialLink.icon;
              return (
                <Icon
                  key={`social-${index}`}
                  className="w-14 h-14 p-2 rounded-full bg-green-700 hover:bg-white hover:text-green-700 cursor-pointer"
                />
              );
            })}
          </div>
        </div>
        <div className="mx-2 grid w-full py-5 sm:py-0 grid-cols-2 ">
          {links.map((col, index) => {
            return (
              <ul className={`col col-${index + 1}`} key={`col-${index}`}>
                {col.map((link, index) => {
                  return (
                    <li
                      key={`link-${col}-${index}`}
                      className={`text-gray-400 cursor-pointer ${
                        link.key === "header-1" || link.key === "header-2"
                          ? "text-2xl text-white"
                          : ""
                      }`}
                    >
                      {link.label}
                    </li>
                  );
                })}
              </ul>
            );
          })}
        </div>
        <div className="footer-form flex flex-col  ">
          <label className="text-lg font-semibold text-white">
            Stay up to date
          </label>
          <input
            type="email"
            placeholder="Subscribe to our email"
            className="mt-2 w-full border-none rounded-lg py-3 px-6"
          />
        </div>
      </div>
    </div>
  );
};

export default Footer;

Now import Footer component to App.js file

import Footer from "@/Components/Footer";

const page = () => {
  return (
    <>
      <Footer />
      {/* other component here */}
    </>
  );
};

export default page;

Explanation

Let’s break down the key components of our footer component:

Social Media Icons: We import social media icons from react-icons/fa6 and render them as clickable icons.
Footer Links: We organize the footer links into two columns, each containing links with labels like “About us,” “Blog,” and more. These links are mapped and displayed dynamically.
Company Info: We display the company logo, name, and copyright information.
Email Subscription: An input field for users to subscribe to the newsletter.

Styling with Tailwind CSS

Tailwind CSS classes are used extensively to style the footer. Classes like text-white, bg-green-800, rounded-full, and others are applied to various elements for a clean and responsive design.

Conclusion

In this article, we’ve created a stylish and functional footer component for your React application using Tailwind CSS and React Icons. You can customize this footer to fit the branding and content of your website. A well-designed footer can improve user engagement and navigation on your site. Happy coding!

PDF Viewer in Nextjs 13.4 using @react-pdf-viewer

ryad — Thu, 19 Oct 2023 12:12:20 +0000

PDFs are a ubiquitous format for sharing documents and information. In web applications, it’s often necessary to integrate a PDF viewer to display these documents. In this tutorial, we’ll walk through the process of creating a simple PDF viewer using React and the @react-pdf-viewer library. We'll also show you how to configure it within a Next.js application.

Prerequisites

Before we begin, make sure you have the following dependencies installed in your project:

@react-pdf-viewer/core: ^3.12.0
@react-pdf-viewer/default-layout: ^3.12.0
pdfjs-dist: ^3.10.111
raw-loader (in devDependencies)

Setting up the Project

Let’s start by setting up our Next.js project with a simple PDF viewer component. Here’s the directory structure we’ll be using:

Creating the page.js File

Inside the pages directory, create a file called page.js. This will be the page where we'll use our PDF viewer component.


// pages/page.js
import PdfViewer from "@/components/PdfViewer";
const Page = () => {
  return (
    <>
      <PdfViewer url={"https://pdfobject.com/pdf/sample.pdf"} />
    </>
  );
};
export default Page;

In this code, we import and use the PdfViewer component with a sample PDF URL.

Configuring next.config.js

Next, let’s configure next.config.js to handle images and any additional webpack rules. We'll need to specify the domains for images and add a rule to load .node files using raw-loader.


// next.config.js
const nextConfig = {
  images: {
    domains: ["img.freepik.com", "veterinaire-tour-hassan.com"],
  },
  webpack: (config) => {
    config.module.rules.push({
      test: /\.node/,
      use: "raw-loader",
    });
return config;
  },
};
module.exports = nextConfig;

This configuration ensures that Next.js can handle the specified image domains and use raw-loader for .node files.

Creating the PdfViewer.jsx Component

Now, let’s create the PdfViewer component inside the components directory. This component will use the @react-pdf-viewer/core library to render PDFs.

// components/PdfViewer.jsx
"use client";
import { Viewer, Worker } from "@react-pdf-viewer/core";
import "@react-pdf-viewer/core/lib/styles/index.css";
import { defaultLayoutPlugin } from "@react-pdf-viewer/default-layout";
import "@react-pdf-viewer/default-layout/lib/styles/index.css";
const PdfViewer = ({ url }) => {
  const defaultLayoutPluginInstance = defaultLayoutPlugin();
  return (
    <div className="h-screen w-screen">
      <Worker workerUrl="https://unpkg.com/pdfjs-dist@3.10.111/build/pdf.worker.min.js">
        <Viewer
          fileUrl={url}
          plugins={[defaultLayoutPluginInstance]}
        />
      </Worker>
    </div>
  );
};
export default PdfViewer;

In this component:

We import the necessary components and styles from @react-pdf-viewer/core and @react-pdf-viewer/default-layout.
We create the PdfViewer component, which takes a url prop for the PDF file's URL.
Inside the component, we set up the Worker and Viewer components provided by @react-pdf-viewer/core. The Worker component loads the PDF.js worker script.
We use the defaultLayoutPlugin to apply a default layout to the PDF viewer.
Finally, we render the PDF viewer within a div that occupies the full screen.

Conclusion

With these files in place and the dependencies correctly installed, you now have a basic PDF viewer set up in your Next.js application. You can customize the viewer further by exploring the options and features provided by @react-pdf-viewer/core and @react-pdf-viewer/default-layout. This tutorial serves as a starting point for integrating PDF viewing capabilities into your web applications.

Restaurant Hero Section in React with TailwindCss: A Step-by-Step Tutorial

ryad — Mon, 16 Oct 2023 18:40:44 +0000

Introduction

In the world of web development, creating an eye-catching hero section is essential to grab your visitors’ attention and make a lasting impression. A hero section is the first thing users see when they land on your website, and it sets the tone for their entire browsing experience. In this article, we will walk you through the process of building a stunning hero section in React, using a simple yet effective code example.

Getting Started

Before we dive into the code, make sure you have a React application set up. If you don’t already have one, you can create a new React app using Create React App or your preferred setup.

Creating the Hero Component

Our hero section will be a reusable component that you can easily integrate into your React project. Here’s the code for the Hero component:


import React from 'react';
const Hero = () => {
  return (
    <div className='max-w-[1640px] mx-auto p-4'>
      <div className='max-h-[500px] relative'>
        {/* Overlay */}
        <div className='absolute w-full h-full text-gray-200 max-h-[500px] bg-black/40 flex flex-col justify-center'>
          <h1 className='px-4 text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold'>
            The <span className='text-orange-500'>Best</span>
          </h1>
          <h1 className='px-4 text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold'>
            <span className='text-orange-500'>Foods</span> Delivered
          </h1>
        </div>
        <img
          className='w-full max-h-[500px] object-cover'
          src='https://images.pexels.com/photos/1639562/pexels-photo-1639562.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
          alt='/'
        />
      </div>
    </div>
  );
};
export default Hero;

In this code, we define a Hero functional component that renders a hero section with a background image and a text overlay. The text overlay uses Tailwind CSS classes to style the text and create an attractive visual effect.

Using the Hero Component

Now that we have our Hero component, let's integrate it into our main application. Here's the code for our App component:


import React from 'react';
import Hero from './components/Hero';
function App() {
  return (
    <div>
      <Hero />
    </div>
  );
}
export default App;

In the App component, we simply import and render the Hero component. You can customize the hero section's content and background image by modifying the Hero component's props and CSS classes.

Conclusion

Creating a stunning hero section in React can greatly enhance the visual appeal of your website and captivate your visitors. In this article, we’ve provided a simple yet effective code example for building a hero section using React and Tailwind CSS. Feel free to adapt and extend this code to suit your project’s needs, and don’t forget to add your own content and styles to make it truly unique. With this foundation, you’re well on your way to creating impressive hero sections for your web applications.

Building a Scrollable Navbar with React: A Step-by-Step Guide

ryad — Thu, 12 Oct 2023 12:04:20 +0000

Are you looking to create an engaging and interactive website with a dynamic scrolling navbar? You’ve come to the right place. In this tutorial, we’ll walk you through the process of creating a scrollable navbar in React that hides when the user scrolls down and reappears when they scroll up. This effect is a common feature on modern websites and can greatly enhance the user experience. Let’s get started!

Prerequisites

Before we dive into the code, make sure you have the following:

Node.js and npm installed on your computer.
Basic knowledge of React.js.
A text editor or integrated development environment (IDE) of your choice.

Setting Up the Project

First, create a new React project using create-react-app or your preferred method. Once your project is set up, you can create a new component for the scrollable navbar. For this tutorial, we'll call it ScrollNavbar.js.


import React, { useState, useEffect } from 'react';
const ScrollNavbar = () => {
  // State variables to manage scroll behavior
  const [prevScrollpos, setPrevScrollpos] = useState(window.pageYOffset);
  const [top, setTop] = useState(0);
  useEffect(() => {
    // Function to handle scroll events
    const handleScroll = () => {
      const currentScrollPos = window.pageYOffset;
      if (prevScrollpos > currentScrollPos) {
        setTop(0); // Show navbar
      } else {
        setTop(-50); // Hide navbar
      }
      setPrevScrollpos(currentScrollPos);
    };
    // Add scroll event listener when the component mounts
    window.addEventListener('scroll', handleScroll);
    // Clean up by removing the event listener when the component unmounts
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, [prevScrollpos]);
  // Styles for the navbar and links
  const navbarStyle = {
    backgroundColor: '#333',
    position: 'fixed',
    top: `${top}px`,
    width: '100%',
    display: 'block',
    transition: 'top 0.3s',
  };
  const linkStyle = {
    float: 'left',
    display: 'block',
    color: '#f2f2f2',
    textAlign: 'center',
    padding: '15px',
    textDecoration: 'none',
    fontSize: '17px',
  };
  return (
    <div>
      <div id="navbar" style={navbarStyle}>
        <a href="#home" style={linkStyle}>
          Home
        </a>
        <a href="#news" style={linkStyle}>
          News
        </a>
        <a href="#contact" style={linkStyle}>
          Contact
        </a>
      </div>
      <div
        style={{
          padding: '15px 15px 2500px',
          fontSize: '30px',
          marginTop: '30px',
        }}
      >
        <p>
          <b>This example demonstrates how to hide a navbar when the user starts to scroll the page.</b>
        </p>
        {/* ... Rest of your content ... */}
      </div>
    </div>
  );
};
export default ScrollNavbar;

How It Works

In this code, we start by defining two state variables, prevScrollpos and top, which will help us manage the scroll behavior of the navbar. The useEffect hook is used to add an event listener to the window object to detect scroll events. When the user scrolls down, the top value is set to -50px, causing the navbar to hide. Conversely, when the user scrolls up, the top value is set to 0, making the navbar visible again.

Styling Your Navbar

You can customize the appearance of the navbar and links by modifying the navbarStyle and linkStyle objects. Adjust the colors, fonts, and other CSS properties to match your website's design.

Integrating the ScrollNavbar Component

Now that you have created the ScrollNavbar component, you can easily integrate it into your application by importing it and rendering it where you want the scrollable navbar to appear.


import React from 'react';
import ScrollNavbar from './ScrollNavbar';
function App() {
  return (
    <div>
      <ScrollNavbar />
      {/* Your content goes here */}
    </div>
  );
}
export default App;

Conclusion

Congratulations! You’ve successfully built a scrollable navbar in React that hides when the user scrolls down and reappears when they scroll up. This dynamic effect can greatly enhance the user experience of your website. Feel free to further customize the styles and integrate this component into your web project. Happy coding!

Now, go ahead and test your scrollable navbar in your React application. Enjoy the improved user experience it brings to your website!

DEV Community: ryad

Build Responsive Hero Section with React and Tailwind CSS

Unveiling the Hero.jsx Component

Understanding the Structure

Integrating with App.jsx

Final Thoughts

Build Responsive Navbar with Tailwind CSS and React Icons

Introduction

Getting Started

Install Tailwind CSS

Install React Icons

Building the Navbar Component

Navbar Component (Navbar.jsx)

Integrating the Navbar into Your App

App Component (app.js)

Conclusion

Building a Hero Section with React and Tailwind Css

The App Structure

The Analytics Component

Conclusion

Build Pricing Card Component using React & Tailwind CSS

Setting the Scene

Deconstructing the Tailwind CSS Classes

1. Responsive Design

2. Hover Effects

3. Typography and Spacing

4. Button Styling

Integration in app.js

Conclusion

Building React Footer Components with Tailwindcss

Introduction

How to Use

Conclusion

Building a Newsletter Component with React and Tailwind CSS

Introduction:

Key Features:

Creating a Reactive Restaurant Grid with Filtering Using React and Tailwind CSS

The Code Structure

App.js

Food.js

Understanding the Functionality

Filtering by Type

Filtering by Price

Displaying Food Items

Conclusion

Building a Restaurant Category Component with Tailwind CSS in React

Prerequisites

Getting Started

Integrating the Component

Conclusion

Responsive Footer using React with Tailwind CSS and React Icons

Prerequisites

Getting Started

Explanation

Styling with Tailwind CSS

Conclusion

PDF Viewer in Nextjs 13.4 using @react-pdf-viewer

Prerequisites

Setting up the Project

Creating the page.js File

Configuring next.config.js

Creating the PdfViewer.jsx Component

Conclusion

Restaurant Hero Section in React with TailwindCss: A Step-by-Step Tutorial

Introduction

Getting Started

Creating the Hero Component

Using the Hero Component

Conclusion

Building a Scrollable Navbar with React: A Step-by-Step Guide

Prerequisites

Setting Up the Project

How It Works

Styling Your Navbar

Integrating the ScrollNavbar Component

Conclusion

Integration in `app.js`

`App.js`

`Food.js`