Skip to content

Instantly share code, notes, and snippets.

@Markkop
Last active April 14, 2023 14:39
Show Gist options
  • Select an option

  • Save Markkop/c2082ebfaf4f818b355afed9e13372f7 to your computer and use it in GitHub Desktop.

Select an option

Save Markkop/c2082ebfaf4f818b355afed9e13372f7 to your computer and use it in GitHub Desktop.
A ChatGPT prompt to create a React progress bar component

Create a React component with tailwind for me.

It is a progress bar to track the user's progress level.
The text and the vertical line must be at the end of the current progress bar.
The background is transparent.

The component has this ASCII representation:

                            │
                            │
┌───────────────────────────┼──────────────────────────────────────────┐
│########%%%%%|||||||||     │                                          │
└───────────────────────────┼──────────────────────────────────────────┘
                            │
                            │
         Progress Level - 26%

These are some of the CSS rules that a Figma file would generate for this component. You can use it to understand how the component is made. You don't need to use the exact same CSS.

/* pending */

position: absolute;
width: 1780px;
height: 8px;
left: 0px;
top: 167px;

/* Group 1674 */

position: absolute;
width: 1780px;
height: 8px;
left: 0px;
top: 167px;

// Lots of CSS here, removed for brievity.

You must always try to use the existing Tailwind rules that are extended on the tailwind.config.js

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      // More colors here
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

Use the following template for the code:

import { twMerge } from 'tailwind-merge'

export function ComponentName({ className = '' }) {
  return (
    <div className={twMerge('', className)}>
      // ...
    </div>
  )
}

Note: the twMerge must only be used in the most outer element.

Use as much tailwind as possible, avoiding the use of style props as much as possible.
Send me the code block only, don't explain the code.
Name it ProgressBar.
It will receive progress and classname props.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment