wini-web-components 0.1.0

package/src/component/calendar/calendar.tsx

@@ -0,0 +1,448 @@
+import React, { CSSProperties, ReactNode } from "react"
+import './calendar.css'
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faAngleDoubleLeft, faAngleDoubleRight, faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons"
+import { differenceInCalendarDays } from "date-fns"
+
+export const today = new Date()
+export const startDate = new Date(
+    today.getFullYear() - 100,
+    today.getMonth(),
+    today.getDate()
+)
+export const endDate = new Date(
+    today.getFullYear() + 100,
+    today.getMonth(),
+    today.getDate()
+)
+
+export const inRangeTime = (date: Date, startDate: Date, endDate: Date) => (differenceInCalendarDays(date, startDate) > -1 && differenceInCalendarDays(endDate, date) > -1)
+
+export const enum CalendarType {
+    DATE,
+    MONTH,
+    YEAR,
+    DATETIME,
+}
+
+interface CalendarProps {
+    value?: Date,
+    min?: Date,
+    max?: Date,
+    onSelect?: (props: Date) => void,
+    disabled?: boolean,
+    helperText?: string,
+    helperTextColor?: string,
+    placeholder?: string,
+    className?: string,
+    style?: CSSProperties,
+    type: CalendarType,
+    showSidebar?: boolean,
+    footer?: ReactNode
+}
+
+interface CalendarState {
+    value: Date,
+    selectDate?: Date,
+    selectMonth: number,
+    selectYear: number,
+    selectHours: number,
+    selectMinutes: number,
+    selectSeconds: number,
+    type: CalendarType,
+}
+
+export class Calendar extends React.Component<CalendarProps, CalendarState> {
+    state: Readonly<CalendarState> = {
+        value: this.props.value ?? today,
+        selectDate: this.props.value ?? today,
+        selectMonth: (this.props.value ?? today).getMonth(),
+        selectYear: (this.props.value ?? today).getFullYear(),
+        type: CalendarType.DATE,
+        selectHours: this.props.value?.getHours() ?? 0,
+        selectMinutes: this.props.value?.getMinutes() ?? 0,
+        selectSeconds: this.props.value?.getSeconds() ?? 0,
+    }
+
+    showDateInMonth() {
+        let firstDayOfMonth = new Date(this.state.selectYear, this.state.selectMonth, 1)
+        return <>
+            {Array.from({ length: 7 }).map((_, i) => {
+                switch (i) {
+                    case 0:
+                        var weekdayTitle = 'Su'
+                        break
+                    case 1:
+                        weekdayTitle = 'Mo'
+                        break
+                    case 2:
+                        weekdayTitle = 'Tu'
+                        break
+                    case 3:
+                        weekdayTitle = 'We'
+                        break
+                    case 4:
+                        weekdayTitle = 'Th'
+                        break
+                    case 5:
+                        weekdayTitle = 'Fr'
+                        break
+                    case 6:
+                        weekdayTitle = 'Sa'
+                        break
+                    default:
+                        weekdayTitle = ''
+                        break
+                }
+                return <div key={'dtwk-' + i} className='date-picker-circle label-4' style={{ color: '#00204D99' }}>
+                    {weekdayTitle}
+                </div>
+            })}
+            {Array.from({ length: 42 }).map((_, i) => {
+                let dateNumber = (i % 7) + (Math.floor(i / 7) * 7) - firstDayOfMonth.getDay()
+                const timeValue = new Date(this.state.selectYear, this.state.selectMonth, dateNumber + 1, this.state.selectHours, this.state.selectMinutes, this.state.selectSeconds)
+                let style = {}
+                let additionProps = {}
+                let selected = false
+                if (dateNumber + 1 === today.getDate() && this.state.selectMonth === today.getMonth() && this.state.selectYear === today.getFullYear()) {
+                    style = { borderColor: 'var(--infor-color)' }
+                }
+                if (!inRangeTime(timeValue, startDate, endDate)) {
+                    additionProps = { 'in-range': 'false' }
+                } else if (!inRangeTime(timeValue, this.props.min ?? startDate, this.props.min ?? endDate)) {
+                    style = {
+                        ...style,
+                        color: 'var(--disabled-font-color)',
+                        pointerEvents: 'none'
+                    }
+                } else if (this.state.value.valueOf() === timeValue.valueOf()) {
+                    additionProps = { ...additionProps }
+                    selected = true
+                } else if (timeValue.getMonth() !== this.state.selectMonth) {
+                    style = { ...style, color: '#9fb0c7' }
+                }
+                return <button type="button" key={timeValue.toString()} className={`date-picker-circle body-3 ${selected ? 'selected' : ''}`} style={style} {...additionProps}
+                    onClick={() => {
+                        this.setState({ ...this.state, value: timeValue })
+                        if (this.props.onSelect) this.props.onSelect(timeValue)
+                    }} >
+                    {timeValue.getDate()}
+                </button>
+            })}
+        </>
+    }
+
+    showMonthInYear() {
+        return <>
+            {Array.from({ length: 12 }).map((_, i) => {
+                let monthTitle: string = ''
+                switch (i) {
+                    case 0:
+                        monthTitle = 'Jan'
+                        break
+                    case 1:
+                        monthTitle = 'Feb'
+                        break
+                    case 2:
+                        monthTitle = 'Mar'
+                        break
+                    case 3:
+                        monthTitle = 'Apr'
+                        break
+                    case 4:
+                        monthTitle = 'May'
+                        break
+                    case 5:
+                        monthTitle = 'Jun'
+                        break
+                    case 6:
+                        monthTitle = 'Jul'
+                        break
+                    case 7:
+                        monthTitle = 'Aug'
+                        break
+                    case 8:
+                        monthTitle = 'Sep'
+                        break
+                    case 9:
+                        monthTitle = 'Oct'
+                        break
+                    case 10:
+                        monthTitle = 'Nov'
+                        break
+                    case 11:
+                        monthTitle = 'Dec'
+                        break
+                    default:
+                        break
+                }
+                const timeValue = new Date(this.state.selectYear, i, today.getDate())
+                let additionProps = {}
+                let style = {}
+                let selected = false
+                if (this.state.selectYear === today.getFullYear() && today.getMonth() === i) {
+                    style = { borderColor: 'var(--infor-color)' }
+                } if (!inRangeTime(timeValue, startDate, endDate)) {
+                    additionProps = { 'in-range': 'false' }
+                } else if (!inRangeTime(new Date(this.state.selectYear, this.state.selectMonth), this.props.min ?? startDate, this.props.min ?? endDate)) {
+                    if (this.state.selectYear === this.state.selectDate?.getFullYear() && this.state.selectDate.getMonth() === i) {
+                        style = {
+                            color: 'var(--disabled-font-color)',
+                            pointerEvents: 'none'
+                        }
+                    }
+                }
+                if (this.state.selectYear === this.state.value.getFullYear() && i === this.state.value.getMonth()) {
+                    selected = true
+                }
+                return <button type="button" key={timeValue.toString()} className={`month-picker-circle body-3 row ${selected ? 'selected' : ''}`} style={style} {...additionProps}
+                    onClick={() => {
+                        if (this.props.type === CalendarType.MONTH) {
+                            this.setState({ ...this.state, value: timeValue })
+                            if (this.props.onSelect) this.props.onSelect(timeValue)
+                        } else {
+                            this.setState({ ...this.state, selectMonth: i, type: CalendarType.DATE })
+                        }
+                    }}
+                >
+                    {monthTitle}
+                </button>
+            })}
+        </>
+    }
+
+    showYearInRange() {
+        return <>
+            {Array.from({ length: 12 }).map((_, i) => {
+                let firstYearInTable = this.state.selectYear - ((this.state.selectYear - startDate.getFullYear()) % 12)
+                let yearNumber = i + firstYearInTable
+                let additionProps = {}
+                let style = {}
+                let selected = false
+                if (yearNumber === today.getFullYear()) {
+                    style = { borderColor: 'var(--infor-color)' }
+                } else if (yearNumber < ((this.props.min ?? startDate).getFullYear()) || yearNumber > ((this.props.min ?? endDate).getFullYear())) {
+                    additionProps = { 'in-range': 'false' }
+                }
+                if (yearNumber === this.state.value.getFullYear()) {
+                    selected = true
+                }
+                return <button type="button" key={yearNumber.toString()} className={`year-picker-circle body-3 row ${selected ? 'selected' : ''}`} style={style} {...additionProps}
+                    onClick={() => {
+                        if (this.props.type === CalendarType.YEAR) {
+                            this.setState({ ...this.state, value: new Date(yearNumber) })
+                            if (this.props.onSelect) this.props.onSelect(new Date(yearNumber))
+                        } else {
+                            this.setState({ ...this.state, type: CalendarType.MONTH, selectYear: yearNumber })
+                        }
+                    }}
+                >
+                    {yearNumber}
+                </button>
+            })}
+        </>
+    }
+
+    getTitle() {
+        switch (this.state.type) {
+            case CalendarType.YEAR:
+                let firstYearInTable = this.state.selectYear - ((this.state.selectYear - startDate.getFullYear()) % 12)
+                return `${firstYearInTable}-${firstYearInTable + 11}`
+            case CalendarType.MONTH:
+                return this.state.selectYear
+            default:
+                switch (this.state.selectMonth) {
+                    case 0:
+                        var monthName = 'January'
+                        break
+                    case 1:
+                        monthName = 'February'
+                        break
+                    case 2:
+                        monthName = 'March'
+                        break
+                    case 3:
+                        monthName = 'April'
+                        break
+                    case 4:
+                        monthName = 'May'
+                        break
+                    case 5:
+                        monthName = 'June'
+                        break
+                    case 6:
+                        monthName = 'July'
+                        break
+                    case 7:
+                        monthName = 'August'
+                        break
+                    case 8:
+                        monthName = 'September'
+                        break
+                    case 9:
+                        monthName = 'October'
+                        break
+                    case 10:
+                        monthName = 'November'
+                        break
+                    case 11:
+                        monthName = 'December'
+                        break
+                    default:
+                        monthName = ''
+                        break
+                }
+                return `${monthName} ${this.state.selectYear}`
+        }
+    }
+
+    render(): React.ReactNode {
+        return <div className={`row calendar-container ${this.props.className}`} style={this.props.style}>
+            {this.props.showSidebar ? <div className="calendar-sidebar-options col">
+                <button type="button" onClick={() => { }} className="label-4 calendar-sidebar-option-buttton">Yesterday</button>
+                <button type="button" className="label-4 calendar-sidebar-option-buttton">Last week</button>
+                <button type="button" className="label-4 calendar-sidebar-option-buttton">Last month</button>
+                <button type="button" className="label-4 calendar-sidebar-option-buttton">Last year</button>
+            </div> : null}
+            <div className="calendar-body col">
+                <div className="row" style={{ alignItems: 'start' }} >
+                    <div className="picker-date-container col">
+                        <div className='picker-date-header row'>
+                            <button type='button'
+                                onClick={() => {
+                                    switch (this.state.type) {
+                                        case CalendarType.YEAR:
+                                            if (this.state.selectYear - 20 < startDate.getFullYear()) {
+                                                this.setState({ ...this.state, selectYear: startDate.getFullYear() })
+                                            } else {
+                                                this.setState({ ...this.state, selectYear: this.state.selectYear - 20 })
+                                            }
+                                            break
+                                        case CalendarType.MONTH:
+                                            if (this.state.selectYear - 10 < startDate.getFullYear()) {
+                                                this.setState({ ...this.state, selectYear: startDate.getFullYear() })
+                                            } else {
+                                                this.setState({ ...this.state, selectYear: this.state.selectYear - 10 })
+                                            }
+                                            break
+                                        default:
+                                            this.setState({ ...this.state, selectYear: this.state.selectYear - 1 })
+                                            break
+                                    }
+                                }}
+                            >
+                                <FontAwesomeIcon icon={faAngleDoubleLeft} />
+                            </button>
+                            <button type='button'
+                                onClick={() => {
+                                    switch (this.state.type) {
+                                        case CalendarType.YEAR:
+                                            if (this.state.selectYear - 10 < startDate.getFullYear()) {
+                                                this.setState({ ...this.state, selectYear: startDate.getFullYear() })
+                                            } else {
+                                                this.setState({ ...this.state, selectYear: this.state.selectYear - 10 })
+                                            }
+                                            break
+                                        case CalendarType.MONTH:
+                                            if (this.state.selectYear - 1 >= startDate.getFullYear()) {
+                                                this.setState({ ...this.state, selectYear: this.state.selectYear - 1 })
+                                            }
+                                            break
+                                        default:
+                                            const newDataVl = new Date(this.state.selectYear, this.state.selectMonth - 1, 1)
+                                            this.setState({ ...this.state, selectMonth: newDataVl.getMonth(), selectYear: newDataVl.getFullYear() })
+                                            break
+                                    }
+                                }}
+                            >
+                                <FontAwesomeIcon icon={faAngleLeft} />
+                            </button>
+                            <span className="heading-7" onClick={() => {
+                                if (this.state.type !== CalendarType.YEAR)
+                                    this.setState({ ...this.state, type: this.state.type === CalendarType.DATE ? CalendarType.MONTH : CalendarType.YEAR })
+                            }} >
+                                {this.getTitle()}
+                            </span>
+                            <button type='button'
+                                onClick={() => {
+                                    switch (this.state.type) {
+                                        case CalendarType.YEAR:
+                                            if (this.state.selectYear + 10 > endDate.getFullYear()) {
+                                                this.setState({ ...this.state, selectYear: endDate.getFullYear() })
+                                            } else {
+                                                this.setState({ ...this.state, selectYear: this.state.selectYear + 10 })
+                                            }
+                                            break
+                                        case CalendarType.MONTH:
+                                            if (this.state.selectYear + 1 <= endDate.getFullYear()) {
+                                                this.setState({ ...this.state, selectYear: this.state.selectYear + 1 })
+                                            }
+                                            break
+                                        default:
+                                            const newDataVl = new Date(this.state.selectYear, this.state.selectMonth + 1, 1)
+                                            this.setState({ ...this.state, selectMonth: newDataVl.getMonth(), selectYear: newDataVl.getFullYear() })
+                                            break
+                                    }
+                                }}
+                            >
+                                <FontAwesomeIcon icon={faAngleRight} />
+                            </button>
+                            <button type='button'
+                                onClick={() => {
+                                    switch (this.state.type) {
+                                        case CalendarType.YEAR:
+                                            if (this.state.selectYear + 20 > endDate.getFullYear()) {
+                                                this.setState({ ...this.state, selectYear: endDate.getFullYear() })
+                                            } else {
+                                                this.setState({ ...this.state, selectYear: this.state.selectYear + 20 })
+                                            }
+                                            break
+                                        case CalendarType.MONTH:
+                                            if (this.state.selectYear + 10 < endDate.getFullYear()) {
+                                                this.setState({ ...this.state, selectYear: endDate.getFullYear() })
+                                            } else {
+                                                this.setState({ ...this.state, selectYear: this.state.selectYear + 10 })
+                                            }
+                                            break
+                                        default:
+                                            this.setState({ ...this.state, selectYear: this.state.selectYear + 1 })
+                                            break
+                                    }
+                                }}
+                            >
+                                <FontAwesomeIcon icon={faAngleDoubleRight} />
+                            </button>
+                        </div>
+                        <div className='picker-date-body row' >
+                            {this.state.type === CalendarType.YEAR ? this.showYearInRange() : this.state.type === CalendarType.MONTH ? this.showMonthInYear() : this.showDateInMonth()}
+                        </div>
+                    </div>
+                    {this.props.type === CalendarType.DATETIME ? <div className="picker-time-container col">
+                        <div className="heading-7">{this.state.selectHours < 10 ? `0${this.state.selectHours}` : this.state.selectHours}:{this.state.selectMinutes < 10 ? `0${this.state.selectMinutes}` : this.state.selectMinutes}:{this.state.selectSeconds < 10 ? `0${this.state.selectSeconds}` : this.state.selectSeconds}</div>
+                        <div className="row" style={{ alignItems: 'start', flex: 1, height: '100%' }}>
+                            <div className="scroll-picker-hours col">{Array.from({ length: 24 }).map((_, i) => <button type="button" onClick={() => {
+                                let newValue = this.state.value
+                                newValue.setHours(i)
+                                this.setState({ ...this.state, selectHours: i, value: newValue })
+                                if (this.props.onSelect) this.props.onSelect(newValue)
+                            }} key={`hours-${i}`} className={`label-4 ${this.state.selectHours === (i) ? 'selected' : ''}`} >{i < 10 ? `0${i}` : i}</button>)}</div>
+                            <div className="scroll-picker-minutes col">{Array.from({ length: 60 }).map((_, i) => <button type="button" onClick={() => {
+                                let newValue = this.state.value
+                                newValue.setMinutes(i)
+                                this.setState({ ...this.state, selectMinutes: i, value: newValue })
+                                if (this.props.onSelect) this.props.onSelect(newValue)
+                            }} key={`hours-${i}`} className={`label-4 ${this.state.selectMinutes === (i) ? 'selected' : ''}`} >{i < 10 ? `0${i}` : i}</button>)}</div>
+                            <div className="scroll-picker-seconds col">{Array.from({ length: 60 }).map((_, i) => <button type="button" onClick={() => {
+                                let newValue = this.state.value
+                                newValue.setSeconds(i)
+                                this.setState({ ...this.state, selectSeconds: i, value: newValue })
+                                if (this.props.onSelect) this.props.onSelect(newValue)
+                            }} key={`hours-${i}`} className={`label-4 ${this.state.selectSeconds === (i) ? 'selected' : ''}`} >{i < 10 ? `0${i}` : i}</button>)}</div>
+                        </div>
+                    </div> : null}
+                </div>
+                {this.props.footer}
+            </div>
+        </div>
+    }
+}

