import { Badge } from 'reusico-component-library';
import "reusico-component-library/dist/reusico-component-library.css";

function App(){
return(
 <>
   <Badge color = "green" type="pill"> Badge </Badge>
   <Badge color = "green" type="pill"> Badge </Badge>   
   <Badge > Badge </Badge>
 </>
)
}

import { Banner } from 'reusico-component-library';
import "reusico-component-library/dist/reusico-component-library.css";

function App(){
return(
 <>
   <Banner variant="neutral" /> 

   <Banner variant="success" title="This is custom title" >
      This text could be changed. adipisicing elit. Nihil velit praes entium ex? 
      Dolor, quidem!
   </Banner> 
</>
)
}

import { Testimonial } from 'reusico-component-library';
import "reusico-component-library/dist/reusico-component-library.css";

function App() {
  return (
    <Testimonial>
      <Testimonial.Image src="https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
      <Testimonial.Content>
        <Testimonial.Text>
          Anuj Maurya, A Software Engineer and Web Developer. This is a custom testimonial. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, quaerat. Lorem ipsum dolor sit, amet consectetur adipisicing.
        </Testimonial.Text>
        <Testimonial.Name>
          Anuj Kumar Maurya
        </Testimonial.Name>
        <Testimonial.Role>
          Founder & CEO / Reusico
        </Testimonial.Role>
      </Testimonial.Content>
    </Testimonial>
  );
}

import { TestimonialWithoutImage } from 'reusico-component-library';
import "reusico-component-library/dist/reusico-component-library.css";

function App() {
  return (
    <TestimonialWithoutImage
      heading={
        <>Reusico<span style={{ color: "#2E59F3" }}>Library</span></>
      }
      name="Anuj Maurya / The Founder & CEO"
    >
      Anuj Maurya. Lorem ipsum dolor sit amet consectetur 
      adipisicing elit. Nemo sint magnam illum quam repellendus? Maxime dolorem 
      corporis ut deleniti pariatur. Lorem ipsum dolor sit amet consectetur adipisicing.
    </TestimonialWithoutImage>
  );
}

import { Tooltip, Badge } from 'reusico-component-library';
import "reusico-component-library/dist/reusico-component-library.css";

function App() {
  return (
    <>
      <!--  Tooltip with custom heading and body text wrapping a Badge  -->
      <Tooltip
        color="light-green"
        heading="This is custom heading"
        bodytext="These are bodytext."
      >
        <Badge color="green">this is Where to be hover</Badge>
      </Tooltip>

      <!--  Simple Tooltip with default content wrapping a button, you can wrap anything  -->
      <Tooltip color="blue">
        <button>Hover me</button>
      </Tooltip>
    </>
  );
}

import React from 'react';
import { ToastPopup } from 'reusico-component-library';
import "reusico-component-library/dist/reusico-component-library.css";

function App() {
  const [showToast, setShowToast] = React.useState(false);

  function handleShowToast() {
    setShowToast(true);

    setTimeout(() => {
      setShowToast(false);
    }, 5000);
  }

  return (
    <>
      <button
        onClick={handleShowToast}
        className="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-xl shadow-md 
 transition-all duration-200"
      >
        Show Toast
      </button>

      {showToast && (
        <>
         <ToastPopup message="The buttun Clicked" variant="success" position="top-left" duration={5000} ></ToastPopup>
          <ToastPopup message="The buttun Clicked" variant="warning" position="top-right"  ></ToastPopup>
          <ToastPopup message="The buttun Clicked" variant="error" position="bottom-right"  ></ToastPopup>
          <ToastPopup message="The buttun Clicked" variant="neutral" position="bottom-left"  ></ToastPopup>
        </>
      )}
    </>

   <!--This will popup on screen load  -->
    <ToastPopup position="bottom-right" variant="success" message="Showing Preview" duration={5000} />

  )
}

 
import { Card } from 'reusico-component-library';
import "reusico-component-library/dist/reusico-component-library.css";

function App() {
  return (
    <Card 
      title="This is custom title"
      icon={{
        src: "https://cdn-icons-png.freepik.com/256/7546/7546329.png?ga=GA1.1.1171956101.1729056429&semt=ais_hybrid",
        size: 38,
        backgroundColor: "#F5F5F5",
      }}
    >
      Cards Icon could be changed, Title is customizable and also these body text. A click event also can be added.
    </Card>
  );
}