├── .prettierrc ├── src ├── components │ ├── Hero │ │ ├── index.js │ │ ├── Hero.jsx │ │ └── Hero.module.scss │ ├── App │ │ ├── index.js │ │ └── App.jsx │ ├── Button │ │ ├── index.js │ │ ├── Button.jsx │ │ └── Button.module.scss │ ├── Form │ │ ├── index.js │ │ ├── Form.module.scss │ │ └── Form.jsx │ ├── Footer │ │ ├── index.js │ │ ├── Footer.jsx │ │ ├── Footer.module.scss │ │ └── data.js │ ├── Header │ │ ├── index.js │ │ ├── Menu.jsx │ │ ├── Header.module.scss │ │ ├── Menu.module.scss │ │ └── Header.jsx │ ├── Modal │ │ ├── index.js │ │ ├── Modal.module.scss │ │ └── Modal.jsx │ ├── Features │ │ ├── index.js │ │ ├── Features.jsx │ │ ├── data.js │ │ └── Features.module.scss │ ├── Shortens │ │ ├── index.js │ │ ├── Shortens.jsx │ │ └── Shortens.module.scss │ ├── CallToAction │ │ ├── index.js │ │ ├── CallToAction.jsx │ │ └── CallToAction.module.scss │ └── SignUp │ │ ├── index.js │ │ ├── Form.module.scss │ │ ├── Login.jsx │ │ ├── SignUp.jsx │ │ └── Form.jsx ├── config.js ├── images │ ├── favicon-32x32.png │ ├── bg-shorten-mobile.svg │ ├── icon-facebook.svg │ ├── icon-twitter.svg │ ├── bg-shorten-desktop.svg │ ├── bg-boost-mobile.svg │ ├── icon-pinterest.svg │ ├── icon-instagram.svg │ ├── icon-detailed-records.svg │ ├── bg-boost-desktop.svg │ ├── icon-brand-recognition.svg │ ├── icon-fully-customizable.svg │ ├── logo.svg │ └── illustration-working.svg ├── index.js ├── store │ ├── index.js │ └── slice │ │ └── linkSlice.js └── index.css ├── public ├── robots.txt ├── favicon.ico ├── logo192.png ├── logo512.png ├── manifest.json └── index.html ├── README.md ├── .gitignore ├── rsbuild.config.ts ├── package.json └── yarn.lock /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true 3 | } 4 | -------------------------------------------------------------------------------- /src/components/Hero/index.js: -------------------------------------------------------------------------------- 1 | export * from './Hero'; -------------------------------------------------------------------------------- /src/components/App/index.js: -------------------------------------------------------------------------------- 1 | export * from './App'; 2 | -------------------------------------------------------------------------------- /src/components/Button/index.js: -------------------------------------------------------------------------------- 1 | export * from './Button'; -------------------------------------------------------------------------------- /src/components/Form/index.js: -------------------------------------------------------------------------------- 1 | export * from './Form'; 2 | -------------------------------------------------------------------------------- /src/components/Footer/index.js: -------------------------------------------------------------------------------- 1 | export * from './Footer'; 2 | -------------------------------------------------------------------------------- /src/components/Header/index.js: -------------------------------------------------------------------------------- 1 | export * from './Header'; 2 | -------------------------------------------------------------------------------- /src/components/Modal/index.js: -------------------------------------------------------------------------------- 1 | export * from './Modal'; 2 | -------------------------------------------------------------------------------- /src/components/Features/index.js: -------------------------------------------------------------------------------- 1 | export * from './Features'; 2 | -------------------------------------------------------------------------------- /src/components/Shortens/index.js: -------------------------------------------------------------------------------- 1 | export * from './Shortens'; 2 | -------------------------------------------------------------------------------- /src/components/CallToAction/index.js: -------------------------------------------------------------------------------- 1 | export * from './CallToAction'; 2 | -------------------------------------------------------------------------------- /src/config.js: -------------------------------------------------------------------------------- 1 | export const API_BASE_URL = 'https://api.shrtco.de/v2/shorten?url='; 2 | -------------------------------------------------------------------------------- /src/components/SignUp/index.js: -------------------------------------------------------------------------------- 1 | export * from './SignUp'; 2 | export * from './Login'; 3 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michey85/shortne-project-youtube-version/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michey85/shortne-project-youtube-version/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michey85/shortne-project-youtube-version/HEAD/public/logo512.png -------------------------------------------------------------------------------- /src/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/michey85/shortne-project-youtube-version/HEAD/src/images/favicon-32x32.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Frontend Mentor - Shortly URL shortening API Challenge solution 2 | 3 | Вариант решения задачки [Shortly URL shortening API Challenge challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/url-shortening-api-landing-page-2ce3ob-G). Версия для видео с YouTube-канала Михаила Непомнящего. 4 | -------------------------------------------------------------------------------- /src/components/SignUp/Form.module.scss: -------------------------------------------------------------------------------- 1 | .form { 2 | display: flex; 3 | flex-direction: column; 4 | 5 | input { 6 | margin-bottom: 0.75rem; 7 | border-radius: var(--radii); 8 | padding: 0.5rem 1rem; 9 | border: 1px solid var(--gray-100); 10 | } 11 | } -------------------------------------------------------------------------------- /src/components/SignUp/Login.jsx: -------------------------------------------------------------------------------- 1 | import {Form} from './Form'; 2 | 3 | export const Login = ({closeModal}) => { 4 | 5 | const handleLogin = (email, pass) => { 6 | closeModal(); 7 | } 8 | 9 | return ( 10 |
14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /src/components/SignUp/SignUp.jsx: -------------------------------------------------------------------------------- 1 | import {Form} from './Form'; 2 | 3 | export const SignUp = ({closeModal}) => { 4 | 5 | const handleRegister = (email, pass) => { 6 | closeModal(); 7 | } 8 | 9 | return ( 10 | 14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /src/images/bg-shorten-mobile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/CallToAction/CallToAction.jsx: -------------------------------------------------------------------------------- 1 | import classes from './CallToAction.module.scss'; 2 | 3 | import { Button } from '../Button'; 4 | 5 | const CallToAction = () => { 6 | return ( 7 |
8 |

Boost your links today

9 | 10 |
11 | ); 12 | }; 13 | 14 | export { CallToAction }; 15 | -------------------------------------------------------------------------------- /src/images/icon-facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | 26 | design 27 | style-guide.md 28 | -------------------------------------------------------------------------------- /rsbuild.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from '@rsbuild/core'; 2 | import { pluginReact } from '@rsbuild/plugin-react'; 3 | import { pluginSass } from '@rsbuild/plugin-sass'; 4 | import { pluginSvgr } from '@rsbuild/plugin-svgr'; 5 | 6 | export default defineConfig({ 7 | plugins: [pluginReact(), pluginSass(), pluginSvgr({ mixedImport: true })], 8 | html: { 9 | template: './public/index.html', 10 | }, 11 | output: { 12 | distPath: { 13 | root: 'build', 14 | }, 15 | }, 16 | }); 17 | -------------------------------------------------------------------------------- /src/images/icon-twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/CallToAction/CallToAction.module.scss: -------------------------------------------------------------------------------- 1 | .CallToAction { 2 | background-image: url('../../images/bg-boost-mobile.svg'); 3 | background-color: var(--primary-600); 4 | background-size: cover; 5 | background-position: center; 6 | padding: 4rem 0; 7 | 8 | color: white; 9 | 10 | text-align: center; 11 | 12 | h2 { 13 | margin-top: 0; 14 | } 15 | 16 | @media (min-width: 1024px) { 17 | padding: 3rem 0; 18 | background-image: url('../../images/bg-boost-desktop.svg'); 19 | } 20 | } -------------------------------------------------------------------------------- /src/components/Button/Button.jsx: -------------------------------------------------------------------------------- 1 | import cn from 'classnames'; 2 | import classes from './Button.module.scss'; 3 | 4 | export const Button = ({onClick, variant = '', size = 'medium', type = 'button', children}) => { 5 | const mainCn = cn( 6 | classes.button, 7 | classes[size], 8 | classes[variant], 9 | ); 10 | 11 | return ( 12 | 19 | ) 20 | } 21 | -------------------------------------------------------------------------------- /src/components/App/App.jsx: -------------------------------------------------------------------------------- 1 | import { CallToAction } from '../CallToAction'; 2 | import { Features } from '../Features'; 3 | import { Footer } from '../Footer'; 4 | import { Form } from '../Form'; 5 | import { Header } from '../Header'; 6 | import { Hero } from '../Hero'; 7 | import { Shortens } from '../Shortens'; 8 | 9 | function App() { 10 | return ( 11 | <> 12 |
13 | 14 | 15 | 16 | 17 | 18 |