package/src/component/checkbox/checkbox.css

@@ -0,0 +1,46 @@
+.checkbox-container {
+    position: relative;
+    border-radius: 0.4rem;
+    border: 1px solid #00358033;
+    background-color: var(--infor-color);
+    transition: border, background-color 0.5s;
+    cursor: pointer;
+}
+
+.checkbox-container:not(*:has(> input:checked)) {
+    background-color: transparent !important;
+}
+
+.checkbox-container>input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+}
+
+.checkbox-container>svg {
+    width: 100%;
+    height: 100%;
+    visibility: hidden;
+    opacity: 0 !important;
+    transition: visibility, opacity 0.5s;
+}
+
+.checkbox-container>input:checked~svg {
+    visibility: visible;
+    opacity: 1 !important;
+}
+
+.checkbox-container:has(> input:checked) {
+    border: none !important;
+}
+
+.checkbox-container:has(> input:disabled)  {
+    background-color: var(--disabled-background) !important;
+    border: 1px solid #00358033 !important;
+}
+
+.checkbox-container:has(> input:disabled) > svg > path {
+    stroke: #00204D40 !important;
+}

package/src/component/checkbox/checkbox.tsx

@@ -0,0 +1,59 @@
+import React, { CSSProperties } from 'react';
+import './checkbox.css';
+
+interface CheckboxProps {
+    onChange?: (value: boolean) => void,
+    value?: boolean,
+    checkColor?: string,
+    disabled?: false,
+    style?: CSSProperties,
+    /** default 2.4rem **/ 
+    size?: number | string,
+}
+
+interface CheckboxState {
+    value?: boolean,
+}
+
+export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
+    state: Readonly<CheckboxState> = {
+        value: this.props.value ?? false
+    }
+
+    componentDidUpdate(prevProps: Readonly<CheckboxProps>): void {
+        if (prevProps.value !== this.props.value) {
+            this.setState({ value: this.props.value })
+        }
+    }
+
+    render() {
+        let convertStyle: CSSProperties = {
+            width: this.props.size ?? '2.4rem',
+            height: this.props.size ?? '2.4rem',
+        }
+        if (this.props.style) {
+            delete this.props.style.width
+            delete this.props.style.minWidth
+            delete this.props.style.maxWidth
+            delete this.props.style.height
+            delete this.props.style.minHeight
+            delete this.props.style.maxHeight
+            convertStyle = {
+                ...this.props.style,
+                ...convertStyle
+            }
+        }
+        return <label className="checkbox-container row" style={convertStyle} >
+            <input type="checkbox" checked={this.state.value} disabled={this.props.disabled}
+                onChange={() => {
+                    const newValue = !this.state.value
+                    this.setState({ value: newValue })
+                    if (this.props.onChange) this.props.onChange(newValue)
+                }}
+            />
+            <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" >
+                <path d="M6.72 11.52 L10.8 15.6 L18 7.2" fill="none" strokeLinecap="round" stroke={this.props.checkColor ?? '#ffffff'} />
+            </svg>
+        </label>
+    }
+}

