J M Rossy
2 months ago
parent
5bf09c83df
commit
ae86d66061
@ -1,7 +0,0 @@ |
||||
import LeftArrow from '../../images/icons/arrow-left-circle.svg'; |
||||
|
||||
import { IconButton, IconButtonProps } from './IconButton'; |
||||
|
||||
export function BackButton(props: IconButtonProps) { |
||||
return <IconButton imgSrc={LeftArrow} title="Go back" {...props} />; |
||||
} |
||||
@ -1,49 +0,0 @@ |
||||
import Image from 'next/image'; |
||||
import { PropsWithChildren } from 'react'; |
||||
|
||||
export interface IconButtonProps { |
||||
width?: number; |
||||
height?: number; |
||||
classes?: string; |
||||
onClick?: () => void; |
||||
disabled?: boolean; |
||||
imgSrc?: any; |
||||
title?: string; |
||||
type?: 'button' | 'submit'; |
||||
passThruProps?: any; |
||||
} |
||||
|
||||
export function IconButton(props: PropsWithChildren<IconButtonProps>) { |
||||
const { |
||||
width, |
||||
height, |
||||
classes, |
||||
onClick, |
||||
imgSrc, |
||||
disabled, |
||||
title, |
||||
type, |
||||
children, |
||||
passThruProps, |
||||
} = props; |
||||
|
||||
const base = 'flex items-center justify-center transition-all'; |
||||
const onHover = 'hover:opacity-70'; |
||||
const onDisabled = 'disabled:opacity-50'; |
||||
const onActive = 'active:opacity-60'; |
||||
const allClasses = `${base} ${onHover} ${onDisabled} ${onActive} ${classes}`; |
||||
|
||||
return ( |
||||
<button |
||||
onClick={onClick} |
||||
type={type || 'button'} |
||||
disabled={disabled ?? false} |
||||
title={title} |
||||
className={allClasses} |
||||
{...passThruProps} |
||||
> |
||||
<Image src={imgSrc} alt={title?.substring(0, 4) || ''} width={width} height={height} /> |
||||
{children} |
||||
</button> |
||||
); |
||||
} |
||||
@ -1,21 +0,0 @@ |
||||
import { memo } from 'react'; |
||||
|
||||
import X from '../../images/icons/x.svg'; |
||||
|
||||
import { IconButton } from './IconButton'; |
||||
|
||||
function _XIconButton({ |
||||
onClick, |
||||
title, |
||||
size = 20, |
||||
}: { |
||||
onClick: () => void; |
||||
title?: string; |
||||
size?: number; |
||||
}) { |
||||
return ( |
||||
<IconButton imgSrc={X} title={title || 'Close'} width={size} height={size} onClick={onClick} /> |
||||
); |
||||
} |
||||
|
||||
export const XIconButton = memo(_XIconButton); |
||||
@ -1,134 +0,0 @@ |
||||
import { memo } from 'react'; |
||||
|
||||
import { Color } from '../../styles/Color'; |
||||
|
||||
interface Props { |
||||
width?: string | number; |
||||
height?: string | number; |
||||
direction: 'n' | 'e' | 's' | 'w'; |
||||
color?: string; |
||||
classes?: string; |
||||
} |
||||
|
||||
function _ChevronIcon({ width, height, direction, color, classes }: Props) { |
||||
let directionClass; |
||||
switch (direction) { |
||||
case 'n': |
||||
directionClass = 'rotate-180'; |
||||
break; |
||||
case 'e': |
||||
directionClass = '-rotate-90'; |
||||
break; |
||||
case 's': |
||||
directionClass = ''; |
||||
break; |
||||
case 'w': |
||||
directionClass = 'rotate-90'; |
||||
break; |
||||
default: |
||||
throw new Error(`Invalid chevron direction ${direction}`); |
||||
} |
||||
|
||||
return ( |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
width={width} |
||||
height={height} |
||||
viewBox="0 0 14 8" |
||||
className={`${directionClass} ${classes}`} |
||||
> |
||||
<path |
||||
d="M1 1l6 6 6-6" |
||||
strokeWidth="2" |
||||
stroke={color || Color.black} |
||||
fill="none" |
||||
fillRule="evenodd" |
||||
strokeLinecap="round" |
||||
strokeLinejoin="round" |
||||
/> |
||||
</svg> |
||||
); |
||||
} |
||||
|
||||
export const ChevronIcon = memo(_ChevronIcon); |
||||
|
||||
interface Props { |
||||
width?: string | number; |
||||
height?: string | number; |
||||
direction: 'n' | 'e' | 's' | 'w'; |
||||
color?: string; |
||||
classes?: string; |
||||
} |
||||
|
||||
function _HyperlaneChevron({ width, height, direction, color, classes }: Props) { |
||||
let directionClass; |
||||
switch (direction) { |
||||
case 'n': |
||||
directionClass = '-rotate-90'; |
||||
break; |
||||
case 'e': |
||||
directionClass = ''; |
||||
break; |
||||
case 's': |
||||
directionClass = 'rotate-90'; |
||||
break; |
||||
case 'w': |
||||
directionClass = 'rotate-180'; |
||||
break; |
||||
default: |
||||
throw new Error(`Invalid chevron direction ${direction}`); |
||||
} |
||||
|
||||
return ( |
||||
<svg |
||||
fill="none" |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
viewBox="1.2 1 139.1 322" |
||||
width={width} |
||||
height={height} |
||||
className={`${directionClass} ${classes}`} |
||||
> |
||||
<path |
||||
d="M6.3 1h61.3a20 20 0 0 1 18.7 13L140 158.3a5 5 0 0 1 0 3.4l-.3.9-53.5 147.2A20 20 0 0 1 67.4 323H6.2a5 5 0 0 1-4.7-6.6l55.2-158.1L1.7 7.7A5 5 0 0 1 6.2 1Z" |
||||
fill={color || Color.blue} |
||||
></path> |
||||
</svg> |
||||
); |
||||
} |
||||
|
||||
export const HyperlaneChevron = memo(_HyperlaneChevron); |
||||
|
||||
function _HyperlaneWideChevron({ width, height, direction, color, classes }: Props) { |
||||
let directionClass; |
||||
switch (direction) { |
||||
case 'n': |
||||
directionClass = '-rotate-90'; |
||||
break; |
||||
case 'e': |
||||
directionClass = ''; |
||||
break; |
||||
case 's': |
||||
directionClass = 'rotate-90'; |
||||
break; |
||||
case 'w': |
||||
directionClass = 'rotate-180'; |
||||
break; |
||||
default: |
||||
throw new Error(`Invalid chevron direction ${direction}`); |
||||
} |
||||
|
||||
return ( |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
viewBox="0 0 120.3 190" |
||||
width={width} |
||||
height={height} |
||||
className={`${directionClass} ${classes}`} |
||||
fill={color || Color.blue} |
||||
> |
||||
<path d="M4.4 0h53c7.2 0 13.7 3 16.2 7.7l46.5 85.1a2 2 0 0 1 0 2l-.2.5-46.3 87c-2.5 4.6-9 7.7-16.3 7.7h-53c-3 0-5-2-4-4L48 92.9.4 4c-1-2 1-4 4-4Z" /> |
||||
</svg> |
||||
); |
||||
} |
||||
|
||||
export const HyperlaneWideChevron = memo(_HyperlaneWideChevron); |
||||
@ -1,38 +0,0 @@ |
||||
import { memo } from 'react'; |
||||
|
||||
function _HyperlaneLogo({ |
||||
width, |
||||
height, |
||||
fill, |
||||
className = '', |
||||
}: { |
||||
width?: number | string; |
||||
height?: number | string; |
||||
fill?: string; |
||||
className?: string; |
||||
}) { |
||||
return ( |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
width={width} |
||||
height={height} |
||||
className={className} |
||||
viewBox="0 0 117 118" |
||||
> |
||||
<path |
||||
d="M64.4787 0H88.4134C91.6788 0 94.6004 1.89614 95.7403 4.7553L116.749 57.4498C116.911 57.8563 116.913 58.3035 116.754 58.7112L116.637 59.014L116.635 59.017L95.7152 112.81C94.5921 115.698 91.6551 117.62 88.3666 117.62H64.4355C63.0897 117.62 62.1465 116.379 62.59 115.192L84.1615 57.4498L62.6428 2.45353C62.1766 1.26188 63.1208 0 64.4787 0Z" |
||||
fill={fill} |
||||
/> |
||||
<path |
||||
d="M1.99945 0H25.9342C29.1996 0 32.1211 1.89614 33.261 4.7553L54.2696 57.4498C54.4316 57.8563 54.4336 58.3035 54.275 58.7112L54.1573 59.014L54.1561 59.017L33.236 112.81C32.1129 115.698 29.1759 117.62 25.8874 117.62H1.95626C0.610483 117.62 -0.332722 116.379 0.110804 115.192L21.6823 57.4498L0.163626 2.45353C-0.302638 1.26188 0.641544 0 1.99945 0Z" |
||||
fill={fill} |
||||
/> |
||||
<path |
||||
d="M80.7202 46.2178H46.9324V71.7089H80.7202L86.2411 58.5992L80.7202 46.2178Z" |
||||
fill={fill} |
||||
/> |
||||
</svg> |
||||
); |
||||
} |
||||
|
||||
export const HyperlaneLogo = memo(_HyperlaneLogo); |
||||
@ -1,31 +0,0 @@ |
||||
import { memo } from 'react'; |
||||
|
||||
function _XIcon({ |
||||
width, |
||||
height, |
||||
fill, |
||||
className = '', |
||||
}: { |
||||
width?: number | string; |
||||
height?: number | string; |
||||
fill?: string; |
||||
className?: string; |
||||
}) { |
||||
return ( |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
width={width} |
||||
height={height} |
||||
className={className} |
||||
viewBox="20.24 19.95 56.33 56.24" |
||||
> |
||||
<path |
||||
fill={fill} |
||||
d="M27.73 76.19a7.5 7.5 0 0 1-5.3-12.8l41.34-41.34a7.5 7.5 0 0 1 10.6 10.61L33 74a7.48 7.48 0 0 1-5.27 2.19Z" |
||||
/> |
||||
<path d="M69.07 76.19a7.48 7.48 0 0 1-5.3-2.2L22.43 32.66A7.5 7.5 0 0 1 33 22.05l41.37 41.34a7.5 7.5 0 0 1-5.3 12.8Z" /> |
||||
</svg> |
||||
); |
||||
} |
||||
|
||||
export const XIcon = memo(_XIcon); |
||||
@ -1,33 +0,0 @@ |
||||
.checkbox { |
||||
appearance: none; |
||||
background-color: #fff; |
||||
margin: 0; |
||||
width: 0.9rem; |
||||
height: 0.9rem; |
||||
border: 2px solid #1f2937; |
||||
border-radius: 0.2rem; |
||||
transform: translateY(-0.075em); |
||||
display: grid; |
||||
place-content: center; |
||||
cursor: pointer; |
||||
transition: 200ms all ease-in-out; |
||||
} |
||||
|
||||
.checkbox::before { |
||||
content: ''; |
||||
width: 0.9rem; |
||||
height: 0.9rem; |
||||
border-radius: 0.2rem; |
||||
transform: scale(0); |
||||
transition: 200ms all ease-in-out; |
||||
background-color: #2362c0; |
||||
} |
||||
|
||||
.checkbox:checked::before { |
||||
transform: scale(1); |
||||
} |
||||
|
||||
.checkbox:disabled { |
||||
border-color: #bbb; |
||||
cursor: not-allowed; |
||||
} |
||||
@ -1,28 +0,0 @@ |
||||
import React from 'react'; |
||||
|
||||
import styles from './Checkbox.module.css'; |
||||
|
||||
interface Props { |
||||
checked: boolean; |
||||
onToggle: (c: boolean) => void; |
||||
name?: string; |
||||
} |
||||
|
||||
export function CheckBox({ checked, onToggle, name, children }: React.PropsWithChildren<Props>) { |
||||
const onChange = () => { |
||||
onToggle(!checked); |
||||
}; |
||||
|
||||
return ( |
||||
<label className="flex items-center cursor-pointer hover:opacity-80"> |
||||
<input |
||||
type="checkbox" |
||||
name={name} |
||||
checked={checked} |
||||
onChange={onChange} |
||||
className={styles.checkbox} |
||||
/> |
||||
{children} |
||||
</label> |
||||
); |
||||
} |
||||
@ -1,11 +0,0 @@ |
||||
import { Field } from 'formik'; |
||||
import { ComponentProps } from 'react'; |
||||
|
||||
export function TextField(props: ComponentProps<typeof Field>) { |
||||
return ( |
||||
<Field |
||||
className="w-100 mt-2 p-2 text-sm border border-color-gray-800 rounded focus:outline-none" |
||||
{...props} |
||||
/> |
||||
); |
||||
} |
||||
Loading…
Reference in new issue