1
00:00:00,180 --> 00:00:00,480
All right.

2
00:00:00,810 --> 00:00:06,689
ANNOUNCER up the structure for our bottom container, so there's going to be a button and exit button.

3
00:00:06,900 --> 00:00:08,970
Both of them will have tiny icons.

4
00:00:09,450 --> 00:00:14,190
And also for every page that we have will display a button.

5
00:00:14,280 --> 00:00:17,070
And yes, of course, this will be dynamic.

6
00:00:17,640 --> 00:00:21,230
So if we have seven pages, then we'll display seven buttons.

7
00:00:21,240 --> 00:00:23,850
If we have to, then we'll display do.

8
00:00:24,330 --> 00:00:31,800
And the setup is going to look something like this where we'll look for use app context because we want

9
00:00:31,800 --> 00:00:37,620
to grab number of pages as well as the page because we'll display which one is the active page.

10
00:00:38,100 --> 00:00:43,560
Also get the icons from React icons and then more specifically, a library.

11
00:00:44,190 --> 00:00:49,830
Also, there is going to be a styling, so look for wrapper on my page button the container.

12
00:00:50,400 --> 00:00:57,450
When we want to set up Prerna next page for time being, she's going to be a console.log so functional

13
00:00:57,890 --> 00:00:58,290
later.

14
00:00:58,650 --> 00:01:02,130
And then when it comes to return, is going to be one button.

15
00:01:02,460 --> 00:01:08,040
The preview one first and then we'll have our button container, which at the moment will just have

16
00:01:08,040 --> 00:01:14,220
buttons, text inside of it and then we'll set up the second button not is going to be the next one.

17
00:01:14,670 --> 00:01:16,140
So let's start working on that.

18
00:01:16,710 --> 00:01:22,080
I guess first we grab all the imports just so we can speed this up a little bit.

19
00:01:22,770 --> 00:01:24,300
So page button container.

20
00:01:25,330 --> 00:01:27,130
We grab all of them over here.

21
00:01:27,750 --> 00:01:27,990
On.

22
00:01:28,330 --> 00:01:34,000
Let's start by grabbing number of pages and page, and eventually there's going to be one more function

23
00:01:34,360 --> 00:01:36,640
in the app context that will pass in as well.

24
00:01:36,650 --> 00:01:44,130
But for the time being, let's just grab number of pages comma page and that is coming from huge app

25
00:01:44,200 --> 00:01:44,980
in that context.

26
00:01:45,280 --> 00:01:46,030
Let's say that one.

27
00:01:46,870 --> 00:01:50,080
Now let's set up the placeholders for PREVE and next.

28
00:01:50,500 --> 00:02:00,040
So let's go here with Gonzales and next page for time being largest console log and just say log and

29
00:02:00,040 --> 00:02:01,810
we'll go next page.

30
00:02:02,050 --> 00:02:03,460
So copy and paste this one.

31
00:02:03,910 --> 00:02:06,640
And let's just add here preve.

32
00:02:07,680 --> 00:02:15,450
So it's a reprieve now it comes to return, let's use the wrapper and then let's set up the button,

33
00:02:15,450 --> 00:02:19,140
contain our gas first and then before and after we'll set up those buttons.

34
00:02:19,140 --> 00:02:25,530
So there's going to be a Class B, the container side of it, let's just say buttons.

35
00:02:25,860 --> 00:02:34,320
And then above it, let's set up the button with the class of pre one class, and it will be equal to

36
00:02:34,320 --> 00:02:37,650
a preve hyphen between that on click.

37
00:02:38,430 --> 00:02:41,850
Let's go with that preve and page.

38
00:02:42,510 --> 00:02:45,990
That's the place, although we have a mining side of it.

39
00:02:46,410 --> 00:02:49,050
Let's go first with our icon.

40
00:02:49,800 --> 00:02:52,620
So in this case, I'm looking for double left.

41
00:02:53,490 --> 00:03:00,690
So this one over here, let's close that one, and then let's say preve, I think I'm just going to

42
00:03:00,690 --> 00:03:03,810
copy and paste just to make it faster.

43
00:03:03,820 --> 00:03:07,740
So copy and paste, this one will be equal to a next one.

44
00:03:08,100 --> 00:03:14,580
And we're looking for the right over here, and I need to make sure that I spell that correctly.

45
00:03:14,910 --> 00:03:19,380
And then as far as the functionality will be equal to the next page.

46
00:03:20,220 --> 00:03:24,210
So now let's navigate to the browser, and what we should see here is preve.

47
00:03:24,510 --> 00:03:27,870
And next on us, and it looks like a doozy here.

48
00:03:28,350 --> 00:03:30,090
So let's go here with next.

49
00:03:30,390 --> 00:03:37,740
Now I also need to move this next text a little bit up just so I have the icon right after the next.

50
00:03:38,100 --> 00:03:45,510
And with this in place now, we want to set up the buttons so the buttons that represent each and every

51
00:03:45,510 --> 00:03:45,930
page.