Web Components Showcase


  • Date:
  • Authors:
    • Vorobey's avatar image.
      VorobeyLead Developer
  • Topics:
  • Other:
On this page

Work on additional web components.

Web Components


It has been a while since my last post. For the last couple of weeks, I've been working on additional Web Components for my Website theme used by Virtunatia's project and other ones. A web component is just a piece of the website's interactive element that can be a basic button or complex calendar field with a date selection menu. These components can be used for anything like username editing using the input text field or account birthday selection using the Calendar component. I will need these components for the project account page, where users can edit related information such as username or password and other user data.

Theme


I've used Bootstrap as a starting point for the website theme and combined it with the Prime React component library. Bootstrap is a collection of styles for HTML elements, and it has some functionality for interactive elements, but not a lot. On the other hand, the Prime React library has a lot of interactive components for almost any need. It also comes with a collection of free built-in themes, even something that looks like Bootstrap. I was not satisfied with any theme provided by the Prime React library, but luckily, they have the functionality to create your own. That is what I have done. I just adopted Bootstrap styles for Prime React components, but not for all of them, just for those I've required for now.

You can take a look at Bootstrap and Prime React here:

Admin Panel


Other components, such as a table with complex filters and grouping, will also be needed for the project's internal Admin Panel where I and other developers can control some aspects of the game, like banning some bad players or helping one with technical issues. Also, this panel can be used to view analytics or control project parameters when needed. So, I've adopted more components from the Prime React library for that as well.

Showcase


The image below shows some examples of the components I've adopted for my needs, with support of the Light and Dark theme. That is just a portion of the components I've done. There are many more, but I've decided to show something at least.

Showcase

Click to see full image.

Post Schedule


I'm still trying to figure out the best approach to blog posting. I've decided to post something that I've finished working on and when it's possible actually to show something. But still, we will see how it goes. Stay tuned.

Similar Topics


See All Posts
Virtunatia

Post info

  • Date:
  • Authors:
    • Vorobey's avatar image.
      VorobeyLead Developer
  • Topics:
  • Other:

We use essential cookies to make our site work. With your consent, we may also use non-essential cookies to improve user experience and analyze website traffic. By clicking “Accept,” you agree to our website's cookie use as described in our Cookie Policy.