Installation

npm install winner-podium

Usage

import { WinnersPodium } from "winner-podium";

<WinnersPodium
  options={{
    container: {
      style: {
        borderRadius: "1rem",
        boxShadow: "rgba(0, 0, 0, 0.35) 0px 5px 15px",
      },
      className: "",
    },
    podiumHeight: 70,
    podiumWidth: 200,
    backgroundColor: "rgb(2 193 189)",
    is3D: true,
    topViewHeight: 30,
    header: <h1>Weekly Star Performers</h1>,
    footer: (
      <div>
        <div>
          <b>Rank 1:</b> Name-1
        </div>
        <div>
          <b>Rank 2:</b> Name-2
        </div>
        <div>
          <b>Rank 3:</b> Name-3
        </div>
      </div>
    ),
    winners: {
      rank1: (
        <img
          src="./man.png"
          style={{
            height: 100,
            width: 100,
            objectFit: "cover",
          }}
        />
      ),
      rank2: (
        <img
          src="./man.png"
          style={{
            height: 100,
            width: 100,
            objectFit: "cover",
          }}
        />
      ),
      rank3: (
        <img
          src="./man.png"
          style={{
            height: 100,
            width: 100,
            objectFit: "cover",
          }}
        />
      ),
    },
  }}
/>;

Preview

Hints:

2D:

3D:

Options

You can pass the following options to WinnersPodium:

Parameter	Type	Default	Description
container	object { style: object; className: string }		Provide style or className to the podium
podiumHeight	number	70	height of the smallest(rank-3) podium
podiumWidth	number	100	width of each rank podium
backgroundColor	string	rgb(2 193 189)	color of the podium. [Note: Add colors in rgb only]
is3D	boolean	false	Display the podium in 2D
topViewHeight	number	30	height of top of the stand in 3D view
header	JSX.Element		Element to display at the top
footer	JSX.Element		Element to display at the bottom
winners	object { rank1: JSX.Element; rank2: JSX.Element; rank3:JSX.Element }		Winner's Details to show on the podium

Sample config using all options

{
  container: {
    style: {
      color: "white"
    },
    className: "winners-podium-container",
  },
  podiumHeight: 70,
  podiumWidth: 200,
  backgroundColor: "rgb(2 193 189)",
  is3D: true,
  topViewHeight: 30,
  header: <header>Header</header>,
  footer: <footer>Footer</footer>,
  winners: {
    rank1: <h4>Name-1</h4>,
    rank2: <h4>Name-2</h4>,
    rank3: <h4>Name-3</h4>,
  },
}

Author

Find me on Linkedin: https://www.linkedin.com/in/sushma-goswami-8550bb146/

License

winner-podium is available under the MIT license.