QR Code Component using Vite, typescript, and Styled-Components

Hi there , When I visit your site on my computer its scrollable try to make it single page using the height of the //global conatiner// which contains all the //elements// inside... To make it single page use this example :

HTML !!!

<div class="global"> <main>///Your contents in here</main> </div>

CSS !!! .global{ display:flex; height:100vh; justify-content:center; align-items:center; }

This code will center the items to the middle of the screen

Great efforts, especially using Typescript and styled components. With a bit of tweaks and fixes, you should be able to make it accessible and optimized to the best

• Building a good HTML semantics for a better structure to the content while you build app using react/typescript is a must
• You could have avoided the extra <div> by using React.Fragments or <> in your card component
• To simply center card component, you can also use display: grid; place-content: center;
• You have set fixed width for few elements, avoid setting fixed width, you should let it scale based on the content + padding, this supports responsive behavior and easy to implement
• Lastly your final build of the application will also include the long list of styles from theme.ts which I think is not necessary (could be optimized)

Hope this is helpful, keep coding!!