1
00:00:01,040 --> 00:00:04,750
In the last section we spoke about the little change that we're going to make to our application.

2
00:00:04,750 --> 00:00:07,250
So we're going to have to create a brand new component.

3
00:00:07,390 --> 00:00:12,190
Let's first create a new file inside of our project directory to house this new component and it will

4
00:00:12,190 --> 00:00:14,520
start thinking about how to put it together.

5
00:00:14,530 --> 00:00:14,820
All right.

6
00:00:14,840 --> 00:00:19,670
So going to flip back over to my code editor and I'm going to create a new folder in a new file inside

7
00:00:19,670 --> 00:00:25,230
of my SIRC directory and I'm going to give this thing the name approval card.

8
00:00:25,270 --> 00:00:33,780
J.S. Lexow that inside of your were once put together some boiler in this file that's going to become

9
00:00:33,780 --> 00:00:36,510
very very familiar over time at the top.

10
00:00:36,510 --> 00:00:45,180
We will import re-act from re-act and we will create our component approval card.

11
00:00:45,210 --> 00:00:47,250
This will be a functional component.

12
00:00:47,550 --> 00:00:53,010
And then at the bottom we're going to immediately put down that export default statement so that we

13
00:00:53,010 --> 00:00:57,920
can make use of this component in other locations inside of our project.

14
00:00:57,920 --> 00:01:02,210
All right so now we need to start thinking about the GSX that we're going to right inside of this approval

15
00:01:02,210 --> 00:01:03,530
card component.

16
00:01:03,590 --> 00:01:07,470
We're going to again borrow some styling from that semantic UI library.

17
00:01:07,610 --> 00:01:12,490
So I'm going to call it the semantic documentation and it look at some styling that we can borrow so

18
00:01:12,490 --> 00:01:15,370
that we don't have to worry about doing a bunch of CSSA ourselves.

19
00:01:16,710 --> 00:01:17,000
All right.

20
00:01:17,010 --> 00:01:23,820
So Mathie semantic Dasch UI dot com on page all through that my editor just you can see it very easily.

21
00:01:23,850 --> 00:01:24,820
Really quick.

22
00:01:24,840 --> 00:01:25,730
There it is right there.

23
00:01:27,680 --> 00:01:32,500
And on the left hand side you can scroll on down and under the View section find card.

24
00:01:32,670 --> 00:01:35,200
So I'm looking at the card section right here.

25
00:01:35,270 --> 00:01:36,810
I'm going to scroll down just a little bit.

26
00:01:38,530 --> 00:01:39,520
Little bit more.

27
00:01:39,520 --> 00:01:40,340
Here we go.

28
00:01:40,370 --> 00:01:45,850
You can see one section here marked as Kurts and it has a UI right here very similar to what we are

29
00:01:45,850 --> 00:01:52,040
trying to make some content on the top with this nice outline around the edge and then approve an declined

30
00:01:52,060 --> 00:01:53,590
button inside of it.

31
00:01:53,590 --> 00:01:54,880
So this is what we want to build.

32
00:01:54,880 --> 00:01:56,560
This is it right here.

33
00:01:56,560 --> 00:02:01,120
We can get a better idea of how to build this thing by clicking on this little code icon right here

34
00:02:01,630 --> 00:02:05,850
and it will show us some M L that is used to produce that element.

35
00:02:06,010 --> 00:02:08,530
And so you'll see that we've got a div with the class card.

36
00:02:08,560 --> 00:02:12,520
We've got some other different side of it and blah blah some other stuff.

37
00:02:12,520 --> 00:02:15,650
So it's basically the recipe of how we're going to create the card itself.

38
00:02:15,760 --> 00:02:19,680
But it doesn't really answer how we're going to get some custom content inside of here.

39
00:02:20,080 --> 00:02:24,850
Let's first just make the card with the buttons underneath it or on the bottom edge of it and then we'll

40
00:02:24,850 --> 00:02:29,090
start to worry about how we're going to sub in some custom content right there.

41
00:02:29,110 --> 00:02:29,400
All right.

42
00:02:29,410 --> 00:02:35,520
So I flip back over and then inside of my approval card component I'm going to put down a return statement.

43
00:02:35,710 --> 00:02:41,000
We're definitely going to have a lot of GSX sexier so I'm going to immediately place down a set of parentheses.

44
00:02:41,230 --> 00:02:44,550
And then inside there we'll put down a couple of different elements.

45
00:02:44,740 --> 00:02:46,130
I'll do a div with the class name.

46
00:02:46,160 --> 00:02:50,410
You buy a card and close off that div.

