Defining the WelcomeWindow layout
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass with a single-time purchase.
[00:00 - 00:11] Defining the welcome window layout. Go to accuracy, welcome window and update the layout. We're still gonna need to process the loading state and the state when we show the data.
[00:12 - 00:29] Instead of the fragment, return a panel where we'll render a text block, saying welcome to github manager. Next, below the text, if we're still loading, then we'll render another text block, saying loading.
[00:30 - 00:43] Otherwise, we'll render a fragment with two text blocks. One for the viewer name or username, name, data, viewer, name, and another one for the bio.
[00:44 - 00:57] Data viewer bio. Now let's add the proper styles to this layout. The panel should have height 12 lines, should be positioned in the center of the screen, and have 25% from the top.
[00:58 - 01:17] The loading text should have top margin 3 lines, same with the top text here, margin from the top 3, and the other text should have margin from the top 5 lines. Let's run the application. You should see the welcome window saying welcome to github manager, the name and the bio of the user.