Step 8 css modules

[mooneex]

Мы переиминовали наши css в modules.css и так же их импортировали

[mooneex]

[mooneex]

Header.jsx

import React from "react";
import s from './Header.module.css';

const Header = () => {
    return <header className={s.header}>
    <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/LEGO_logo.svg/512px-LEGO_logo.svg.png'></img>
    </header>

}

export default Header;

[mooneex]

Header.module.css

.header {
    grid-area: h;
    background-color: green;
}
.header img {
    width: 20px;
}

[mooneex]

Navbar.jsx

import React from "react";
import s from  './Navbar.module.css';
console.log (s);

const Navbar = () => {
    return <nav className={s.nav}>
    <div className={'${s.item} ${s.active}'}>
    <a>Profile</a>
    </div>
    <div className={s.item}>
    <a>Messages</a>
    </div>
    <div className={s.item}>
    <a>News</a>
    </div>
    <div className={s.item}>
    <a>Music</a>
    </div>
    <div className={s.item}>
    <a>Settings</a>
    </div>
</nav>
}

export default Navbar;

[mooneex]

Navbar.module.css

.nav {
    grid-area: n;
    background-color: greenyellow;
}

.item {
    color: white;
}

.item.active {
    color: gold;
}

[mooneex]

Profile.jsx

import React from "react";
import s from './Profile.module.css';

const Profile = () => {
    return <div className={s.profile}>
    <div>
    <img src='https://png.pngtree.com/thumb_back/fh260/background/20200714/pngtree-modern-double-color-futuristic-neon-background-image_351866.jpg'></img>
    </div>
    <div>
    ava + description
    </div>
    <div>
    My post
    <div>
    New Post
    </div>
    </div>
    <div className={s.posts}>
    <div className={s.item}>
    Post 1
    </div>
    <div className={s.item}>
    Post 2
    </div>
    </div>
</div>
}

export default Profile;

[mooneex]

Profile.module.css

.profile {
    grid-area: c;
    background-color: rgb(140, 202, 140);
}

.item {
    color:rgb(120, 120, 238);
}