Button styles

This commit is contained in:
Simon Wanner 2023-03-22 11:54:59 +01:00
parent 11dfe615a0
commit 3fec33e5ca
6 changed files with 127 additions and 3 deletions

61
package-lock.json generated
View file

@ -8,6 +8,10 @@
"name": "my-finance-pal", "name": "my-finance-pal",
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.3.0",
"@fortawesome/free-regular-svg-icons": "^6.3.0",
"@fortawesome/free-solid-svg-icons": "^6.3.0",
"@fortawesome/react-fontawesome": "^0.2.0",
"@sindresorhus/is": "^5.3.0", "@sindresorhus/is": "^5.3.0",
"@tanstack/react-query": "^4.28.0", "@tanstack/react-query": "^4.28.0",
"@types/node": "18.15.5", "@types/node": "18.15.5",
@ -105,6 +109,63 @@
"node": "^12.22.0 || ^14.17.0 || >=16.0.0" "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
} }
}, },
"node_modules/@fortawesome/fontawesome-common-types": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.3.0.tgz",
"integrity": "sha512-4BC1NMoacEBzSXRwKjZ/X/gmnbp/HU5Qqat7E8xqorUtBFZS+bwfGH5/wqOC2K6GV0rgEobp3OjGRMa5fK9pFg==",
"hasInstallScript": true,
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/fontawesome-svg-core": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.3.0.tgz",
"integrity": "sha512-uz9YifyKlixV6AcKlOX8WNdtF7l6nakGyLYxYaCa823bEBqyj/U2ssqtctO38itNEwXb8/lMzjdoJ+aaJuOdrw==",
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "6.3.0"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/free-regular-svg-icons": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.3.0.tgz",
"integrity": "sha512-cZnwiVHZ51SVzWHOaNCIA+u9wevZjCuAGSvSYpNlm6A4H4Vhwh8481Bf/5rwheIC3fFKlgXxLKaw8Xeroz8Ntg==",
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "6.3.0"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/free-solid-svg-icons": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.3.0.tgz",
"integrity": "sha512-x5tMwzF2lTH8pyv8yeZRodItP2IVlzzmBuD1M7BjawWgg9XAvktqJJ91Qjgoaf8qJpHQ8FEU9VxRfOkLhh86QA==",
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "6.3.0"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/react-fontawesome": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
"integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
"dependencies": {
"prop-types": "^15.8.1"
},
"peerDependencies": {
"@fortawesome/fontawesome-svg-core": "~1 || ~6",
"react": ">=16.3"
}
},
"node_modules/@humanwhocodes/config-array": { "node_modules/@humanwhocodes/config-array": {
"version": "0.11.8", "version": "0.11.8",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",

View file

@ -11,6 +11,10 @@
"codegen": "rm -rf ./src/generated/openapi; openapi --input ./api.yaml --output ./src/generated/openapi" "codegen": "rm -rf ./src/generated/openapi; openapi --input ./api.yaml --output ./src/generated/openapi"
}, },
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.3.0",
"@fortawesome/free-regular-svg-icons": "^6.3.0",
"@fortawesome/free-solid-svg-icons": "^6.3.0",
"@fortawesome/react-fontawesome": "^0.2.0",
"@sindresorhus/is": "^5.3.0", "@sindresorhus/is": "^5.3.0",
"@tanstack/react-query": "^4.28.0", "@tanstack/react-query": "^4.28.0",
"@types/node": "18.15.5", "@types/node": "18.15.5",

View file

@ -1,19 +1,33 @@
import { library } from '@fortawesome/fontawesome-svg-core';
import { faAngry } from '@fortawesome/free-regular-svg-icons';
import { faPlus } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { FC } from 'react'; import { FC } from 'react';
import styles from './BudgetList.module.scss'; import styles from './BudgetList.module.scss';
import { useBudgets } from '../../hooks/useBudgets'; import { useBudgets } from '../../hooks/useBudgets';
import { Button } from '../_design/Button/Button';
import { BudgetItem } from '../BudgetItem/BudgetItem'; import { BudgetItem } from '../BudgetItem/BudgetItem';
library.add(faAngry);
export const BudgetList: FC = () => { export const BudgetList: FC = () => {
const { data: budgets = [] } = useBudgets(); const { data: budgets = [] } = useBudgets();
const handleAddBudgetClick = () => {
// TODO create logic for adding budget
};
return ( return (
<div className={styles.Container}> <section className={styles.Container}>
<button onClick={() => null}>Add a budget</button> <Button onClick={handleAddBudgetClick}>
Add a budget <FontAwesomeIcon icon={faPlus} />
</Button>
<div className={styles.ListItems}> <div className={styles.ListItems}>
{budgets.map((budget) => ( {budgets.map((budget) => (
<BudgetItem key={budget.id} budget={budget} /> <BudgetItem key={budget.id} budget={budget} />
))} ))}
</div> </div>
</div> </section>
); );
}; };

View file

@ -0,0 +1,18 @@
.Button {
background: #fff;
border: 1px solid #aaa;
padding: 8px 16px;
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 16px;
border-radius: 4px;
cursor: pointer;
justify-content: center;
transition: .2s;
&:hover {
opacity: 0.7;
background: #f8f8f8;
}
}

View file

@ -0,0 +1,23 @@
import { FunctionComponent, MouseEventHandler, PropsWithChildren } from 'react';
import styles from './Button.module.scss';
export interface ButtonProps extends PropsWithChildren {
readonly onClick: VoidFunction;
}
export const Button: FunctionComponent<ButtonProps> = (props) => {
const { onClick, children } = props;
const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {
event.stopPropagation();
event.preventDefault();
onClick();
};
return (
<button className={styles.Button} onClick={handleClick}>
{children}
</button>
);
};

View file

@ -1,14 +1,18 @@
import { config } from '@fortawesome/fontawesome-svg-core';
import { QueryClient } from '@tanstack/query-core'; import { QueryClient } from '@tanstack/query-core';
import { QueryClientProvider } from '@tanstack/react-query'; import { QueryClientProvider } from '@tanstack/react-query';
import { Inter } from 'next/font/google'; import { Inter } from 'next/font/google';
import React from 'react'; import React from 'react';
import '@fortawesome/fontawesome-svg-core/styles.css';
import '../styles/globals.css'; import '../styles/globals.css';
import { Navigation } from '../components/Navigation/Navigation'; import { Navigation } from '../components/Navigation/Navigation';
import appStyles from '../styles/app.module.scss'; import appStyles from '../styles/app.module.scss';
import type { AppProps } from 'next/app'; import type { AppProps } from 'next/app';
config.autoAddCss = false;
const inter = Inter({ subsets: ['latin'] }); const inter = Inter({ subsets: ['latin'] });
const queryClient = new QueryClient(); const queryClient = new QueryClient();