1
00:00:00,180 --> 00:00:06,390
Beautiful, and once we have the entire structure in place now, let's work on this that container,

2
00:00:07,020 --> 00:00:13,380
as far as the import will look for use of context because we want to grab the stats.

3
00:00:13,950 --> 00:00:16,590
So the object from the state.

4
00:00:16,830 --> 00:00:22,380
We also want to have that item because it read over and sense.

5
00:00:22,380 --> 00:00:29,100
In the cards, you can see the icons most important icons from react icons, more specifically font

6
00:00:29,100 --> 00:00:29,670
awesome one.

7
00:00:30,130 --> 00:00:32,159
And none since I have the styling.

8
00:00:32,850 --> 00:00:38,280
I also get the wrapper from the wrappers and where it starts container.

9
00:00:38,920 --> 00:00:45,780
And in this case, the set up is going to be following where I'll grab the stats from the global state,

10
00:00:46,350 --> 00:00:48,930
but there's going to be a default.

11
00:00:49,260 --> 00:00:50,130
That's all right.

12
00:00:50,250 --> 00:00:57,450
And before we continue, I mean, just say yes, of course you can set it up separately like we did

13
00:00:57,450 --> 00:01:04,620
with links, but I just went this route where I'll have them right here in the stats container.

14
00:01:05,160 --> 00:01:09,870
And effectively the only thing that is going to be dynamic is the count.

15
00:01:10,680 --> 00:01:17,070
So notice here, I'm looking for the stats, the global variable, and I'm looking for the properties

16
00:01:17,070 --> 00:01:19,440
where they're spending, whether that's interview.

17
00:01:19,830 --> 00:01:26,880
And yes, as a precaution, I just out of the or operator where I'll say, if it doesn't exist, which

18
00:01:26,880 --> 00:01:31,930
I mean it should exist because we're sending it from the server as default, right?

19
00:01:31,950 --> 00:01:38,010
So this is an extra precaution when I say, if it doesn't exist, let's add a zero.

20
00:01:38,460 --> 00:01:40,800
And and here we have some kind of title.

21
00:01:40,950 --> 00:01:47,250
I have the icon that I'm using and I also have color and background color, because if you take a look

22
00:01:47,250 --> 00:01:54,600
at the complete application, you'll notice that I'm using here different colors for each of the cards.

23
00:01:55,000 --> 00:02:01,690
And this is going to be the case where I'll showcase how we would do that using the style, the component.

24
00:02:01,710 --> 00:02:04,920
So this is going to be a little bit different than a single job.

25
00:02:05,130 --> 00:02:10,710
Remember when we were setting up the interview showcase quickly that so all the jobs remember when we

26
00:02:10,710 --> 00:02:16,590
were setting this one up, we use the straight up access, meaning we added the class.

27
00:02:17,310 --> 00:02:22,740
Now, in this case, it's going to be a little bit different where you set up the styling using the

28
00:02:22,740 --> 00:02:23,760
styled component.

29
00:02:24,300 --> 00:02:31,680
And this is going to be the only component where I'll copy and paste the most of the stuff because I

30
00:02:31,680 --> 00:02:36,240
really don't see the point of recapping this from scratch as well as the imports.

31
00:02:36,690 --> 00:02:40,920
So let's start over here and don't worry, we're not going to be copying.

32
00:02:40,920 --> 00:02:47,820
Pasting for rest of the project is just I really don't see the point of tapping on this default start.

33
00:02:47,850 --> 00:02:48,180
All right.

34
00:02:48,630 --> 00:02:53,400
So let's go with Stout's container and we already have the status item.

35
00:02:53,910 --> 00:03:00,360
So just overwrite that one and then let's grab the stats from the global one.

36
00:03:00,930 --> 00:03:01,550
So let's go.

37
00:03:01,560 --> 00:03:03,470
It used context.

38
00:03:03,480 --> 00:03:07,230
Let's invoke it, and let's set up that default.

39
00:03:07,260 --> 00:03:07,590
All right.

40
00:03:07,830 --> 00:03:16,110
So our default start, let's copy and paste this one over here, and I'm going to go over the properties

41
00:03:16,110 --> 00:03:16,800
one more time.

42
00:03:17,710 --> 00:03:25,480
So by the way, this is not state should be state where for defending what's going to be the battle.

43
00:03:26,530 --> 00:03:30,280
We're going to look for the stats value depending on if it's not been zero.

44
00:03:30,590 --> 00:03:32,410
And that's the icon that I'm using.

45
00:03:32,710 --> 00:03:39,220
So if you want to go with a different icon or different colors, I mean, just change those values and

46
00:03:39,220 --> 00:03:40,060
you'll be good to go.

47
00:03:40,360 --> 00:03:44,520
Same goes for interiors, as well as the jobs of the.

48
00:03:45,220 --> 00:03:52,840
Now, as far as the return, we'll iterate over our default stats and then for each item, we return

49
00:03:53,170 --> 00:03:54,190
the stats item.

50
00:03:54,670 --> 00:03:58,130
So first, let's change there to a wrapper.

51
00:03:58,690 --> 00:04:03,070
That's where we'll add the styles for the actual container.

52
00:04:03,460 --> 00:04:06,610
And then let's go with our default stats map.

53
00:04:06,910 --> 00:04:10,120
That's iterate over a nine for each item.

54
00:04:10,130 --> 00:04:11,260
We want to grab two things.

55
00:04:11,270 --> 00:04:18,930
I want to grab all the properties that are here in the item, and that's why I'll spread it out on that

56
00:04:18,940 --> 00:04:19,209
item.

57
00:04:19,420 --> 00:04:21,040
And I also want to get the index.

58
00:04:21,459 --> 00:04:26,830
And like I said, it will return a start item the component.

59
00:04:26,830 --> 00:04:32,410
And then remember, if we have a list, we need to pass in the key, say here index and I'll spread

60
00:04:32,410 --> 00:04:36,310
out all of the properties, say or hear the item.

61
00:04:37,270 --> 00:04:38,050
I want to close it.

62
00:04:38,500 --> 00:04:39,700
Let's say that one.

63
00:04:39,970 --> 00:04:44,290
And once we navigate to the browser, it looks like I have a bag over here.

64
00:04:44,290 --> 00:04:48,160
So when I was grading the project, I went with that item.

65
00:04:48,460 --> 00:04:53,500
And then when I was setting up the component, I actually went with that one.

66
00:04:53,920 --> 00:04:58,390
So you know what I think is going to be faster if I just rename this one?

67
00:04:58,900 --> 00:05:02,320
So let me take a look at rename option here.

68
00:05:02,590 --> 00:05:06,310
And instead of stats, I'm going to look for that item.

69
00:05:06,310 --> 00:05:12,520
And now the read me is going to be correct as well as my file restarts container one.

70
00:05:12,550 --> 00:05:14,950
So let me navigate back to the browser.

71
00:05:15,370 --> 00:05:21,250
And what we should see in the screen is three cards in which at the moment just have the adding one.

72
00:05:21,490 --> 00:05:24,330
And now in next video, we'll set up the actual card.