Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,240 --> 00:00:06,210
So let's work on this button in the header
2
00:00:06,210 --> 00:00:09,190
and we could add all the JSX code in here.
3
00:00:09,190 --> 00:00:12,560
I will create a separate component for this, though.
4
00:00:12,560 --> 00:00:15,680
Again, you could do the same for the image here, by the way,
5
00:00:15,680 --> 00:00:17,630
but I will leave the image in here, actually,
6
00:00:17,630 --> 00:00:20,220
since that's not a lot of JSX code,
7
00:00:20,220 --> 00:00:22,670
but I will create a separate component
8
00:00:22,670 --> 00:00:25,000
for the HeaderCartButton.
9
00:00:26,690 --> 00:00:30,623
So, HeaderCartButton.js is my file name here.
10
00:00:31,530 --> 00:00:34,290
And we could create that component
11
00:00:34,290 --> 00:00:36,950
in the header JS file, as well,
12
00:00:36,950 --> 00:00:39,460
since we're only going to use it in that file
13
00:00:39,460 --> 00:00:43,330
but I wanna keep that file lean and not bloated,
14
00:00:43,330 --> 00:00:45,930
therefore, I will follow this common convention
15
00:00:45,930 --> 00:00:47,893
of creating a separate file.
16
00:00:48,870 --> 00:00:51,470
We will also need some styling and for this, attached,
17
00:00:51,470 --> 00:00:55,590
you find a HeaderCartButton.module.css file
18
00:00:55,590 --> 00:00:58,630
which you can simply copy into your layout folder
19
00:00:58,630 --> 00:01:01,383
and this includes some styles for this button.
20
00:01:02,450 --> 00:01:06,730
And then in the JS file for the HeaderCartButton
21
00:01:06,730 --> 00:01:10,480
I will add my HeaderCartButton function,
22
00:01:12,640 --> 00:01:15,113
my component function, which receives props.
23
00:01:16,390 --> 00:01:18,210
And, of course, also export it
24
00:01:21,060 --> 00:01:23,960
like this and then let's work on
25
00:01:23,960 --> 00:01:25,823
the JSX code for the button.
26
00:01:26,760 --> 00:01:29,500
For this, here, I wanna return a button, of course,
27
00:01:29,500 --> 00:01:31,450
and inside of that button
28
00:01:31,450 --> 00:01:36,200
I now wanna have an icon, then some text
29
00:01:36,200 --> 00:01:37,750
and then a little badge
30
00:01:37,750 --> 00:01:41,133
with the current number of items in the cart.
31
00:01:42,240 --> 00:01:45,220
Therefore, I will add three spans in there.
32
00:01:45,220 --> 00:01:48,470
The first one will wrap the icon, the second one the text
33
00:01:48,470 --> 00:01:49,883
and the third one the batch.
34
00:01:51,370 --> 00:01:54,130
And when it comes to this icon,
35
00:01:54,130 --> 00:01:57,940
I also got a finished component for you which you can use
36
00:01:57,940 --> 00:02:00,890
and that's the CartIcon JS file,
37
00:02:00,890 --> 00:02:03,200
which you could add to the layout folder
38
00:02:03,200 --> 00:02:06,720
because that's where we use it so this would make sense,
39
00:02:06,720 --> 00:02:09,030
but what you can also add to the cart folder
40
00:02:09,030 --> 00:02:12,183
because, of course, it is a icon specifically for the cart.
41
00:02:13,040 --> 00:02:15,170
And whilst in this application
42
00:02:15,170 --> 00:02:18,780
we will only use it in the HeaderCartButton.
43
00:02:18,780 --> 00:02:21,720
You could be using it in other parts of the app as well
44
00:02:21,720 --> 00:02:23,030
and therefore you might want to
45
00:02:23,030 --> 00:02:25,090
store it in the feature folder,
46
00:02:25,090 --> 00:02:28,390
in the cart folder instead of the layout folder,
47
00:02:28,390 --> 00:02:30,520
but that is totally up to you.
48
00:02:30,520 --> 00:02:33,740
Either way, this attached CartIcon JS file
49
00:02:33,740 --> 00:02:38,190
simply holds an SVG icon, and not much more,
50
00:02:38,190 --> 00:02:42,253
and you can use that to WellRender this CartIcon.
51
00:02:43,320 --> 00:02:47,830
So, therefore, here back in the HeaderCartButton JS file
52
00:02:47,830 --> 00:02:52,830
I simply wanna import CartIcon from going up one level
53
00:02:53,540 --> 00:02:56,290
Cart/CartIcon.
54
00:02:56,290 --> 00:02:58,760
So, I import it as a regular component
55
00:02:58,760 --> 00:03:02,513
because it is our regular functional component.
56
00:03:03,540 --> 00:03:08,060
And then, here in this span, I will add CartIcon like this,
57
00:03:09,090 --> 00:03:11,440
as a self-closing component.
58
00:03:11,440 --> 00:03:15,740
So, it's a regular React component even though it holds SVG
59
00:03:15,740 --> 00:03:17,990
because that is something you can do in React.
60
00:03:17,990 --> 00:03:22,173
You can use SVG code in your JSX code, as well.
61
00:03:24,030 --> 00:03:27,353
Now, in the second span I will have a text of Your Cart.
62
00:03:28,190 --> 00:03:30,970
And in the third span I wanna output
63
00:03:30,970 --> 00:03:35,110
the total amount of items in the cart.
64
00:03:35,110 --> 00:03:37,320
And, for the moment, we don't have the logic
65
00:03:37,320 --> 00:03:39,810
for accounting this yet so, therefore,
66
00:03:39,810 --> 00:03:41,970
here for the moment I will just hard-code it,
67
00:03:41,970 --> 00:03:44,333
let's say, free, as a dummy value.
68
00:03:45,520 --> 00:03:47,630
Now we will need some styles so, therefore,
69
00:03:47,630 --> 00:03:52,020
here I will import classes from the
70
00:03:52,020 --> 00:03:55,060
HeaderCartButton.module.css file
71
00:03:56,210 --> 00:04:01,180
and then on the button itself we can add a class
72
00:04:01,180 --> 00:04:05,003
which should be classes.button.
73
00:04:06,770 --> 00:04:08,910
Then, on that span with the icon
74
00:04:08,910 --> 00:04:12,610
I will add a class of classes.icon
75
00:04:12,610 --> 00:04:15,430
and, of course, these again, button, icon and so on.
76
00:04:15,430 --> 00:04:19,050
These, again, are just predefined CSS classes
77
00:04:19,050 --> 00:04:20,423
in that CSS file.
78
00:04:21,899 --> 00:04:25,403
And for the badge we, therefore, add classes.badge.
79
00:04:26,510 --> 00:04:29,620
If we do that, we can now use this HeaderCartButton
80
00:04:29,620 --> 00:04:31,680
in the header JS file.
81
00:04:31,680 --> 00:04:33,854
Here, I wanna replace this button with it
82
00:04:33,854 --> 00:04:38,854
so, therefore, I will simply import HeaderCartButton
83
00:04:39,880 --> 00:04:43,683
from "./HeaderCartButton"; like this.
84
00:04:45,080 --> 00:04:48,130
And then here, simply add HeaderCartButton.
85
00:04:50,220 --> 00:04:52,670
And now, if you save everything you should have a button
86
00:04:52,670 --> 00:04:55,000
that looks like this in your header.
87
00:04:55,000 --> 00:04:57,470
If it doesn't look like this, definitely download
88
00:04:57,470 --> 00:04:59,690
and compare my code snapshot
89
00:04:59,690 --> 00:05:02,923
because, well, this is all just JSX
90
00:05:02,923 --> 00:05:05,080
and CSS working together right now.
91
00:05:05,080 --> 00:05:07,653
So, you should definitely have a output like this.
92
00:05:08,520 --> 00:05:10,790
The button, of course, doesn't do anything yet
93
00:05:10,790 --> 00:05:14,030
but that is something we will add throughout this module.
94
00:05:14,030 --> 00:05:17,560
But for the moment we, therefore, are done with that header.
95
00:05:17,560 --> 00:05:20,630
We added this header, it's finished now
96
00:05:20,630 --> 00:05:24,103
and now we can work on the next parts of this application.
7755
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.