package/src/component/component-status.tsx

@@ -0,0 +1,53 @@
+import React from "react"
+
+export const enum ComponentStatus {
+    INFOR = 1,
+    ERROR = 2,
+    WARNING = 3,
+    SUCCSESS = 4,
+}
+
+export const getStatusIcon = (status: ComponentStatus) => {
+    switch (status) {
+        case ComponentStatus.ERROR:
+            return errorSvg
+        case ComponentStatus.WARNING:
+            return warningSvg
+        case ComponentStatus.SUCCSESS:
+            return successSvg
+        default:
+            return inforSvg
+    }
+}
+
+const inforSvg = (
+    <div style={{ width: '3.6rem', height: '3.6rem' }}>
+        <svg width='100%' height='100%' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg' >
+            <path d='M18.0003 3.41669C15.116 3.41669 12.2965 4.27198 9.89826 5.87442C7.50005 7.47686 5.63087 9.75446 4.52709 12.4192C3.42331 15.084 3.13451 18.0162 3.69721 20.8451C4.25991 23.674 5.64884 26.2725 7.68836 28.312C9.72787 30.3515 12.3264 31.7404 15.1553 32.3031C17.9842 32.8658 20.9164 32.577 23.5811 31.4733C26.2459 30.3695 28.5235 28.5003 30.1259 26.1021C31.7284 23.7039 32.5837 20.8843 32.5837 18C32.5795 14.1336 31.0417 10.4267 28.3077 7.69266C25.5737 4.95867 21.8668 3.42087 18.0003 3.41669V3.41669ZM19.2496 26.1715H16.7401V15.5695H19.2496V26.1715ZM19.0418 12.2384C18.9034 12.3653 18.7407 12.463 18.5637 12.5256C18.3866 12.5883 18.1987 12.6146 18.0113 12.603C17.8204 12.6157 17.6289 12.5899 17.4481 12.5273C17.2673 12.4647 17.101 12.3664 16.9588 12.2384C16.8333 12.1032 16.7363 11.9441 16.6737 11.7706C16.611 11.5971 16.584 11.4127 16.5943 11.2285C16.5815 11.04 16.6073 10.8509 16.67 10.6727C16.7327 10.4945 16.8309 10.3309 16.9588 10.1919C17.1013 10.0644 17.2678 9.96649 17.4484 9.9039C17.6291 9.84131 17.8204 9.81526 18.0113 9.82728C18.1987 9.81637 18.3864 9.843 18.5633 9.90561C18.7403 9.96822 18.903 10.0655 19.0418 10.1919C19.1697 10.3309 19.268 10.4945 19.3307 10.6727C19.3934 10.8509 19.4191 11.04 19.4064 11.2285C19.4166 11.4127 19.3896 11.5971 19.327 11.7706C19.2644 11.9441 19.1674 12.1032 19.0418 12.2384Z' fill='#366AE2' />
+        </svg>
+    </div>
+)
+
+const errorSvg = (
+    <div style={{ width: '3.6rem', height: '3.6rem' }}>
+        <svg width='100%' height='100%' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg' >
+            <path d='M18.0003 3.41669C15.116 3.41669 12.2965 4.27198 9.89826 5.87442C7.50005 7.47686 5.63087 9.75446 4.52709 12.4192C3.42331 15.084 3.13451 18.0162 3.69721 20.8451C4.25991 23.674 5.64884 26.2725 7.68836 28.312C9.72787 30.3515 12.3264 31.7404 15.1553 32.3031C17.9842 32.8658 20.9164 32.577 23.5811 31.4733C26.2459 30.3695 28.5235 28.5003 30.1259 26.1021C31.7284 23.7039 32.5837 20.8843 32.5837 18C32.5724 14.1357 31.0324 10.4329 28.2999 7.70044C25.5674 4.96797 21.8646 3.42791 18.0003 3.41669V3.41669ZM24.016 22.2972L22.2976 24.0156L18.0003 19.7184L13.7031 24.0156L11.9847 22.2972L16.2819 18L11.9847 13.7028L13.7031 11.9844L18.0003 16.2816L22.2976 11.9844L24.016 13.7028L19.7187 18L24.016 22.2972Z' fill='#E14337' />
+        </svg>
+    </div>
+)
+
+const warningSvg = (
+    <div style={{ width: '3.6rem', height: '3.6rem' }}>
+        <svg width='100%' height='100%' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg' >
+            <path d='M32.1516 25.8877L21.3215 5.41379C21.0014 4.81074 20.5231 4.30622 19.938 3.95437C19.3529 3.60252 18.6831 3.41663 18.0003 3.41663C17.3176 3.41663 16.6477 3.60252 16.0626 3.95437C15.4775 4.30622 14.9993 4.81074 14.6792 5.41379L3.84901 25.8877C3.54781 26.459 3.39954 27.0984 3.41863 27.744C3.43771 28.3895 3.6235 29.0191 3.95793 29.5716C4.29235 30.1241 4.76404 30.5806 5.32713 30.8969C5.89022 31.2131 6.52555 31.3783 7.17136 31.3763H28.8293C29.4751 31.3783 30.1104 31.2131 30.6735 30.8969C31.2366 30.5806 31.7083 30.1241 32.0427 29.5716C32.3771 29.0191 32.5629 28.3895 32.582 27.744C32.6011 27.0984 32.4528 26.459 32.1516 25.8877ZM18.0003 27.7294C17.6397 27.7294 17.2871 27.6224 16.9873 27.4221C16.6874 27.2217 16.4537 26.9369 16.3157 26.6037C16.1776 26.2705 16.1415 25.9039 16.2119 25.5502C16.2823 25.1965 16.4559 24.8715 16.7109 24.6165C16.966 24.3615 17.2909 24.1878 17.6446 24.1175C17.9983 24.0471 18.3649 24.0832 18.6981 24.2212C19.0313 24.3593 19.3161 24.593 19.5165 24.8928C19.7168 25.1927 19.8238 25.5453 19.8238 25.9059C19.8238 26.3895 19.6317 26.8533 19.2897 27.1953C18.9477 27.5373 18.4839 27.7294 18.0003 27.7294ZM19.216 21.6512H16.7847L16.1769 11.926H19.8238L19.216 21.6512Z' fill='#FC6B03' />
+        </svg>
+    </div>
+)
+
+const successSvg = (
+    <div style={{ width: '3.6rem', height: '3.6rem' }}>
+        <svg width='100%' height='100%' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg' >
+            <path d='M18.0003 3.41669C15.116 3.41669 12.2965 4.27198 9.89826 5.87442C7.50005 7.47686 5.63087 9.75446 4.52709 12.4192C3.42331 15.084 3.13451 18.0162 3.69721 20.8451C4.25991 23.674 5.64884 26.2725 7.68836 28.312C9.72787 30.3515 12.3264 31.7404 15.1553 32.3031C17.9842 32.8658 20.9164 32.577 23.5811 31.4733C26.2459 30.3695 28.5235 28.5003 30.1259 26.1021C31.7284 23.7039 32.5837 20.8843 32.5837 18C32.5724 14.1357 31.0324 10.4329 28.2999 7.70044C25.5674 4.96797 21.8646 3.42791 18.0003 3.41669V3.41669ZM15.5698 24.5795L8.99026 18L10.7087 16.2816L15.5698 21.1427L25.292 11.4205L27.0104 13.1389L15.5698 24.5795Z' fill='#39AC6D' />
+        </svg>
+    </div>
+)