44 |
91 |
92 | );
93 | };
94 |
95 | export default Card;
96 |
--------------------------------------------------------------------------------
/src/components/Card/styles.module.scss:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | @apply relative w-full rounded-sm p-4 space-y-6 flex flex-col justify-between bg-blue;
3 |
4 | &.masterCard {
5 | @apply bg-indigo-60;
6 | }
7 |
8 | .cardTypeWrapper {
9 | @apply flex items-baseline justify-between;
10 |
11 | .logo {
12 | @apply flex-1;
13 | }
14 |
15 | .cvcWrapper {
16 | @apply flex flex-col mx-3;
17 |
18 | .title {
19 | @apply text-xs font-extrabold tracking-widest text-right text-dark-60;
20 |
21 | &.masterCard {
22 | @apply text-dark-30;
23 | }
24 | }
25 |
26 | .value {
27 | @apply font-bold text-white tracking-widest text-right text-tiny;
28 | }
29 | }
30 | }
31 |
32 | .cardNumberWrapper {
33 | @apply flex flex-col gap-y-1;
34 |
35 | .title {
36 | @apply font-bold text-white text-tiny;
37 | }
38 |
39 | .value {
40 | @apply text-tiny font-bold text-dark-60;
41 |
42 | &.masterCard {
43 | @apply text-dark-30;
44 | }
45 | }
46 | }
47 |
48 | .editButton {
49 | @apply absolute right-4 bottom-5;
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/src/components/CardDetail/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useEffect, useState } from 'react';
2 | import {
3 | useForm, useFormState, Controller, useWatch,
4 | } from 'react-hook-form';
5 | import InputMask from 'react-input-mask';
6 | import classNames from 'classnames';
7 |
8 | import imgClose from '../../assets/close.svg';
9 | import imgSuccess from '../../assets/form-success.svg';
10 | import imgError from '../../assets/form-error.svg';
11 | import Card from '../Card';
12 | import { ICard } from '../../types/card';
13 | import { AppContext } from '../../providers/AppProvider';
14 |
15 | import styles from './styles.module.scss';
16 |
17 | type props = {
18 | onClose? : VoidFunction;
19 | selectedIndex: number;
20 | }
21 |
22 | const CardDetails: React.FC
45 |
73 |
46 | 
47 |
48 |
49 |
56 | CVC
57 |
58 | {cvc}
59 |
60 |
61 |
68 | EXPIRES
69 |
70 | {expireDate}
71 |
72 |
74 | {name}
75 |
82 | { number}
83 |
84 |
85 | { !isNotEditable && (
86 |
89 | )}
90 |
114 |
227 |
115 |
118 |
119 | {selectedIndex >= 0 ? 'Edit your card' : 'Add your card'}
120 | {cardData && onClose()} />
228 |
229 | );
230 | };
231 |
232 | export default CardDetails;
233 |
--------------------------------------------------------------------------------
/src/components/CardDetail/styles.module.scss:
--------------------------------------------------------------------------------
1 | .formWrapper {
2 | @apply absolute bottom-0 left-0 w-full flex flex-col z-20 py-4 px-5 bg-white rounded-t-md;
3 |
4 | .closeBtnWrapper {
5 | @apply text-right;
6 | }
7 |
8 | .title {
9 | @apply mb-5 text-base font-bold text-dark-90;
10 | }
11 |
12 | .itemWrapper {
13 | @apply mt-5;
14 |
15 | .title {
16 | @apply block text-sm font-bold text-dark-90 mb-0;
17 | }
18 |
19 | .error {
20 | @apply text-sm text-rose;
21 | }
22 | }
23 |
24 | .confirmBtn {
25 | @apply w-full py-3 mt-5 font-medium text-white rounded-lg bg-indigo-30;
26 | }
27 |
28 | .deleteBtn {
29 | @apply py-3 mt-1 font-medium text-dark-10;
30 | }
31 | }
32 |
33 | .area {
34 | @apply absolute bottom-0 left-0 z-10 w-full h-full bg-dark-60 opacity-60;
35 | }
36 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | @font-face {
6 | font-family: 'lineto';
7 | src: local('lineto'), url(./assets/fonts/lineto-circular-pro-book.woff) format('truetype');
8 | font-display: swap;
9 | }
10 |
11 | body {
12 | margin: 0;
13 | font-family: "lineto", sans-serif;
14 | -webkit-font-smoothing: antialiased;
15 | -moz-osx-font-smoothing: grayscale;
16 | }
17 |
18 | code {
19 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
20 | monospace;
21 | }
22 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import { BrowserRouter } from 'react-router-dom';
4 | import './index.css';
5 | import App from './App';
6 | import reportWebVitals from './reportWebVitals';
7 |
8 | ReactDOM.render(
9 |
10 | ,
12 | document.getElementById('root'),
13 | );
14 |
15 | // If you want to start measuring performance in your app, pass a function
16 | // to log results (for example: reportWebVitals(console.log))
17 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
18 | reportWebVitals();
19 |
--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/pages/Home/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useState } from 'react';
2 |
3 | import Card from '../../components/Card';
4 | import CardDetail from '../../components/CardDetail';
5 | import { AppContext } from '../../providers/AppProvider';
6 | import { ICard } from '../../types/card';
7 |
8 | import styles from './styles.module.scss';
9 |
10 | const Home: React.FC = () => {
11 | const { cards } = useContext(AppContext);
12 | const [showModal, setShowModal] = useState(false);
13 | const [selectedIndex, setSelectedIndex] = useState(-1);
14 |
15 | const addNew = (): void => {
16 | setShowModal(true);
17 | setSelectedIndex(-1);
18 | };
19 |
20 | const editCard = (index: number): void => {
21 | setSelectedIndex(index);
22 | setShowModal(true);
23 | };
24 |
25 | return (
26 | >;
11 | };
12 |
13 | export const AppContext = createContext({ cards: [], setCards: () => {} });
14 |
15 | const AppProvider = ({ children }: PropsType) => {
16 | const [cards, setCards] = useState([]);
17 |
18 | return (
19 |
25 | {children}
26 |
27 | );
28 | };
29 |
30 | export default AppProvider;
31 |
--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
10 |
11 |
14 |
15 | );
16 |
17 | export default MainRoute;
18 |
--------------------------------------------------------------------------------
/src/routes/Routes.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Switch, Route } from 'react-router-dom';
3 |
4 | import Home from '../pages/Home';
5 |
6 | const Routes: React.FC = () => (
7 |
8 |
10 | );
11 |
12 | export default Routes;
13 |
--------------------------------------------------------------------------------
/src/setupTests.ts:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 |
--------------------------------------------------------------------------------
/src/types/card.ts:
--------------------------------------------------------------------------------
1 | export interface ICard {
2 | name?: string;
3 | number?: number;
4 | expireDate?: number;
5 | cvc?: number;
6 | }
7 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
3 | darkMode: false, // or 'media' or 'class'
4 | theme: {
5 | borderRadius: {
6 | none: '0',
7 | sm: '16px',
8 | md: '24px',
9 | lg: '100px',
10 | },
11 | colors: {
12 | white: '#ffffff',
13 | indigo: {
14 | 30: '#4C00C2',
15 | 60: '#3B058E',
16 | 100: '#32007E',
17 | },
18 | grey: '#E5E5E5',
19 | blue: '#01C9C7',
20 | dark: {
21 | 10: '#D3D8E1',
22 | 30: '#798291',
23 | 60: '#444E5D',
24 | 90: '#1A212C',
25 | },
26 | green: '#19AC51',
27 | rose: '#FC484C',
28 | },
29 | bgColors: {
30 | white: '#ffffff',
31 | indigo: {
32 | 30: '#4C00C2',
33 | 60: '#3B058E',
34 | 100: '#32007E',
35 | },
36 | grey: '#E5E5E5',
37 | dark: {
38 | 10: '#D3D8E1',
39 | 30: '#798291',
40 | 60: '#444E5D',
41 | 90: '#1A212C',
42 | },
43 | green: '#19AC51',
44 | rose: '#FC484C',
45 | },
46 | fontSize: {
47 | xs: '10px',
48 | sm: '14px',
49 | tiny: '16px',
50 | base: '24px',
51 | lg: '30px',
52 | },
53 | spacing: {
54 | 0: '0px',
55 | 1: '4px',
56 | 2: '8px',
57 | 3: '16px',
58 | 4: '24px',
59 | 5: '32px',
60 | 6: '40px',
61 | 7: '48px',
62 | 8: '56px',
63 | },
64 | extend: {
65 | minHeight: {
66 | 1000: '1000px',
67 | },
68 | },
69 | },
70 | variants: {
71 | extend: {},
72 | },
73 | plugins: [],
74 | };
75 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "esModuleInterop": true,
12 | "allowSyntheticDefaultImports": true,
13 | "strict": true,
14 | "forceConsistentCasingInFileNames": true,
15 | "noFallthroughCasesInSwitch": true,
16 | "module": "esnext",
17 | "moduleResolution": "node",
18 | "resolveJsonModule": true,
19 | "isolatedModules": true,
20 | "noEmit": true,
21 | "jsx": "react-jsx"
22 | },
23 | "include": [
24 | "src"
25 | ]
26 | }
27 |
--------------------------------------------------------------------------------
27 | Your cards
28 | Add, edit or delete your cards any time
29 | setShowModal(false)} selectedIndex={selectedIndex} />
41 | )}
42 |
43 | );
44 | };
45 |
46 | export default Home;
47 |
--------------------------------------------------------------------------------
/src/pages/Home/styles.module.scss:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | @apply relative flex flex-col h-screen max-w-xl px-5 py-8 mx-auto;
3 |
4 | .title {
5 | @apply text-lg font-bold text-indigo-30;
6 | }
7 |
8 | .description {
9 | @apply mt-1 text-sm font-medium text-dark-30;
10 | }
11 |
12 | .cards {
13 | @apply flex-1 mt-8 space-y-2 overflow-y-auto;
14 | }
15 |
16 | .newBtn {
17 | @apply py-3 font-medium text-white rounded-lg bg-indigo-30;
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/providers/AppProvider.tsx:
--------------------------------------------------------------------------------
1 | import React, { createContext, ReactNode, useState } from 'react';
2 | import { ICard } from '../types/card';
3 |
4 | type PropsType = {
5 | children: ReactNode;
6 | };
7 |
8 | type ContextProps = {
9 | cards: ICard[];
10 | setCards: React.Dispatch
30 | {cards?.map((item: ICard, i: number) => (
31 | editCard(i)}
33 | key={item.number}
34 | {...item}
35 | />
36 | ))}
37 |
38 |
39 | {showModal && (
40 |