47
00:02:50,610 --> 00:02:54,210
I'll do a deal with the class name of content.

48
00:02:54,810 --> 00:02:56,300
Oh close off that div.

49
00:02:56,370 --> 00:02:58,220
This right here at this div that we just put together.

50
00:02:58,230 --> 00:03:00,750
That's where our ultimate content is going to go.

51
00:03:00,830 --> 00:03:06,570
So that's where the punnet detail component might end up at or some other custom content that we want

52
00:03:06,570 --> 00:03:09,210
to throw in there like some simple text like.

53
00:03:09,210 --> 00:03:10,640
Are you sure you want to continue.

54
00:03:10,940 --> 00:03:13,560
So just to kind of make sure that things are working out the way we expect.

55
00:03:13,560 --> 00:03:19,130
Let's put some hard coded text inside of your right now will say Are you sure it's something like that

56
00:03:19,140 --> 00:03:21,430
just to can get this working.

57
00:03:21,520 --> 00:03:28,280
After that I'll do another div with a class name of extra content and I'll close off that div.

58
00:03:29,600 --> 00:03:34,260
And then inside there will do another day with the class name of UI two buttons.

59
00:03:35,880 --> 00:03:36,950
Those are that one.

60
00:03:36,960 --> 00:03:39,200
And then we're going to put our two buttons in here.

61
00:03:39,210 --> 00:03:42,700
I'll say div with the class name of UI.

62
00:03:42,720 --> 00:03:48,560
Basic green button I'll give that the text approve

63
00:03:51,730 --> 00:03:56,260
and then underneath it I'll do another one with you my basic red button.

64
00:03:56,260 --> 00:04:02,320
Like so close off that div No I'll give it the text reject.

65
00:04:02,450 --> 00:04:07,170
All right now I notice that I've got a little discoloration right there which means I made a typo when

66
00:04:07,170 --> 00:04:12,060
I was putting this GSX together and it looks like I left off a closing bracket right there so I can

67
00:04:12,060 --> 00:04:13,400
make sure I get that in there.

68
00:04:13,530 --> 00:04:16,260
At this point I would encourage you to do a quick double check as well.

69
00:04:16,260 --> 00:04:19,440
Make sure you don't have any obvious typos inside that block of GSX.

70
00:04:19,440 --> 00:04:21,280
We just put together.

71
00:04:21,360 --> 00:04:21,630
All right.

72
00:04:21,630 --> 00:04:27,380
So now that we've got this component put together with some default content in here right now.

73
00:04:27,750 --> 00:04:31,560
Let's save this file and that will flip back over to the index start Jasc File.

74
00:04:31,560 --> 00:04:37,970
We're going to import the approval card and just show a single instance of it inside of the app component.

75
00:04:38,610 --> 00:04:42,180
Then we'll just make sure that this thing is showing up inside of our application and then we'll start

76
00:04:42,180 --> 00:04:47,460
to worry about getting some more custom content inside this div right here such as our actual comment

77
00:04:47,460 --> 00:04:48,920
detail component.

78
00:04:49,320 --> 00:04:55,580
So I'm going to flip back over to my index dodgiest file and then at the top I'll add another import

79
00:04:55,580 --> 00:05:03,830
statement or approval card and I'm going to import this from dot slash meaning current directory approval

80
00:05:04,550 --> 00:05:05,540
card like so

81
00:05:08,300 --> 00:05:13,390
then inside of my app component right underneath that existing div that we have.

82
00:05:13,410 --> 00:05:18,440
I'll just stick the approval card right in here so I'll say approval card like so.

83
00:05:20,260 --> 00:05:20,570
All right.

84
00:05:20,620 --> 00:05:24,330
I'll then save the file and we'll flip back over to the browser and see how this looks.

85
00:05:25,700 --> 00:05:26,910
All right there we go.

86
00:05:26,980 --> 00:05:31,400
Lebanon looks pretty good right now if I zoom all the way back out to the standard 100 percent it looks

87
00:05:31,400 --> 00:05:33,900
like a very typical card to see No.

88
00:05:33,900 --> 00:05:37,940
I usually run with my browsers zoomed in quite a bit so that you can see very easily what's showing

89
00:05:37,940 --> 00:05:39,650
up on my screen.

90
00:05:39,650 --> 00:05:41,150
So what we have here looks pretty good.

91
00:05:41,150 --> 00:05:42,300
Let's take a quick pause.

92
00:05:42,320 --> 00:05:46,340
When we come back the next section we're going to start to think about how we're going to somehow get

93
00:05:46,580 --> 00:05:51,200
our comment detail inside of here so quick pause and I'll see you in just a minute.