1 00:00:00,150 --> 00:00:00,540 Awesome. 2 00:00:00,750 --> 00:00:09,120 So now let's complete our job in full and as a result will be done with our job component and essentially, 3 00:00:09,130 --> 00:00:09,660 like I said. 4 00:00:10,590 --> 00:00:17,430 I just looked at it that I have three repeating things, meaning I want to pass in the icon on a text, 5 00:00:18,150 --> 00:00:21,420 even though, yes, we can hard code that in the job. 6 00:00:21,840 --> 00:00:27,960 And more specifically in the content center, I thought, you know, it kind of makes sense if we set 7 00:00:27,960 --> 00:00:31,830 up a separate component van and we just set up a little bit of logic. 8 00:00:31,920 --> 00:00:34,890 Meaning there's going to be, she says, coming in and all that. 9 00:00:35,220 --> 00:00:40,380 And then we're just passing the icon as well as the text as a problem. 10 00:00:40,800 --> 00:00:44,190 So let's navigate right now to the job info. 11 00:00:44,940 --> 00:00:48,420 And the first thing that we want to do is import these excess. 12 00:00:48,900 --> 00:00:49,920 So let's go here. 13 00:00:50,340 --> 00:00:55,200 So import, we're looking for a wrapper that is coming from the assets. 14 00:00:55,590 --> 00:00:56,950 More specifically, wrappers. 15 00:00:56,970 --> 00:00:59,900 And then I'm looking for the German phone. 16 00:01:00,370 --> 00:01:04,349 And then as far as the return on, let you go here with the wrapper. 17 00:01:04,860 --> 00:01:12,030 And like I said, there's going to be two things coming in as props, icon and text and then inside 18 00:01:12,030 --> 00:01:12,630 of the wrapper. 19 00:01:12,930 --> 00:01:17,130 Here's what I'm going to do when I go with span, I'll add a little bit of styling. 20 00:01:17,130 --> 00:01:20,680 I'll say here icon and then wonder why I wanted to play here. 21 00:01:20,700 --> 00:01:26,940 Well, the icon that is coming as a prop and we want to copy and paste and just change these powers 22 00:01:26,940 --> 00:01:27,180 around. 23 00:01:27,190 --> 00:01:30,510 So this is going to be text as well as this one. 24 00:01:31,020 --> 00:01:32,650 So let's save this one. 25 00:01:32,970 --> 00:01:34,590 And then back in the job one. 26 00:01:35,750 --> 00:01:38,870 We are importing already job info, correct? 27 00:01:39,260 --> 00:01:40,760 Where we have all the icons. 28 00:01:41,210 --> 00:01:45,080 So let's just get to the content center later. 29 00:01:45,680 --> 00:01:49,890 Effectively, where I have the comment and I'll set up that content center. 30 00:01:49,910 --> 00:01:56,350 So let me remove the comment and then I'm going to go with div the class of content and center. 31 00:01:56,870 --> 00:02:00,110 And then in here, let's go with our job info. 32 00:02:00,320 --> 00:02:02,270 We're looking for two things icon. 33 00:02:02,750 --> 00:02:08,660 And in this case, since we're passing in the component, we're going to go with the curlies and then 34 00:02:08,660 --> 00:02:10,009 we want to go with component. 35 00:02:10,310 --> 00:02:12,680 And the first one is going to be location one. 36 00:02:12,800 --> 00:02:17,030 So location arrow, then let's close the component. 37 00:02:17,030 --> 00:02:21,080 And then as far as the text, well will pass in the job location. 38 00:02:21,680 --> 00:02:26,210 So that's the prompt that we're getting from the job item. 39 00:02:26,750 --> 00:02:30,440 Then let's close the component, and now we're just want to set up two more. 40 00:02:30,950 --> 00:02:33,860 Of course, we'll have to change the value and we will do that in a second. 41 00:02:34,250 --> 00:02:37,370 And lastly, there's also going to be a status. 42 00:02:37,700 --> 00:02:44,750 So if you take a look at the complete application notice, the status one and notice also how the classes 43 00:02:44,750 --> 00:02:46,520 are different, meaning the styling. 44 00:02:47,480 --> 00:02:51,830 So, for example, for the interview, we have one color for depending on we have another one. 45 00:02:52,130 --> 00:02:56,600 And then if I say decline, then is going to be totally different color. 46 00:02:56,900 --> 00:03:02,120 So let me quickly edit that when to go here to interview and instead of interview, I'm going to go 47 00:03:02,120 --> 00:03:02,750 with declined. 48 00:03:03,170 --> 00:03:04,520 We want to submit this one. 49 00:03:04,930 --> 00:03:06,020 Our short here job, I'm. 50 00:03:06,620 --> 00:03:11,120 And then once I navigate back to all the jobs, this is going to be declined. 51 00:03:11,660 --> 00:03:18,560 And the way we'll do that, we'll just add class using the status value, and I'll showcase that in 52 00:03:18,560 --> 00:03:18,950 a second. 53 00:03:19,160 --> 00:03:21,140 So don't worry, we'll fix these values in a second. 54 00:03:21,530 --> 00:03:23,690 I just want to be done with the entire setup. 55 00:03:24,020 --> 00:03:28,400 And then we can always update the icons as well as what text we're passing in. 56 00:03:28,700 --> 00:03:32,540 So let's first go with a div and not as far as the classes. 57 00:03:32,540 --> 00:03:36,320 This is going to be dynamic and therefore I'm going to go with my college. 58 00:03:36,650 --> 00:03:40,190 And first, let's set up the template string, let's say, status. 59 00:03:40,520 --> 00:03:45,500 So that's the main class, which basically is going to set up the entire styling and then we're going 60 00:03:45,500 --> 00:03:47,120 to go with our interpolation. 61 00:03:47,660 --> 00:03:49,970 And here, let's pass in the status. 62 00:03:50,270 --> 00:03:53,360 So that's the problem, nor I'll showcase that in a second. 63 00:03:53,750 --> 00:03:59,090 And then inside of the div will actually want to display, well, what is the status? 64 00:03:59,510 --> 00:04:07,010 So let's save it over here and I'll change the icons as well as the text, and then I'll showcase how 65 00:04:07,010 --> 00:04:07,990 the system works. 66 00:04:08,000 --> 00:04:14,750 So first one is going to be the FAA location arrow, then the next one is the calendar one. 67 00:04:15,290 --> 00:04:19,040 So let me remove this one and we're looking for calendar. 68 00:04:19,970 --> 00:04:26,230 And as far as the tax matter that is going to be equal to a debate, basically our debt problem. 69 00:04:26,600 --> 00:04:29,870 And then the last one over here is going to be a briefcase. 70 00:04:30,140 --> 00:04:32,540 As always, you can set up whichever icon you want. 71 00:04:32,870 --> 00:04:34,490 So those are the ones that I went with. 72 00:04:34,910 --> 00:04:38,270 My next will be equal to the job type. 73 00:04:38,700 --> 00:04:43,010 Let's save it and before I showcase how everything looks in a browser. 74 00:04:43,960 --> 00:04:50,260 Let me just navigate to the wrappers and then more specifically, job and you'll see how the styling 75 00:04:50,260 --> 00:04:52,180 works here for two status one. 76 00:04:52,630 --> 00:04:56,320 So with regard to assets, wrappers and a job. 77 00:04:56,710 --> 00:04:58,530 So that's my style, a component. 78 00:04:58,540 --> 00:05:03,220 And then if we keep on rowing, eventually we'll see the status. 79 00:05:03,550 --> 00:05:05,170 So that is the main class. 80 00:05:05,350 --> 00:05:11,500 And if we want to have a specific class, for example, whether the job is pending interview or decline 81 00:05:11,860 --> 00:05:17,620 notice because basically I just change the background color as well as the color, and that since I'm 82 00:05:17,620 --> 00:05:20,740 adding that class after the status one. 83 00:05:21,080 --> 00:05:26,440 That's why, depending on that particular status, I also have different styling. 84 00:05:26,680 --> 00:05:31,480 So once I navigate back to the bigger browser window, this is what we should see now. 85 00:05:31,480 --> 00:05:34,990 As far as the job status, it looks like all of them are pending. 86 00:05:34,990 --> 00:05:36,870 So let's just change that went around. 87 00:05:36,890 --> 00:05:42,220 We're going to go with add job and let's go here again with intern, I guess. 88 00:05:42,370 --> 00:05:46,000 And as far as the company, I'm going to go with phrasebook this time. 89 00:05:46,510 --> 00:05:54,460 And then when it comes to business instead of depending on let's go with interior and let's submit and 90 00:05:54,460 --> 00:05:58,600 we can do the same thing right now with the client as well, just so we can double test everything. 91 00:05:59,050 --> 00:06:04,090 And as far as the position, again, I'll just say testing, I'll probably remove those values anywhere 92 00:06:04,570 --> 00:06:08,350 a mind when it comes to company and go with Twitter. 93 00:06:08,860 --> 00:06:10,210 Let's submit. 94 00:06:10,960 --> 00:06:16,390 And if I go to all jobs, not ours, not our own, we have the pending one. 95 00:06:16,690 --> 00:06:19,810 But I also have the interview as well as the decline. 96 00:06:20,380 --> 00:06:29,080 So this concludes the job component, and now we can start working on the edit and delete job functionality.