Skip to content

Commit

Permalink
feat: creation info widget (#960)
Browse files Browse the repository at this point in the history
* feat: creation info widget

* fix: Remove demo page

Co-authored-by: Usame Algan <[email protected]>
  • Loading branch information
iamacook and usame-algan committed Oct 27, 2022
1 parent fa66271 commit 614ee1b
Show file tree
Hide file tree
Showing 5 changed files with 128 additions and 2 deletions.
10 changes: 10 additions & 0 deletions public/images/common/lightbulb.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
86 changes: 86 additions & 0 deletions src/components/create-safe/InfoWidget/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import { Box, Button, Card, CardActions, CardContent, CardHeader, SvgIcon, Typography } from '@mui/material'
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'
import { useState } from 'react'
import type { AlertColor } from '@mui/material'
import type { ReactElement } from 'react'

import LightbulbIcon from '@/public/images/common/lightbulb.svg'

import css from './styles.module.css'

type Props = {
title: string
steps: { title: string; text: string }[]
variant: AlertColor
}

const InfoWidget = ({ title, steps, variant }: Props): ReactElement | null => {
const [activeStep, setActiveStep] = useState(0)
const [dismissed, setDismissed] = useState(false)

const isFirst = activeStep === 0
const isLast = activeStep === steps.length - 1

const isMultiStep = steps.length > 1

const onPrev = () => {
if (!isFirst) {
setActiveStep((prev) => prev - 1)
}
}

const onNext = () => {
if (isLast) {
setDismissed(true)
} else {
setActiveStep((prev) => prev + 1)
}
}

if (dismissed) {
return null
}

return (
<Card sx={{ backgroundColor: ({ palette }) => palette[variant]?.background }}>
<CardHeader
className={css.header}
title={
<Box className={css.headerWrapper}>
<Typography
variant="caption"
className={css.title}
sx={{
backgroundColor: ({ palette }) => palette[variant]?.main,
}}
>
<SvgIcon component={LightbulbIcon} inheritViewBox fontSize="inherit" className={css.lightbulb} />
{title}
</Typography>
{isMultiStep && (
<Typography variant="caption" className={css.count}>
{activeStep + 1} of {steps.length}
</Typography>
)}
</Box>
}
/>
<CardContent>
<Typography variant="h5">{steps[activeStep].title}</Typography>
<Typography variant="body2">{steps[activeStep].text}</Typography>
</CardContent>
<CardActions className={css.actions}>
{isMultiStep && !isFirst && (
<Button variant="contained" size="small" onClick={onPrev} startIcon={<ChevronLeftIcon />}>
Previous
</Button>
)}
<Button variant="outlined" size="small" onClick={onNext}>
Got it
</Button>
</CardActions>
</Card>
)
}

export default InfoWidget
30 changes: 30 additions & 0 deletions src/components/create-safe/InfoWidget/styles.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
.header {
padding-bottom: 0px;
}

.headerWrapper {
display: flex;
justify-content: space-between;
align-items: center;
}

.title {
font-weight: 700;
padding: calc(var(--space-1) / 2) var(--space-1);
border-radius: 6px;
display: flex;
align-items: center;
}

.lightbulb {
margin-right: calc(var(--space-1) / 2);
}

.count {
color: var(--color-text-secondary);
}

.actions {
display: flex;
justify-content: flex-end;
}
2 changes: 1 addition & 1 deletion src/styles/colors.ts
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const palette = {
dark: '#CD674E',
main: '#FF8061',
light: '#FFB7A6',
background: '#EFFFF4',
background: '#FFF0ED',
},
background: {
default: '#F4F4F4',
Expand Down
2 changes: 1 addition & 1 deletion src/styles/vars.css
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
--color-warning-dark: #cd674e;
--color-warning-main: #ff8061;
--color-warning-light: #ffb7a6;
--color-warning-background: #effff4;
--color-warning-background: #fff0ed;
--color-background-default: #f4f4f4;
--color-background-main: #f4f4f4;
--color-background-paper: #ffffff;
Expand Down

0 comments on commit 614ee1b

Please sign in to comment.