gistfile1.txt

import React, { useEffect, useState } from 'react';
import './AppSCSS.scss';
import 'bootstrap/dist/css/bootstrap.min.css';
import { FaHome, FaInbox, FaUser } from 'react-icons/fa';

function App() {
  const cardsData = [
    {
      title: 'Healthy Habits on the Job',
      text: 'Ergonomics is designing a job to fit the worker so the work is safer and more efficient. Implementing ergonomic solutions can make employees more comfortable productive.',
      image: require('./assets/image1.jpg'),
    },

    {
      title: 'Healthy Habits on the Job',
      text: 'Ergonomics is designing a job to fit the worker so the work is safer and more efficient. Implementing ergonomic solutions can make employees more comfortable productive.',
      image: require('./assets/image2.jpg'),
    }

    // {
    //   title: 'Healthy Habits on the Job',
    //   text: 'Ergonomics is designing a job to fit the worker so the work is safer and more efficient. Implementing ergonomic solutions can make employees more comfortable productive.',
    //   image: require('./assets/image2.jpg'),
    // }
    // Add more card objects here as needed
  ];


  const [activeTab, setActiveTab] = useState('home');

  useEffect(() => {
    const ingTabs = document.querySelectorAll('.ing-tab');

    ingTabs.forEach(tab => {
      tab.addEventListener('click', () => {
        ingTabs.forEach(tab => {
          tab.classList.remove('active');
        });

        tab.classList.add('active');
      });
    });
  }, []);

  return (
    <div>
      <header>
        <div className="ing-tabs">
          <div className="ing-tab active">Dashboard</div>
          <div className="ing-tab">Safety</div>
          <div className="ing-tab">Managers</div>
          <div className="ing-tab">Sales</div>
        </div>
        <br />
        <br />
      </header>

      <div className="app-container">
        <div className="main-content">
          {cardsData.map((card, index) => (
            <div className="card" key={index}>
              <img src={card.image} className="card-img-top" alt={card.title} />
              <div className="card-body">
                <h5 className="card-title">{card.title}</h5>
                <p className="card-text">{card.text}</p>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Bottom Tab Bar */}
      <div className="bottom-tab-bar">
        <div
          className={`tab-item ${activeTab === 'home' ? 'active' : ''}`}
          onClick={() => setActiveTab('home')}
        >
          <FaHome className="icon" />
          <span className="tab-text">Home</span>
        </div>

        <div
          className={`tab-item ${activeTab === 'inbox' ? 'active' : ''}`}
          onClick={() => setActiveTab('inbox')}
        >
          <FaInbox className="icon" />
          <span className="tab-text">Inbox</span>
        </div>

        <div
          className={`tab-item ${activeTab === 'profile' ? 'active' : ''}`}
          onClick={() => setActiveTab('profile')}
        >
          <FaUser className="icon" />
          <span className="tab-text">Profile</span>
        </div>
      </div>
    </div>
  );
}

export default App;


@import '~bootstrap/scss/bootstrap';

.ing-tabs {
    display: flex;
    gap: 9px;
    color: #1366FF;
    border-radius: 8px;
    overflow-x: auto;
    white-space: nowrap;
    padding: 12px;

    // Add Bootstrap's utility classes for responsiveness
    @include media-breakpoint-down(sm) {
      flex-wrap: nowrap;
    }

    @include media-breakpoint-up(md) {
      justify-content: center;
    }
}

.ing-tab {
    display: inline-flex;
    padding: 12px 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 40px;
    cursor: pointer;
    white-space: nowrap;
}

.ing-tab.active {
    background: rgba(19, 102, 255, 0.10);
    border: 1px solid #1366FF;
}

// Bottom Tab Bar Styles
.bottom-tab-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #ffffff;
    border-top: 1px solid #ccc;
    padding: 10px 0;
    position: fixed;
    bottom: 0;
    width: 100%;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}

.tab-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    color: #555;
    cursor: pointer;

    .icon {
        font-size: 20px;
    }

    .tab-text {
        font-size: 12px;
        margin-top: 4px;
    }

    &.active {
        color: #1366FF;

        .icon, .tab-text {
            color: #1366FF;
        }
    }
}

// AppSCSS.scss

.app-container {
    height: 100vh; // Full viewport height
    display: flex;
    justify-content: center; // Center content horizontally
    align-items: center; // Center content vertically
    background-color: #f5f5f5; // Background color for the app
  }
  
  .main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    max-width: 800px;
    width: 100%; // Ensure the content is responsive
    height: 100%; // Allow the container to grow and scroll
    overflow-y: auto; // Enable vertical scrolling
    background-color: #fff;
    border-radius: 10px;
  }
  
  .card {
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    width: 100%; // Ensure the card takes full width
  
    .card-img-top {
      width: 100%;
      height: auto;
    }
  
    .card-body {
      padding: 15px;
      background-color: white;
    }
  
    .card-title {
      font-size: 1.25rem;
      font-weight: bold;
      margin-bottom: 10px;
    }
  
    .card-text {
      font-size: 1rem;
      color: #555;
      white-space: normal; // Allow text to wrap
      overflow: hidden; // Hide any overflow
      text-overflow: ellipsis; // Add ellipsis if text overflows
    }
  }