1
00:00:00,000 --> 00:00:03,000
Now, I mentioned that I also wanted

2
00:00:03,000 --> 00:00:06,000
to outsource this header background here

3
00:00:06,000 --> 00:00:10,000
into a separate component, and that's what I'll do next.

4
00:00:10,000 --> 00:00:12,000
For that, in that components folder,

5
00:00:12,000 --> 00:00:13,000
I'll add my

6
00:00:13,000 --> 00:00:18,000
main-header-background.js file,

7
00:00:21,000 --> 00:00:23,000
and in there, export a component

8
00:00:23,000 --> 00:00:27,000
that's named MainHeaderBackground, like this.

9
00:00:29,000 --> 00:00:32,000
And now I'll simply grab this div here

10
00:00:33,000 --> 00:00:35,000
from the root layout

11
00:00:36,000 --> 00:00:40,000
and return that here in that MainHeaderBackground component.

12
00:00:42,000 --> 00:00:47,000
As a little bonus, we can now also extract that CSS class,

13
00:00:47,000 --> 00:00:50,000
which is set up in that globals CSS file,

14
00:00:50,000 --> 00:00:53,000
and put it into a CSS modules file

15
00:00:53,000 --> 00:00:56,000
so that we practice working with that again as well.

16
00:00:57,000 --> 00:00:58,000
So, I'll add another file

17
00:00:58,000 --> 00:01:01,000
next to this main-header-background.js file,

18
00:01:01,000 --> 00:01:05,000
and I'll name it main-header-background.module.css.

19
00:01:07,000 --> 00:01:10,000
And now we should grab this header background class

20
00:01:10,000 --> 00:01:15,000
and this SVG selector here from the globals CSS file,

21
00:01:15,000 --> 00:01:17,000
and cut it from there.

22
00:01:18,000 --> 00:01:19,000
And instead add it here

23
00:01:19,000 --> 00:01:22,000
to this main-header-background.module.css file.

24
00:01:23,000 --> 00:01:27,000
You should now also tweak that SVG selector

25
00:01:27,000 --> 00:01:30,000
and actually select SVGs inside of a element

26
00:01:30,000 --> 00:01:32,000
with header-background as a class.

27
00:01:32,000 --> 00:01:35,000
Otherwise, this won't work with CSS modules.

28
00:01:38,000 --> 00:01:38,000
With that done,

29
00:01:38,000 --> 00:01:42,000
back in the main-header-background-component file,

30
00:01:42,000 --> 00:01:44,000
we should import classes

31
00:01:44,000 --> 00:01:49,000
from ./main-header-background.module.css like this,

32
00:01:50,000 --> 00:01:53,000
and replace this here, this class name,

33
00:01:53,000 --> 00:01:58,000
with classes, and then the class name here

34
00:01:58,000 --> 00:02:00,000
is header-background.

35
00:02:01,000 --> 00:02:03,000
Now, that's a invalid JavaScript property name

36
00:02:03,000 --> 00:02:05,000
if used like this,

37
00:02:05,000 --> 00:02:08,000
and therefore I'll use that square bracket notation

38
00:02:08,000 --> 00:02:10,000
and access the property value like this.

39
00:02:12,000 --> 00:02:16,000
With that, we can save this and go back to layout.js

40
00:02:16,000 --> 00:02:20,000
and then also output the MainHeaderBackground here,

41
00:02:21,000 --> 00:02:23,000
or since it, as the name suggests,

42
00:02:23,000 --> 00:02:25,000
belongs to the MainHeader,

43
00:02:25,000 --> 00:02:27,000
we can actually not do that,

44
00:02:27,000 --> 00:02:29,000
get rid of the import and the usage

45
00:02:29,000 --> 00:02:31,000
in the root layout.js file,

46
00:02:31,000 --> 00:02:34,000
and instead use it here in main-header.js.

47
00:02:35,000 --> 00:02:38,000
There we could return a fragment

48
00:02:38,000 --> 00:02:41,000
so that we can add a sibling element next to the header,

49
00:02:41,000 --> 00:02:43,000
and that sibling is now that MainHeaderBackground,

50
00:02:45,000 --> 00:02:46,000
which I guess makes a lot of sense

51
00:02:46,000 --> 00:02:48,000
if we look at it like this.

52
00:02:53,000 --> 00:02:55,000
And with that, if we save everything,

53
00:02:55,000 --> 00:02:57,000
we got the same result as before.

54
00:02:57,000 --> 00:03:01,000
But now using another extra component,

55
00:03:01,000 --> 00:03:02,000
which you of course don't have to do,

56
00:03:02,000 --> 00:03:06,000
but which I did want to add here for practice purposes.

57
00:03:06,000 --> 00:03:11,000
Now, I also wanna group all these main-header related files

58
00:03:11,000 --> 00:03:15,000
together into a separate subfolder inside of components

59
00:03:15,000 --> 00:03:18,000
so that we keep that components folder manageable

60
00:03:18,000 --> 00:03:20,000
and easy to navigate.

61
00:03:20,000 --> 00:03:23,000
And hence, I'll add a main-header folder

62
00:03:23,000 --> 00:03:25,000
in that components folder,

63
00:03:25,000 --> 00:03:27,000
and move all these main-header related files

64
00:03:27,000 --> 00:03:29,000
into that main-header subfolder

65
00:03:29,000 --> 00:03:31,000
inside of that components folder.

66
00:03:33,000 --> 00:03:35,000
With that, you then just have to make sure

67
00:03:35,000 --> 00:03:37,000
that in the root layout.js file,

68
00:03:37,000 --> 00:03:40,000
this import path here is updated,

69
00:03:40,000 --> 00:03:43,000
which in my case, my IDE did for me.

70
00:03:43,000 --> 00:03:46,000
And with that, the page still works as before.