Techognito/react-playground
SHA256
1
0
Fork 0
Code Issues Activity

Updated card buttons, and added Danish translation

Browse source 
Tested danish translation, it works :O
This commit is contained in:
Techognito 2025-08-26 11:14:50 +02:00
parent eb606572b0
commit 695dd24cc7
9 changed files with 263 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
src/GarageApp/modules/.VehicleCards.tsx.swp Normal file
View file

Binary file not shown.

23
src/GarageApp/modules/VehicleCards.tsx
View file

@ -7,13 +7,21 @@ import CardContent from '@mui/material/CardContent';
import CardActions from '@mui/material/CardActions';
import Collapse from '@mui/material/Collapse';
import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button';
import IconButton, { IconButtonProps } from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import { red } from '@mui/material/colors';
import FavoriteIcon from '@mui/icons-material/Favorite';
import ShareIcon from '@mui/icons-material/Share';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import GasStation from './icons/gasFillup'
import Expense from './icons/Expense'
import { useTranslation, withTranslation, Trans } from 'react-i18next';
interface ExpandMoreProps extends IconButtonProps {
expand: boolean;
@ -45,6 +53,7 @@ const ExpandMore = styled((props: ExpandMoreProps) => {
}));
export default function VehicleCard({ nickname, makemodel, registration}) {
const { t, i18n } = useTranslation();
const [expanded, setExpanded] = React.useState(false);
const handleExpandClick = () => {
@ -55,7 +64,7 @@ export default function VehicleCard({ nickname, makemodel, registration}) {
<Card sx={{ }}>
<CardHeader
action={
<IconButton aria-label="settings">
<IconButton aria-label="Edit Vehicle">
<MoreVertIcon />
</IconButton>
}
@ -69,12 +78,12 @@ export default function VehicleCard({ nickname, makemodel, registration}) {
alt=""
/>
<CardActions disableSpacing>
<IconButton aria-label="add to favorites">
<FavoriteIcon />
</IconButton>
<IconButton aria-label="share">
<ShareIcon />
</IconButton>
<Button startIcon={<GasStation />}>
{t ('addfillup')}
</Button>
<Button startIcon={<Expense />}>
{t ('addexpense')}
</Button>
<ExpandMore
expand={expanded}
onClick={handleExpandClick}

7
src/GarageApp/modules/icons/Expense.tsx Normal file
View file

@ -0,0 +1,7 @@
import React from 'react';
import type { SVGProps } from 'react';
// icon by 480 Design provided by Iconify.design
// License: CC_BY_4.0
export default function SolarTagPriceBroken(props: SVGProps<SVGSVGElement>) {
return (<svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 24 24" {...props}><g fill="none" stroke="currentColor" strokeLinecap="round" strokeWidth={2}><path d="M15.39 15.39c.585-.587.664-1.457.176-1.946s-1.359-.409-1.945.177c-.585.586-1.456.665-1.944.177s-.409-1.359.177-1.944m3.535 3.535l.354.354m-.354-.354c-.4.401-.935.565-1.389.471m-2.5-4.36l.354.354m0 0c.331-.332.753-.5 1.146-.497m-4.393-.478a2 2 0 1 0-2-2"></path><path d="M16.137 4.728c-1.546-1.545-2.318-2.318-3.321-2.605c-1.003-.288-2.068-.042-4.197.45l-1.228.283c-1.792.413-2.688.62-3.302 1.233S3.27 5.6 2.856 7.391l-.284 1.228c-.491 2.13-.737 3.194-.45 4.197c.288 1.003 1.061 1.775 2.606 3.32l1.83 1.83C9.248 20.657 10.592 22 12.262 22c1.671 0 3.015-1.344 5.704-4.033c2.69-2.69 4.034-4.034 4.034-5.705c0-1.342-.868-2.474-2.604-4.262"></path></g></svg>);
}

7
src/GarageApp/modules/icons/gasFillup.tsx Normal file
View file

@ -0,0 +1,7 @@
import React from 'react';
import type { SVGProps } from 'react';
// Icon by 480 Design provided by Iconify
// License: CC_BY_4.0
export default function SolarGasStationBroken(props: SVGProps<SVGSVGElement>) {
return (<svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 24 24" {...props}><g fill="none" stroke="currentColor" strokeWidth={2}><path d="M11 6H8c-.943 0-1.414 0-1.707.293S6 7.057 6 8s0 1.414.293 1.707S7.057 10 8 10h3c.943 0 1.414 0 1.707-.293S13 8.943 13 8s0-1.414-.293-1.707S11.943 6 11 6Z"></path><path strokeLinecap="round" d="M7 17h5m5 5H2M19.5 4l1.233.986c.138.11.207.166.27.222a3 3 0 0 1 .992 2.066c.005.084.005.172.005.348V18.5a1.5 1.5 0 0 1-3 0v-.071c0-.79-.64-1.429-1.429-1.429H16"></path><path strokeLinecap="round" d="M22 8h-1.5A1.5 1.5 0 0 0 19 9.5v2.419a1.5 1.5 0 0 0 1.026 1.423L22 14m-6 8v-7M3 22v-4m0-4V8c0-2.828 0-4.243.879-5.121C4.757 2 6.172 2 9 2h1c2.828 0 4.243 0 5.121.879C16 3.757 16 5.172 16 8v3"></path></g></svg>);
}