Netflix Clone với ReactJS, Styled Components và Firebase (Firestore & Auth) - Phần 3

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

[*]
end_of_line = lf
indent_style = tab
indent_size = 4

"lint": "eslint --ext src/**/*.js,*.jsx,*.ts,*.tsx",
"lint:fix": "eslint --fix --ext src/**/*.js,*.jsx,*.ts,*.tsx",
"prettier": "prettier --check \"src/**/(*.tsx|*.ts|*.jsx|*.js|*.scss|*.css)\"",
"prettier:fix": "prettier --write \"src/**/(*.tsx|*.ts|*.jsx|*.js|*.scss|*.css)\""

{
  "arrowParens": "always",
  "semi": true,
  "trailingComma": "none",
  "endOfLine": "lf",
  "tabWidth": 4,
  "useTabs": true
}

.cache
package-lock.json

{
  "extends": ["react-app", "prettier"],
  "plugins": ["react", "prettier"],
  "rules": {
    "prettier/prettier": [
      "warn",
      {
        "arrowParens": "always",
        "semi": true,
        "trailingComma": "none",a
        "endOfLine": "lf",
        "tabWidth": 4,
        "useTabs": true
      }
    ],
    "no-console": "warn"
  }
}

/src/serviceWorker.js
/src/setupTests.js.js

import Story from "./story/index";

export { Story };

import React from "react";
import { Story } from "../components/index";
import storiesData from "../fixtures/stories.json";

export default function StoryContainer() {
	return (
		<Story.Container>
			{storiesData.map((story) => (
				<Story key={story.id} direction={story.direction}>
					<Story.BlockPane>
						<Story.Title>{story.title}</Story.Title>
						<Story.SubTitle>{story.subTitle}</Story.SubTitle>
					</Story.BlockPane>
					{story.image ? (
						<Story.BlockPane>
							<Story.Image
								src={story.image}
								alt={story.alt}
							></Story.Image>
						</Story.BlockPane>
					) : (
						""
					)}
				</Story>
			))}
		</Story.Container>
	);
}

import React from "react";
import StoryContainer from "./containers/storyContainer";

export default function App() {
	return <StoryContainer />;
}

import styled from "styled-components/macro";

export const Container = styled.div`
	display: flex;
	flex-direction: column;
	margin: auto;
	padding: 70px 45px;
	max-width: 1000px;

	@media screen and (max-width: 1000px) {
		padding: 70px 30px;
	}
`;

export const Wrapper = styled.div`
	display: inline-block;
	position: relative;
	margin-bottom: 1rem;
`;

export const Column = styled.div`
	display: flex;
	flex-direction: column;
	text-align: left;
`;

export const Row = styled.div`
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	grid-gap: 15px;

	@media screen and (max-width: 1000px) {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}
`;

export const Link = styled.a`
	color: #757575;
	margin-bottom: 20px;
	font-size: 13px;
	text-decoration: none;
	&:hover {
		text-decoration: underline;
	}
`;

export const Title = styled.p`
	font-size: 16px;
	color: #757575;
	margin-bottom: 40px;
	cursor: pointer;
	&:hover {
		text-decoration: underline;
	}
`;

export const Text = styled.p`
	font-size: 13px;
	color: #757575;
	margin-bottom: 40px;
`;

export const Break = styled.div`
	flex-basis: 100%;
	height: 0;
`;

export const SelectWrap = styled.div`
	position: relative;
	display: inline-block;
	width: 100%;
	&::before {
		content: "\f0ac";
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		position: absolute;
		top: 15px;
		left: 15px;
		color: #999;
		font-size: 16px;
		pointer-events: none;
	}
`;

export const Select = styled.select`
	text-indent: 0;
	line-height: 1.7;
	background-color: #000;
	background-image: none;
	border: 1px solid #333;
	color: #999;
	font-size: 16px;
	padding: 12px 26px 12px 45px;
	border-radius: 2px;
`;
export const Option = styled.option``;

import React from "react";
import {
	Column,
	Container,
	Row,
	Link,
	Title,
	Text,
	Break,
	Select,
	Option,
	Wrapper,
	SelectWrap
} from "./styles/footer";

export default function Footer({ children, ...restProps }) {
	return <Container {...restProps}>{children}</Container>;
}

Footer.Wrapper = function FooterWrapper({ children, ...restProps }) {
	return <Wrapper {...restProps}>{children}</Wrapper>;
};

Footer.Row = function FooterRow({ children, ...restProps }) {
	return <Row {...restProps}>{children}</Row>;
};

Footer.Column = function FooterColumn({ children, ...restProps }) {
	return <Column {...restProps}>{children}</Column>;
};

Footer.Link = function FooterLink({ children, ...restProps }) {
	return <Link {...restProps}>{children}</Link>;
};

Footer.Title = function FooterTitle({ children, ...restProps }) {
	return <Title {...restProps}>{children}</Title>;
};

Footer.Text = function FooterText({ children, ...restProps }) {
	return <Text {...restProps}>{children}</Text>;
};

Footer.Break = function FooterBreak({ children, ...restProps }) {
	return <Break {...restProps}>{children}</Break>;
};

Footer.SelectWrap = function FooterSelectWrap({ children, ...restProps }) {
	return <SelectWrap {...restProps}>{children}</SelectWrap>;
};

Footer.Select = function FooterSelect({ children, ...restProps }) {
	return <Select {...restProps}>{children}</Select>;
};

Footer.Option = function FooterOption({ children, ...restProps }) {
	return <Option {...restProps}>{children}</Option>;
};

import { React } from "react";
import { Footer } from "../components/index";

export default function FooterContainer() {
	return (
		<Footer>
			<Footer.Title>Questions? Contact us.</Footer.Title>
			<Footer.Break />
			<Footer.Row>
				<Footer.Column>
					<Footer.Link href="#">FAQ</Footer.Link>
					<Footer.Link href="#">Investor Relations</Footer.Link>
					<Footer.Link href="#">Privacy</Footer.Link>
					<Footer.Link href="#">Speed Test</Footer.Link>
				</Footer.Column>
				<Footer.Column>
					<Footer.Link href="#">Help Center</Footer.Link>
					<Footer.Link href="#">Jobs</Footer.Link>
					<Footer.Link href="#">Cookie Preferences</Footer.Link>
					<Footer.Link href="#">Legal Notices</Footer.Link>
				</Footer.Column>
				<Footer.Column>
					<Footer.Link href="#">Account</Footer.Link>
					<Footer.Link href="#">Ways to Watch</Footer.Link>
					<Footer.Link href="#">Corporate Information</Footer.Link>
					<Footer.Link href="#">Only on Netflix</Footer.Link>
				</Footer.Column>
				<Footer.Column>
					<Footer.Link href="#">Media Center</Footer.Link>
					<Footer.Link href="#">Terms of Use</Footer.Link>
					<Footer.Link href="#">Contact Us</Footer.Link>
				</Footer.Column>
			</Footer.Row>
			<Footer.Break />
			<Footer.Wrapper>
				<Footer.SelectWrap>
					<Footer.Select defaultValue="/vn-en/">
						<Footer.Option value="/vn-en/">English</Footer.Option>
						<Footer.Option value="/vn/">Vietnamese</Footer.Option>
					</Footer.Select>
				</Footer.SelectWrap>
			</Footer.Wrapper>
			<Footer.Break />
			<Footer.Text>Netflix Vietnam</Footer.Text>
		</Footer>
	);
}