feat(admin,admin-ui,medusa): Add Medusa Admin plugin (#3334)
This commit is contained in:
Kasper Fabricius Kristensen
committed by
GitHub
GitHub
parent
d6b1ad1ccd
commit
40de54b010
@@ -0,0 +1,62 @@
|
||||
import * as RadixAvatar from "@radix-ui/react-avatar"
|
||||
import clsx from "clsx"
|
||||
import React from "react"
|
||||
import Spinner from "../spinner"
|
||||
|
||||
type AvatarProps = {
|
||||
user?: {
|
||||
img?: string
|
||||
first_name?: string
|
||||
last_name?: string
|
||||
email?: string
|
||||
}
|
||||
font?: string
|
||||
color?: string
|
||||
isLoading?: boolean
|
||||
}
|
||||
|
||||
const Avatar: React.FC<AvatarProps> = ({
|
||||
user,
|
||||
font = "inter-small-semibold",
|
||||
color = "bg-violet-60",
|
||||
isLoading = false,
|
||||
}) => {
|
||||
let username: string
|
||||
|
||||
if (user?.first_name && user?.last_name) {
|
||||
username = user.first_name + " " + user.last_name
|
||||
} else if (user?.email) {
|
||||
username = user.email
|
||||
} else {
|
||||
username = "Medusa user"
|
||||
}
|
||||
|
||||
return (
|
||||
<RadixAvatar.Root
|
||||
className={clsx(
|
||||
"w-full h-full items-center justify-center overflow-hidden select-none rounded-circle",
|
||||
color
|
||||
)}
|
||||
>
|
||||
<RadixAvatar.Image
|
||||
src={user?.img}
|
||||
alt={username}
|
||||
className="object-cover w-full h-full rounded-circle"
|
||||
/>
|
||||
<RadixAvatar.Fallback
|
||||
className={clsx(
|
||||
"w-full h-full flex items-center justify-center bg-inherit text-grey-0 rounded-circle",
|
||||
font
|
||||
)}
|
||||
>
|
||||
{isLoading ? (
|
||||
<Spinner size="small" variant="primary" />
|
||||
) : (
|
||||
username.slice(0, 1).toUpperCase()
|
||||
)}
|
||||
</RadixAvatar.Fallback>
|
||||
</RadixAvatar.Root>
|
||||
)
|
||||
}
|
||||
|
||||
export default Avatar
|
||||
@@ -0,0 +1,29 @@
|
||||
import clsx from "clsx"
|
||||
import React from "react"
|
||||
import { useNavigate } from "react-router-dom"
|
||||
import ArrowLeftIcon from "../../fundamentals/icons/arrow-left-icon"
|
||||
|
||||
type Props = {
|
||||
path?: string
|
||||
label?: string
|
||||
className?: string
|
||||
}
|
||||
|
||||
const BackButton = ({ path, label = "Go back", className }: Props) => {
|
||||
const navigate = useNavigate()
|
||||
return (
|
||||
<button
|
||||
onClick={() => {
|
||||
path ? navigate(path) : navigate(-1)
|
||||
}}
|
||||
className={clsx("px-small py-xsmall", className)}
|
||||
>
|
||||
<div className="flex items-center gap-x-xsmall text-grey-50 inter-grey-40 inter-small-semibold">
|
||||
<ArrowLeftIcon size={20} />
|
||||
<span className="ml-1">{label}</span>
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
export default BackButton
|
||||
@@ -0,0 +1,32 @@
|
||||
import clsx from "clsx"
|
||||
import React, { ReactNode, useImperativeHandle } from "react"
|
||||
|
||||
export type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> & {
|
||||
label: ReactNode
|
||||
}
|
||||
|
||||
const Checkbox = React.forwardRef(
|
||||
({ label, value, className, id, ...rest }: CheckboxProps, ref) => {
|
||||
const checkboxRef = React.useRef<HTMLInputElement>(null)
|
||||
|
||||
useImperativeHandle(ref, () => checkboxRef.current)
|
||||
return (
|
||||
<label
|
||||
className={clsx("flex items-center cursor-pointer", className)}
|
||||
htmlFor={id}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
ref={checkboxRef}
|
||||
className="form-checkbox w-[20px] h-[20px] rounded-base text-violet-60 focus:ring-0 mr-small border-grey-30"
|
||||
value={value}
|
||||
id={id}
|
||||
{...rest}
|
||||
/>
|
||||
{label}
|
||||
</label>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
export default Checkbox
|
||||
@@ -0,0 +1,58 @@
|
||||
import clsx from "clsx"
|
||||
import React, { useEffect } from "react"
|
||||
import useClipboard from "../../../hooks/use-clipboard"
|
||||
import useNotification from "../../../hooks/use-notification"
|
||||
import Button from "../../fundamentals/button"
|
||||
import ClipboardCopyIcon from "../../fundamentals/icons/clipboard-copy-icon"
|
||||
|
||||
type CopyToClipboardProps = {
|
||||
value: string
|
||||
displayValue?: string
|
||||
successDuration?: number
|
||||
showValue?: boolean
|
||||
iconSize?: number
|
||||
onCopy?: () => void
|
||||
}
|
||||
|
||||
const CopyToClipboard: React.FC<CopyToClipboardProps> = ({
|
||||
value,
|
||||
displayValue,
|
||||
successDuration = 3000,
|
||||
showValue = true,
|
||||
iconSize = 20,
|
||||
onCopy = () => {},
|
||||
}) => {
|
||||
const [isCopied, handleCopy] = useClipboard(value, {
|
||||
onCopied: onCopy,
|
||||
successDuration: successDuration,
|
||||
})
|
||||
const notification = useNotification()
|
||||
|
||||
useEffect(() => {
|
||||
if (isCopied) {
|
||||
notification("Success", "Copied!", "success")
|
||||
}
|
||||
}, [isCopied])
|
||||
|
||||
return (
|
||||
<div className="flex items-center inter-small-regular text-grey-50 gap-x-xsmall">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="small"
|
||||
className={clsx("p-0 text-grey-50", {
|
||||
["text-violet-60"]: isCopied,
|
||||
})}
|
||||
onClick={handleCopy}
|
||||
>
|
||||
<ClipboardCopyIcon size={iconSize} />
|
||||
</Button>
|
||||
{showValue && (
|
||||
<span className="w-full truncate">
|
||||
{displayValue ? displayValue : value}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CopyToClipboard
|
||||
@@ -0,0 +1,44 @@
|
||||
import { ReactDatePickerCustomHeaderProps } from "react-datepicker"
|
||||
import NativeSelect from "../../molecules/native-select"
|
||||
import { getYearRange, monthNames } from "./utils"
|
||||
|
||||
const CustomHeader = ({
|
||||
date,
|
||||
changeYear,
|
||||
changeMonth,
|
||||
}: ReactDatePickerCustomHeaderProps) => {
|
||||
const month = date.getMonth()
|
||||
const monthName = monthNames[month]
|
||||
|
||||
const year = date.getFullYear()
|
||||
return (
|
||||
<div className="flex w-full gap-4 items-center">
|
||||
<div className="flex flex-1 items-center justify-end gap-3">
|
||||
<NativeSelect
|
||||
defaultValue={monthName}
|
||||
onValueChange={(v) => changeMonth(monthNames.indexOf(v))}
|
||||
>
|
||||
{monthNames.map((month) => (
|
||||
<NativeSelect.Item key={month} value={month}>
|
||||
{month}
|
||||
</NativeSelect.Item>
|
||||
))}
|
||||
</NativeSelect>
|
||||
</div>
|
||||
<div className="flex flex-1 items-center justify-start gap-3">
|
||||
<NativeSelect
|
||||
defaultValue={year.toString()}
|
||||
onValueChange={(v) => changeYear(parseInt(v, 10))}
|
||||
>
|
||||
{getYearRange().map((year) => (
|
||||
<NativeSelect.Item key={year} value={year.toString()}>
|
||||
{year.toString()}
|
||||
</NativeSelect.Item>
|
||||
))}
|
||||
</NativeSelect>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CustomHeader
|
||||
@@ -0,0 +1,115 @@
|
||||
import * as PopoverPrimitive from "@radix-ui/react-popover"
|
||||
import clsx from "clsx"
|
||||
import moment from "moment"
|
||||
import React, { useEffect, useState } from "react"
|
||||
import ReactDatePicker from "react-datepicker"
|
||||
import "react-datepicker/dist/react-datepicker.css"
|
||||
import Button from "../../fundamentals/button"
|
||||
import ArrowDownIcon from "../../fundamentals/icons/arrow-down-icon"
|
||||
import InputContainer from "../../fundamentals/input-container"
|
||||
import InputHeader from "../../fundamentals/input-header"
|
||||
import CustomHeader from "./custom-header"
|
||||
import { DateTimePickerProps } from "./types"
|
||||
|
||||
const getDateClassname = (d, tempDate) => {
|
||||
return moment(d).format("YY,MM,DD") === moment(tempDate).format("YY,MM,DD")
|
||||
? "date chosen"
|
||||
: `date ${
|
||||
moment(d).format("YY,MM,DD") < moment(new Date()).format("YY,MM,DD")
|
||||
? "past"
|
||||
: ""
|
||||
}`
|
||||
}
|
||||
|
||||
const DatePicker: React.FC<DateTimePickerProps> = ({
|
||||
date,
|
||||
onSubmitDate,
|
||||
label = "start date",
|
||||
required = false,
|
||||
tooltipContent,
|
||||
tooltip,
|
||||
}) => {
|
||||
const [tempDate, setTempDate] = useState(date)
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
|
||||
useEffect(() => setTempDate(date), [isOpen])
|
||||
|
||||
const submitDate = () => {
|
||||
// update only date, month and year
|
||||
const newDate = new Date(date.getTime())
|
||||
newDate.setUTCDate(tempDate.getUTCDate())
|
||||
newDate.setUTCMonth(tempDate.getUTCMonth())
|
||||
newDate.setUTCFullYear(tempDate.getUTCFullYear())
|
||||
|
||||
onSubmitDate(newDate)
|
||||
setIsOpen(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>
|
||||
<PopoverPrimitive.Trigger asChild>
|
||||
<button
|
||||
className={clsx("w-full rounded-rounded border ", {
|
||||
"shadow-input border-violet-60": isOpen,
|
||||
"border-grey-20": !isOpen,
|
||||
})}
|
||||
>
|
||||
<InputContainer className="border-0 shadown-none focus-within:shadow-none">
|
||||
<div className="w-full flex text-grey-50 pr-0.5 justify-between">
|
||||
<InputHeader
|
||||
{...{
|
||||
label,
|
||||
required,
|
||||
tooltipContent,
|
||||
tooltip,
|
||||
}}
|
||||
/>
|
||||
<ArrowDownIcon size={16} />
|
||||
</div>
|
||||
<label className="w-full text-left">
|
||||
{moment(date).format("ddd, DD MMM YYYY")}
|
||||
</label>
|
||||
</InputContainer>
|
||||
</button>
|
||||
</PopoverPrimitive.Trigger>
|
||||
<PopoverPrimitive.Content
|
||||
side="top"
|
||||
sideOffset={8}
|
||||
className="rounded-rounded px-8 border border-grey-20 bg-grey-0 w-full shadow-dropdown"
|
||||
>
|
||||
<CalendarComponent date={tempDate} onChange={setTempDate} />
|
||||
<div className="flex w-full mb-8 mt-5">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="medium"
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="mr-2 w-1/3 flex justify-center border border-grey-20"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
size="medium"
|
||||
variant="primary"
|
||||
onClick={() => submitDate()}
|
||||
className="w-2/3 flex justify-center"
|
||||
>{`Set ${label}`}</Button>
|
||||
</div>
|
||||
</PopoverPrimitive.Content>
|
||||
</PopoverPrimitive.Root>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const CalendarComponent = ({ date, onChange }) => (
|
||||
<ReactDatePicker
|
||||
selected={date}
|
||||
inline
|
||||
onChange={onChange}
|
||||
calendarClassName="date-picker"
|
||||
dayClassName={(d) => getDateClassname(d, date)}
|
||||
renderCustomHeader={({ ...props }) => <CustomHeader {...props} />}
|
||||
/>
|
||||
)
|
||||
|
||||
export default DatePicker
|
||||
@@ -0,0 +1,102 @@
|
||||
import * as PopoverPrimitive from "@radix-ui/react-popover"
|
||||
import clsx from "clsx"
|
||||
import { isNil } from "lodash"
|
||||
import moment from "moment"
|
||||
import React, { useEffect, useState } from "react"
|
||||
import ArrowDownIcon from "../../fundamentals/icons/arrow-down-icon"
|
||||
import ClockIcon from "../../fundamentals/icons/clock-icon"
|
||||
import InputContainer from "../../fundamentals/input-container"
|
||||
import InputHeader from "../../fundamentals/input-header"
|
||||
import NumberScroller from "../number-scroller"
|
||||
import { DateTimePickerProps } from "./types"
|
||||
|
||||
const TimePicker: React.FC<DateTimePickerProps> = ({
|
||||
date,
|
||||
onSubmitDate,
|
||||
label = "start date",
|
||||
required = false,
|
||||
tooltipContent,
|
||||
tooltip,
|
||||
}) => {
|
||||
const [selectedMinute, setSelectedMinute] = useState(
|
||||
new Date(date)?.getUTCMinutes()
|
||||
)
|
||||
const [selectedHour, setSelectedHour] = useState(
|
||||
new Date(date)?.getUTCHours()
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedMinute(new Date(date)?.getUTCMinutes())
|
||||
setSelectedHour(new Date(date)?.getUTCHours())
|
||||
}, [date])
|
||||
|
||||
useEffect(() => {
|
||||
if (date && !isNil(selectedHour) && !isNil(selectedMinute)) {
|
||||
const newDate = new Date(new Date(date).getTime())
|
||||
newDate.setUTCHours(selectedHour)
|
||||
newDate.setUTCMinutes(selectedMinute)
|
||||
onSubmitDate(newDate)
|
||||
}
|
||||
}, [selectedMinute, selectedHour])
|
||||
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
|
||||
const minuteNumbers = [...Array(60).keys()]
|
||||
const hourNumbers = [...Array(24).keys()]
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>
|
||||
<PopoverPrimitive.Trigger asChild>
|
||||
<button
|
||||
className={clsx("w-full rounded-rounded border ", {
|
||||
"shadow-input border-violet-60": isOpen,
|
||||
"border-grey-20": !isOpen,
|
||||
})}
|
||||
>
|
||||
<InputContainer className="border-0 shadown-none focus-within:shadow-none">
|
||||
<div className="w-full flex text-grey-50 pr-0.5 justify-between">
|
||||
<InputHeader
|
||||
{...{
|
||||
label,
|
||||
required,
|
||||
tooltipContent,
|
||||
tooltip,
|
||||
}}
|
||||
/>
|
||||
<ArrowDownIcon size={16} />
|
||||
</div>
|
||||
<div className="w-full items-center flex text-left text-grey-40">
|
||||
<ClockIcon size={16} />
|
||||
<span className="mx-1">UTC</span>
|
||||
<span className="text-grey-90">
|
||||
{moment.utc(date).format("HH:mm")}
|
||||
</span>
|
||||
</div>
|
||||
</InputContainer>
|
||||
</button>
|
||||
</PopoverPrimitive.Trigger>
|
||||
<PopoverPrimitive.Content
|
||||
side="top"
|
||||
sideOffset={8}
|
||||
className="rounded-rounded scrollbar-hide border px-6 pt-6 pb-4 border-grey-20 bg-grey-0 w-full flex shadow-dropdown"
|
||||
>
|
||||
<NumberScroller
|
||||
numbers={hourNumbers}
|
||||
selected={selectedHour}
|
||||
onSelect={(n) => setSelectedHour(n)}
|
||||
className="pr-4"
|
||||
/>
|
||||
<NumberScroller
|
||||
numbers={minuteNumbers}
|
||||
selected={selectedMinute}
|
||||
onSelect={(n) => setSelectedMinute(n)}
|
||||
/>
|
||||
<div className="absolute bottom-4 left-0 right-0 bg-gradient-to-b from-transparent to-grey-0 h-xlarge z-10" />
|
||||
</PopoverPrimitive.Content>
|
||||
</PopoverPrimitive.Root>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TimePicker
|
||||
@@ -0,0 +1,6 @@
|
||||
import { InputHeaderProps } from "../../fundamentals/input-header"
|
||||
|
||||
export type DateTimePickerProps = {
|
||||
date: Date
|
||||
onSubmitDate: (newDate: Date) => void
|
||||
} & InputHeaderProps
|
||||
@@ -0,0 +1,25 @@
|
||||
export const range = (start, end) => {
|
||||
const range: number[] = []
|
||||
for (let i = start; i <= end; i++) {
|
||||
range.push(i)
|
||||
}
|
||||
return range
|
||||
}
|
||||
|
||||
export const getYearRange = (step = 20) =>
|
||||
range(new Date().getFullYear() - step, new Date().getFullYear() + step)
|
||||
|
||||
export const monthNames = [
|
||||
"January",
|
||||
"February",
|
||||
"March",
|
||||
"April",
|
||||
"May",
|
||||
"June",
|
||||
"July",
|
||||
"August",
|
||||
"September",
|
||||
"October",
|
||||
"November",
|
||||
"December",
|
||||
]
|
||||
@@ -0,0 +1,47 @@
|
||||
import clsx from "clsx"
|
||||
import React, { useEffect, useState } from "react"
|
||||
|
||||
type FadeProps = {
|
||||
isVisible: boolean
|
||||
isFullScreen?: boolean
|
||||
start?: string
|
||||
transitionClass?: string
|
||||
end?: string
|
||||
classname?: string
|
||||
children?: React.ReactNode
|
||||
}
|
||||
|
||||
const Fade: React.FC<FadeProps> = ({
|
||||
isVisible,
|
||||
start,
|
||||
end,
|
||||
classname,
|
||||
children,
|
||||
isFullScreen = false,
|
||||
}) => {
|
||||
const [show, setShow] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (show && !isVisible) {
|
||||
setTimeout(() => setShow(false), 100)
|
||||
} else {
|
||||
setShow(isVisible)
|
||||
}
|
||||
})
|
||||
|
||||
const classes = {
|
||||
[start || "scale-[0.98] opacity-0"]: !isVisible,
|
||||
[end || "scale-100 opacity-100"]: isVisible,
|
||||
"absolute inset-0": show && isFullScreen,
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={clsx("transition-all duration-100 z-50", classes, classname)}
|
||||
>
|
||||
{show ? children : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Fade
|
||||
@@ -0,0 +1,105 @@
|
||||
import clsx from "clsx"
|
||||
import React, { useRef, useState } from "react"
|
||||
|
||||
type FileUploadFieldProps = {
|
||||
onFileChosen: (files: File[]) => void
|
||||
filetypes: string[]
|
||||
errorMessage?: string
|
||||
placeholder?: React.ReactElement | string
|
||||
className?: string
|
||||
multiple?: boolean
|
||||
text?: React.ReactElement | string
|
||||
}
|
||||
|
||||
const defaultText = (
|
||||
<span>
|
||||
Drop your images here, or{" "}
|
||||
<span className="text-violet-60">click to browse</span>
|
||||
</span>
|
||||
)
|
||||
|
||||
const FileUploadField: React.FC<FileUploadFieldProps> = ({
|
||||
onFileChosen,
|
||||
filetypes,
|
||||
errorMessage,
|
||||
className,
|
||||
text = defaultText,
|
||||
placeholder = "",
|
||||
multiple = false,
|
||||
}) => {
|
||||
const inputRef = useRef<HTMLInputElement>(null)
|
||||
const [fileUploadError, setFileUploadError] = useState(false)
|
||||
|
||||
const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const fileList = e.target.files
|
||||
|
||||
if (fileList) {
|
||||
onFileChosen(Array.from(fileList))
|
||||
}
|
||||
}
|
||||
|
||||
const handleFileDrop = (e: React.DragEvent<HTMLDivElement>) => {
|
||||
setFileUploadError(false)
|
||||
|
||||
e.preventDefault()
|
||||
|
||||
const files: File[] = []
|
||||
|
||||
if (e.dataTransfer.items) {
|
||||
// Use DataTransferItemList interface to access the file(s)
|
||||
for (let i = 0; i < e.dataTransfer.items.length; i++) {
|
||||
// If dropped items aren't files, reject them
|
||||
if (e.dataTransfer.items[i].kind === "file") {
|
||||
const file = e.dataTransfer.items[i].getAsFile()
|
||||
if (file && filetypes.indexOf(file.type) > -1) {
|
||||
files.push(file)
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Use DataTransfer interface to access the file(s)
|
||||
for (let i = 0; i < e.dataTransfer.files.length; i++) {
|
||||
if (filetypes.indexOf(e.dataTransfer.files[i].type) > -1) {
|
||||
files.push(e.dataTransfer.files[i])
|
||||
}
|
||||
}
|
||||
}
|
||||
if (files.length === 1) {
|
||||
onFileChosen(files)
|
||||
} else {
|
||||
setFileUploadError(true)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={() => inputRef?.current?.click()}
|
||||
onDrop={handleFileDrop}
|
||||
onDragOver={(e) => e.preventDefault()}
|
||||
className={clsx(
|
||||
"flex flex-col select-none inter-base-regular text-grey-50 cursor-pointer items-center justify-center w-full h-full rounded-rounded border-2 border-dashed border-grey-20 transition-colors hover:border-violet-60 hover:text-grey-40",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div className="flex flex-col items-center">
|
||||
<p>{text}</p>
|
||||
{placeholder}
|
||||
</div>
|
||||
{fileUploadError && (
|
||||
<span className="text-rose-60">
|
||||
{errorMessage || "Please upload an image file"}
|
||||
</span>
|
||||
)}
|
||||
<input
|
||||
ref={inputRef}
|
||||
accept={filetypes.join(", ")}
|
||||
multiple={multiple}
|
||||
type="file"
|
||||
onChange={handleFileUpload}
|
||||
className="hidden"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default FileUploadField
|
||||
@@ -0,0 +1,26 @@
|
||||
import clsx from "clsx"
|
||||
import React from "react"
|
||||
import TaxesIcon from "../../fundamentals/icons/taxes-icon"
|
||||
import Tooltip from "../tooltip"
|
||||
|
||||
type Props = {
|
||||
includesTax?: boolean
|
||||
}
|
||||
|
||||
const IncludesTaxTooltip = ({ includesTax }: Props) => {
|
||||
return (
|
||||
<Tooltip content={includesTax ? "Tax incl. price" : "Tax excl. price"}>
|
||||
<div className="w-large h-large rounded-rounded border border-grey-20 flex items-center justify-center">
|
||||
<TaxesIcon
|
||||
size={16}
|
||||
className={clsx({
|
||||
"text-grey-50": includesTax,
|
||||
"text-grey-30": !includesTax,
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
|
||||
export default IncludesTaxTooltip
|
||||
@@ -0,0 +1,73 @@
|
||||
import { ErrorMessage } from "@hookform/error-message"
|
||||
import clsx from "clsx"
|
||||
import React from "react"
|
||||
import { MultipleFieldErrors } from "react-hook-form"
|
||||
import Tooltip from "../tooltip"
|
||||
|
||||
type InputErrorProps = {
|
||||
errors?: { [x: string]: unknown }
|
||||
name?: string
|
||||
className?: string
|
||||
}
|
||||
|
||||
const InputError = ({ errors, name, className }: InputErrorProps) => {
|
||||
if (!errors || !name) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<ErrorMessage
|
||||
name={name}
|
||||
errors={errors}
|
||||
render={({ message, messages }) => {
|
||||
return (
|
||||
<div
|
||||
className={clsx("text-rose-50 inter-small-regular mt-2", className)}
|
||||
>
|
||||
{messages ? (
|
||||
<MultipleMessages messages={messages} />
|
||||
) : (
|
||||
<p>{message}</p>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const MultipleMessages = ({ messages }: { messages: MultipleFieldErrors }) => {
|
||||
const errors = Object.entries(messages).map(([_, message]) => message)
|
||||
|
||||
const displayedError = errors[0]
|
||||
const remainderErrors = errors.slice(1)
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-x-1 cursor-default">
|
||||
<p>{displayedError}</p>
|
||||
{remainderErrors?.length > 0 && (
|
||||
<Tooltip
|
||||
content={
|
||||
<div className="text-rose-50 inter-small-regular">
|
||||
{remainderErrors.map((e, i) => {
|
||||
return (
|
||||
<p key={i}>
|
||||
{Array.from(Array(i + 1)).map((_) => "*")}
|
||||
{e}
|
||||
</p>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<p>
|
||||
+{remainderErrors.length}{" "}
|
||||
{remainderErrors.length > 1 ? "errors" : "error"}
|
||||
</p>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default InputError
|
||||
@@ -0,0 +1,32 @@
|
||||
import * as React from "react"
|
||||
import Spinner from "../spinner"
|
||||
|
||||
type LoadingContainerProps = {
|
||||
isLoading: boolean
|
||||
placeholder?: React.ReactElement
|
||||
children: React.ReactElement | React.ReactElement[]
|
||||
}
|
||||
|
||||
const LoadingContainer = ({
|
||||
isLoading,
|
||||
children,
|
||||
placeholder,
|
||||
...props
|
||||
}: LoadingContainerProps) => {
|
||||
placeholder = placeholder || <Spinner size="large" variant="secondary" />
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div
|
||||
className="pt-2xlarge flex min-h-[756px] w-full items-center justify-center"
|
||||
{...props}
|
||||
>
|
||||
{placeholder}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return children as React.ReactElement
|
||||
}
|
||||
|
||||
export default LoadingContainer
|
||||
@@ -0,0 +1,62 @@
|
||||
import React from "react"
|
||||
import type { Toast } from "react-hot-toast"
|
||||
import { toast as globalToast } from "react-hot-toast"
|
||||
import AlertIcon from "../../fundamentals/icons/alert-icon"
|
||||
import CheckCircleIcon from "../../fundamentals/icons/check-circle-icon"
|
||||
import CrossIcon from "../../fundamentals/icons/cross-icon"
|
||||
import InfoIcon from "../../fundamentals/icons/info-icon"
|
||||
import XCircleIcon from "../../fundamentals/icons/x-circle-icon"
|
||||
import ToasterContainer from "../toaster-container"
|
||||
|
||||
export type NotificationTypes = "success" | "warning" | "error" | "info"
|
||||
|
||||
type NotificationProps = {
|
||||
toast: Toast
|
||||
type: NotificationTypes
|
||||
title: string
|
||||
message: string
|
||||
}
|
||||
|
||||
const Notification: React.FC<NotificationProps> = ({
|
||||
toast,
|
||||
type,
|
||||
title,
|
||||
message,
|
||||
}) => {
|
||||
const onDismiss = () => {
|
||||
globalToast.dismiss(toast.id)
|
||||
}
|
||||
|
||||
return (
|
||||
<ToasterContainer visible={toast.visible} className="w-[380px]">
|
||||
<div>{getIcon(type)}</div>
|
||||
<div className="flex flex-col ml-small mr-base gap-y-2xsmall flex-grow text-white">
|
||||
<span className="inter-small-semibold">{title}</span>
|
||||
<span className="inter-small-regular text-grey-20">{message}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button onClick={onDismiss}>
|
||||
<CrossIcon size={ICON_SIZE} className="text-grey-40" />
|
||||
</button>
|
||||
<span className="sr-only">Close</span>
|
||||
</div>
|
||||
</ToasterContainer>
|
||||
)
|
||||
}
|
||||
|
||||
const ICON_SIZE = 20
|
||||
|
||||
function getIcon(type: NotificationTypes) {
|
||||
switch (type) {
|
||||
case "success":
|
||||
return <CheckCircleIcon size={ICON_SIZE} className="text-emerald-40" />
|
||||
case "warning":
|
||||
return <AlertIcon size={ICON_SIZE} className="text-orange-40" />
|
||||
case "error":
|
||||
return <XCircleIcon size={ICON_SIZE} className="text-rose-40" />
|
||||
default:
|
||||
return <InfoIcon size={ICON_SIZE} className="text-grey-40" />
|
||||
}
|
||||
}
|
||||
|
||||
export default Notification
|
||||
@@ -0,0 +1,47 @@
|
||||
import clsx from "clsx"
|
||||
import React from "react"
|
||||
|
||||
type NumberScrollerProps = {
|
||||
numbers: number[]
|
||||
selected: number
|
||||
onSelect: (value: number) => void
|
||||
} & React.HTMLAttributes<HTMLDivElement>
|
||||
|
||||
const NumberScroller: React.FC<NumberScrollerProps> = ({
|
||||
numbers,
|
||||
selected,
|
||||
onSelect,
|
||||
className,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
{...props}
|
||||
className={clsx(
|
||||
"flex flex-col time-list h-[305px] overflow-y-auto",
|
||||
className
|
||||
)}
|
||||
>
|
||||
{numbers.map((n, i) => {
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className={clsx(
|
||||
"w-[40px] h-[40px] last:mb-4 rounded inter-base-regular hover:bg-grey-20",
|
||||
{
|
||||
"bg-violet-60 hover:bg-violet-50 text-grey-0 inter-base-semibold":
|
||||
n === selected,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<button onClick={() => onSelect(n)} className="w-full h-full py-2">
|
||||
{n.toLocaleString("en-US", { minimumIntegerDigits: 2 })}
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default NumberScroller
|
||||
@@ -0,0 +1,50 @@
|
||||
import React from "react"
|
||||
|
||||
type OSShortcutProps = {
|
||||
winModifiers: string | string[]
|
||||
macModifiers: string | string[]
|
||||
keys: string[] | string
|
||||
}
|
||||
|
||||
const OSShortcut = ({ winModifiers, macModifiers, keys }: OSShortcutProps) => {
|
||||
const isMac =
|
||||
typeof window !== "undefined" &&
|
||||
navigator?.platform?.toUpperCase().indexOf("MAC") >= 0
|
||||
? true
|
||||
: false
|
||||
|
||||
let modifiers: string
|
||||
|
||||
if (isMac) {
|
||||
if (Array.isArray(macModifiers)) {
|
||||
modifiers = macModifiers.join("")
|
||||
} else {
|
||||
modifiers = macModifiers
|
||||
}
|
||||
} else {
|
||||
if (Array.isArray(winModifiers)) {
|
||||
modifiers = winModifiers.join(" + ")
|
||||
} else {
|
||||
modifiers = winModifiers
|
||||
}
|
||||
}
|
||||
|
||||
let input: string
|
||||
|
||||
if (Array.isArray(keys)) {
|
||||
input = keys.join(" + ")
|
||||
} else {
|
||||
input = keys
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center text-grey-40">
|
||||
<p className="m-0 inter-base-semibold">
|
||||
<span className="inter-base-semibold">{modifiers} </span>
|
||||
{input}
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default OSShortcut
|
||||
@@ -0,0 +1,20 @@
|
||||
import React from "react"
|
||||
|
||||
type PageDescriptionProps = {
|
||||
title?: string
|
||||
subtitle?: string
|
||||
}
|
||||
|
||||
const PageDescription: React.FC<PageDescriptionProps> = ({
|
||||
title,
|
||||
subtitle,
|
||||
}) => {
|
||||
return (
|
||||
<div className="mb-xlarge">
|
||||
<h1 className="inter-2xlarge-semibold mb-xsmall">{title}</h1>
|
||||
<h2 className="inter-base-regular text-grey-50">{subtitle}</h2>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PageDescription
|
||||
@@ -0,0 +1,49 @@
|
||||
import React, { useEffect } from "react"
|
||||
import type { Toast } from "react-hot-toast"
|
||||
import CrossIcon from "../../fundamentals/icons/cross-icon"
|
||||
import XCircleIcon from "../../fundamentals/icons/x-circle-icon"
|
||||
import ToasterContainer from "../toaster-container"
|
||||
|
||||
type SavingStateProps = {
|
||||
toast: Toast
|
||||
title?: string
|
||||
message?: string
|
||||
onDismiss: () => void
|
||||
}
|
||||
|
||||
const ErrorState: React.FC<SavingStateProps> = ({
|
||||
toast,
|
||||
title = "Error",
|
||||
message = "An error occured while trying to save your changes. Please try again.",
|
||||
onDismiss,
|
||||
}) => {
|
||||
useEffect(() => {
|
||||
const life = setTimeout(() => {
|
||||
onDismiss()
|
||||
}, 2000)
|
||||
|
||||
return () => {
|
||||
clearTimeout(life)
|
||||
}
|
||||
}, [toast])
|
||||
|
||||
return (
|
||||
<ToasterContainer visible={toast.visible} className="w-[448px]">
|
||||
<div>
|
||||
<XCircleIcon size={20} className="text-rose-40" />
|
||||
</div>
|
||||
<div className="flex flex-col ml-small mr-base gap-y-2xsmall flex-grow">
|
||||
<span className="inter-small-semibold">{title}</span>
|
||||
<span className="inter-small-regular text-grey-50">{message}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button onClick={onDismiss}>
|
||||
<CrossIcon size={20} className="text-grey-40" />
|
||||
</button>
|
||||
<span className="sr-only">Close</span>
|
||||
</div>
|
||||
</ToasterContainer>
|
||||
)
|
||||
}
|
||||
|
||||
export default ErrorState
|
||||
@@ -0,0 +1,94 @@
|
||||
import React, { ReactNode } from "react"
|
||||
import type { Toast } from "react-hot-toast"
|
||||
import { toast as globalToast } from "react-hot-toast"
|
||||
import RefreshIcon from "../../fundamentals/icons/refresh-icon"
|
||||
import ToasterContainer from "../toaster-container"
|
||||
import ErrorState from "./error-state"
|
||||
import SavingState from "./saving-state"
|
||||
import SuccessState from "./success-state"
|
||||
|
||||
type SaveNotificationProps = {
|
||||
toast: Toast
|
||||
icon?: ReactNode
|
||||
title?: string
|
||||
message?: string
|
||||
onSave: () => Promise<void>
|
||||
reset: () => void
|
||||
}
|
||||
|
||||
const SaveNotification: React.FC<SaveNotificationProps> = ({
|
||||
toast,
|
||||
icon,
|
||||
title = "Unsaved changes",
|
||||
message = "You have unsaved changes. Do you want to save and publish or discard them?",
|
||||
onSave,
|
||||
reset,
|
||||
}) => {
|
||||
const onDismiss = () => {
|
||||
reset()
|
||||
globalToast.dismiss(toast.id)
|
||||
}
|
||||
|
||||
const handleSave = () => {
|
||||
globalToast.custom((t) => <SavingState toast={t} />, {
|
||||
id: toast.id,
|
||||
})
|
||||
|
||||
onSave()
|
||||
.then(() => {
|
||||
globalToast.custom(
|
||||
(t) => <SuccessState toast={t} onDismiss={onDismiss} />,
|
||||
{
|
||||
id: toast.id,
|
||||
}
|
||||
)
|
||||
})
|
||||
.catch((_err) => {
|
||||
globalToast.custom(
|
||||
(t) => <ErrorState toast={t} onDismiss={onDismiss} />,
|
||||
{
|
||||
id: toast.id,
|
||||
}
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<ToasterContainer visible={toast.visible} className="p-0 pl-base w-[448px]">
|
||||
<div className="py-base">{getIcon(icon)}</div>
|
||||
<div className="flex flex-col ml-small mr-base gap-y-2xsmall flex-grow py-base">
|
||||
<span className="inter-small-semibold">{title}</span>
|
||||
<span className="inter-small-regular text-grey-50">{message}</span>
|
||||
</div>
|
||||
<div className="flex flex-col inter-small-semibold border-l border-grey-20 h-full">
|
||||
<button
|
||||
onClick={handleSave}
|
||||
className="inter-small-semibold flex items-center justify-center h-1/2 border-b border-grey-20 px-base text-violet-60"
|
||||
>
|
||||
Publish
|
||||
</button>
|
||||
<button
|
||||
className="inter-small-semibold flex items-center justify-center h-1/2 px-base"
|
||||
onClick={onDismiss}
|
||||
>
|
||||
Discard
|
||||
</button>
|
||||
</div>
|
||||
</ToasterContainer>
|
||||
)
|
||||
}
|
||||
|
||||
const ICON_SIZE = 20
|
||||
|
||||
function getIcon(icon?: any) {
|
||||
if (icon) {
|
||||
return React.cloneElement(icon, {
|
||||
size: ICON_SIZE,
|
||||
className: "text-grey-90",
|
||||
})
|
||||
} else {
|
||||
return <RefreshIcon size={20} className="text-grey-90" />
|
||||
}
|
||||
}
|
||||
|
||||
export default SaveNotification
|
||||
@@ -0,0 +1,30 @@
|
||||
import React from "react"
|
||||
import type { Toast } from "react-hot-toast"
|
||||
import Spinner from "../spinner"
|
||||
import ToasterContainer from "../toaster-container"
|
||||
|
||||
type SavingStateProps = {
|
||||
toast: Toast
|
||||
title?: string
|
||||
message?: string
|
||||
}
|
||||
|
||||
const SavingState: React.FC<SavingStateProps> = ({
|
||||
toast,
|
||||
title = "Saving changes",
|
||||
message = "Hang on, this may take a few moments.",
|
||||
}) => {
|
||||
return (
|
||||
<ToasterContainer visible={toast.visible} className="w-[448px]">
|
||||
<div>
|
||||
<Spinner variant="secondary" size="large" />
|
||||
</div>
|
||||
<div className="flex flex-col ml-small mr-base gap-y-2xsmall flex-grow">
|
||||
<span className="inter-small-semibold">{title}</span>
|
||||
<span className="inter-small-regular text-grey-50">{message}</span>
|
||||
</div>
|
||||
</ToasterContainer>
|
||||
)
|
||||
}
|
||||
|
||||
export default SavingState
|
||||
@@ -0,0 +1,49 @@
|
||||
import React, { useEffect } from "react"
|
||||
import type { Toast } from "react-hot-toast"
|
||||
import CheckCircleIcon from "../../fundamentals/icons/check-circle-icon"
|
||||
import CrossIcon from "../../fundamentals/icons/cross-icon"
|
||||
import ToasterContainer from "../toaster-container"
|
||||
|
||||
type SavingStateProps = {
|
||||
toast: Toast
|
||||
title?: string
|
||||
message?: string
|
||||
onDismiss: () => void
|
||||
}
|
||||
|
||||
const SuccessState: React.FC<SavingStateProps> = ({
|
||||
toast,
|
||||
title = "Success",
|
||||
message = "Your changes have been saved.",
|
||||
onDismiss,
|
||||
}) => {
|
||||
useEffect(() => {
|
||||
const life = setTimeout(() => {
|
||||
onDismiss()
|
||||
}, 2000)
|
||||
|
||||
return () => {
|
||||
clearTimeout(life)
|
||||
}
|
||||
}, [toast])
|
||||
|
||||
return (
|
||||
<ToasterContainer visible={toast.visible} className="w-[448px]">
|
||||
<div>
|
||||
<CheckCircleIcon size={20} className="text-emerald-40" />
|
||||
</div>
|
||||
<div className="flex flex-col ml-small mr-base gap-y-2xsmall flex-grow">
|
||||
<span className="inter-small-semibold">{title}</span>
|
||||
<span className="inter-small-regular text-grey-50">{message}</span>
|
||||
</div>
|
||||
<div>
|
||||
<button onClick={onDismiss}>
|
||||
<CrossIcon size={20} className="text-grey-40" />
|
||||
</button>
|
||||
<span className="sr-only">Close</span>
|
||||
</div>
|
||||
</ToasterContainer>
|
||||
)
|
||||
}
|
||||
|
||||
export default SuccessState
|
||||
@@ -0,0 +1,56 @@
|
||||
import React from "react"
|
||||
import { Link } from "react-router-dom"
|
||||
import ChevronRightIcon from "../../fundamentals/icons/chevron-right-icon"
|
||||
|
||||
type SettingsCardProps = {
|
||||
icon: React.ReactNode
|
||||
heading: string
|
||||
description: string
|
||||
to?: string
|
||||
externalLink?: string
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
const SettingsCard: React.FC<SettingsCardProps> = ({
|
||||
icon,
|
||||
heading,
|
||||
description,
|
||||
to = null,
|
||||
externalLink = null,
|
||||
disabled = false,
|
||||
}) => {
|
||||
if (disabled) {
|
||||
to = null
|
||||
}
|
||||
|
||||
return (
|
||||
<Link to={to ?? ""} className="flex flex-1 items-center">
|
||||
<button
|
||||
className="bg-grey-0 rounded-rounded p-large border-grey-20 group flex h-full flex-1 items-center border"
|
||||
disabled={disabled}
|
||||
onClick={() => {
|
||||
if (externalLink) {
|
||||
window.location.href = externalLink
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="h-2xlarge w-2xlarge bg-violet-20 rounded-circle text-violet-60 group-disabled:bg-grey-10 group-disabled:text-grey-40 flex items-center justify-center">
|
||||
{icon}
|
||||
</div>
|
||||
<div className="mx-large flex-1 text-left">
|
||||
<h3 className="inter-large-semibold text-grey-90 group-disabled:text-grey-40 m-0">
|
||||
{heading}
|
||||
</h3>
|
||||
<p className="inter-base-regular text-grey-50 group-disabled:text-grey-40 m-0">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-grey-40 group-disabled:text-grey-30">
|
||||
<ChevronRightIcon />
|
||||
</div>
|
||||
</button>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
export default SettingsCard
|
||||
@@ -0,0 +1,25 @@
|
||||
import clsx from "clsx"
|
||||
import { PropsWithChildren } from "react"
|
||||
import { useSkeleton } from "../../../providers/skeleton-provider"
|
||||
|
||||
type Props = PropsWithChildren<{
|
||||
isLoading?: boolean
|
||||
}>
|
||||
|
||||
const Skeleton = ({ children, isLoading }: Props) => {
|
||||
const { isLoading: providerState = false } = useSkeleton()
|
||||
|
||||
const state = isLoading || providerState
|
||||
|
||||
return (
|
||||
<div
|
||||
className={clsx("h-fit w-fit", {
|
||||
"bg-grey-10 rounded-rounded animate-pulse [&>*]:opacity-0": state,
|
||||
})}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Skeleton
|
||||
@@ -0,0 +1,35 @@
|
||||
import clsx from "clsx"
|
||||
import React from "react"
|
||||
|
||||
type SpinnerProps = {
|
||||
size?: "large" | "medium" | "small"
|
||||
variant?: "primary" | "secondary"
|
||||
}
|
||||
|
||||
const Spinner: React.FC<SpinnerProps> = ({
|
||||
size = "large",
|
||||
variant = "primary",
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
"flex items-center justify-center",
|
||||
{ "h-[24px] w-[24px]": size === "large" },
|
||||
{ "h-[20px] w-[20px]": size === "medium" },
|
||||
{ "h-[16px] w-[16px]": size === "small" }
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center justify-center relative w-full h-full">
|
||||
<div
|
||||
className={clsx(
|
||||
"animate-ring border-2 h-4/5 w-4/5 rounded-circle border-transparent",
|
||||
{ "border-t-grey-0": variant === "primary" },
|
||||
{ "border-t-violet-60": variant === "secondary" }
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Spinner
|
||||
@@ -0,0 +1,26 @@
|
||||
import * as RadixSwitch from "@radix-ui/react-switch"
|
||||
import clsx from "clsx"
|
||||
import React from "react"
|
||||
|
||||
/**
|
||||
* A controlled switch component atom.
|
||||
*/
|
||||
function Switch(props: RadixSwitch.SwitchProps) {
|
||||
return (
|
||||
<RadixSwitch.Root
|
||||
{...props}
|
||||
disabled={props.disabled}
|
||||
className={clsx(
|
||||
"w-8 h-[18px] rounded-full transition-bg bg-gray-300 radix-state-checked:bg-violet-60"
|
||||
)}
|
||||
>
|
||||
<RadixSwitch.Thumb
|
||||
className={clsx(
|
||||
"w-2 h-2 bg-white rounded-full block transition-transform translate-x-[5px] radix-state-checked:translate-x-[19px]"
|
||||
)}
|
||||
/>
|
||||
</RadixSwitch.Root>
|
||||
)
|
||||
}
|
||||
|
||||
export default Switch
|
||||
@@ -0,0 +1,19 @@
|
||||
import React from "react"
|
||||
import clsx from "clsx"
|
||||
|
||||
type TextInputProps = React.InputHTMLAttributes<HTMLInputElement>
|
||||
|
||||
const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
|
||||
({ className, ...props }, ref) => (
|
||||
<input
|
||||
ref={ref}
|
||||
className={clsx(
|
||||
"placeholder:inter-base-regular placeholder-grey-40 focus:outline-none",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
)
|
||||
|
||||
export default TextInput
|
||||
@@ -0,0 +1 @@
|
||||
export { Thumbnail as default } from "./thumbnail"
|
||||
@@ -0,0 +1,30 @@
|
||||
import clsx from "clsx"
|
||||
import ImagePlaceholderIcon from "../../fundamentals/icons/image-placeholder-icon"
|
||||
|
||||
type Props = {
|
||||
src?: string | null
|
||||
className?: string
|
||||
size?: "small" | "medium" | "large"
|
||||
}
|
||||
|
||||
export const Thumbnail = ({ src, className, size = "small" }: Props) => {
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
"bg-grey-5 flex items-center justify-center overflow-hidden rounded-rounded",
|
||||
{
|
||||
"w-[30px] h-10": size === "small",
|
||||
"w-9 h-12": size === "medium",
|
||||
"w-[170px] h-[226px]": size === "large",
|
||||
},
|
||||
className
|
||||
)}
|
||||
>
|
||||
{src ? (
|
||||
<img src={src} className="object-cover object-center flex-1" />
|
||||
) : (
|
||||
<ImagePlaceholderIcon />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import clsx from "clsx"
|
||||
import React from "react"
|
||||
|
||||
type ToasterContainerProps = {
|
||||
visible: boolean
|
||||
} & React.HTMLAttributes<HTMLDivElement>
|
||||
|
||||
const ToasterContainer: React.FC<ToasterContainerProps> = ({
|
||||
children,
|
||||
visible,
|
||||
className,
|
||||
...rest
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
"flex items-start bg-grey-90 p-base border rounded-rounded shadow-toaster mb-xsmall last:mb-0",
|
||||
{
|
||||
"animate-enter": visible,
|
||||
},
|
||||
{
|
||||
"animate-leave": !visible,
|
||||
},
|
||||
className
|
||||
)}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ToasterContainer
|
||||
@@ -0,0 +1,58 @@
|
||||
import * as RadixTooltip from "@radix-ui/react-tooltip"
|
||||
import clsx from "clsx"
|
||||
import React from "react"
|
||||
|
||||
export type TooltipProps = RadixTooltip.TooltipContentProps &
|
||||
Pick<
|
||||
RadixTooltip.TooltipProps,
|
||||
"open" | "defaultOpen" | "onOpenChange" | "delayDuration"
|
||||
> & {
|
||||
content: React.ReactNode
|
||||
side?: "bottom" | "left" | "top" | "right"
|
||||
onClick?: React.ButtonHTMLAttributes<HTMLButtonElement>["onClick"]
|
||||
}
|
||||
|
||||
const Tooltip = ({
|
||||
children,
|
||||
content,
|
||||
open,
|
||||
defaultOpen,
|
||||
onOpenChange,
|
||||
delayDuration,
|
||||
className,
|
||||
side,
|
||||
onClick,
|
||||
...props
|
||||
}: TooltipProps) => {
|
||||
return (
|
||||
<RadixTooltip.Provider delayDuration={100}>
|
||||
<RadixTooltip.Root
|
||||
open={open}
|
||||
defaultOpen={defaultOpen}
|
||||
onOpenChange={onOpenChange}
|
||||
delayDuration={delayDuration}
|
||||
>
|
||||
<RadixTooltip.Trigger onClick={onClick} asChild={true}>
|
||||
<span>{children}</span>
|
||||
</RadixTooltip.Trigger>
|
||||
<RadixTooltip.Content
|
||||
side={side ?? "bottom"}
|
||||
sideOffset={8}
|
||||
align="center"
|
||||
className={clsx(
|
||||
"inter-small-semibold text-grey-50",
|
||||
"bg-grey-0 py-2 px-3 shadow-dropdown rounded-rounded",
|
||||
"border border-solid border-grey-20",
|
||||
"max-w-[220px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{content}
|
||||
</RadixTooltip.Content>
|
||||
</RadixTooltip.Root>
|
||||
</RadixTooltip.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export default Tooltip
|
||||
@@ -0,0 +1,110 @@
|
||||
import clsx from "clsx"
|
||||
import React, {
|
||||
forwardRef,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react"
|
||||
import TrashIcon from "../../fundamentals/icons/trash-icon"
|
||||
import Spinner from "../spinner"
|
||||
import Tooltip from "../tooltip"
|
||||
|
||||
type Props = {
|
||||
onDelete: () => void
|
||||
deleting?: boolean
|
||||
className?: string
|
||||
children?: React.ReactNode
|
||||
}
|
||||
|
||||
const TwoStepDelete = forwardRef<HTMLButtonElement, Props>(
|
||||
({ onDelete, deleting = false, children, className }: Props, ref) => {
|
||||
const [armed, setArmed] = useState(false)
|
||||
const innerRef = useRef<HTMLButtonElement>(null)
|
||||
|
||||
useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(
|
||||
ref,
|
||||
() => innerRef.current
|
||||
)
|
||||
|
||||
const handleTwoStepDelete = () => {
|
||||
if (!armed) {
|
||||
setArmed(true)
|
||||
return
|
||||
}
|
||||
|
||||
onDelete()
|
||||
setArmed(false)
|
||||
}
|
||||
|
||||
const disarmOnClickOutside = useCallback(
|
||||
(e: MouseEvent) => {
|
||||
if (innerRef.current && !innerRef.current.contains(e.target as Node)) {
|
||||
if (armed) {
|
||||
setArmed(false)
|
||||
}
|
||||
}
|
||||
},
|
||||
[armed]
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener("mousedown", disarmOnClickOutside)
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", disarmOnClickOutside)
|
||||
}
|
||||
}, [disarmOnClickOutside])
|
||||
|
||||
return (
|
||||
<button
|
||||
className={clsx(
|
||||
"transition-all rounded-lg border flex items-center justify-center",
|
||||
{
|
||||
"bg-rose-50 border-rose-50 px-3 py-1.5": armed,
|
||||
"bg-transparent border-gray-20 p-1.5": !armed,
|
||||
},
|
||||
{
|
||||
"!bg-grey-40 !border-grey-40 !p-1.5": deleting,
|
||||
},
|
||||
className
|
||||
)}
|
||||
disabled={deleting}
|
||||
onClick={handleTwoStepDelete}
|
||||
ref={innerRef}
|
||||
>
|
||||
<div
|
||||
className={clsx("text-rose-50 inter-small-semibold", {
|
||||
hidden: armed || deleting,
|
||||
})}
|
||||
>
|
||||
{children || <TrashIcon className="text-grey-50" size={20} />}
|
||||
</div>
|
||||
<span
|
||||
className={clsx("text-white inter-small-semibold", {
|
||||
hidden: !armed || deleting,
|
||||
})}
|
||||
>
|
||||
<Tooltip
|
||||
content="Are you sure?"
|
||||
side="top"
|
||||
sideOffset={16}
|
||||
open={armed}
|
||||
>
|
||||
Confirm
|
||||
</Tooltip>
|
||||
</span>
|
||||
<span
|
||||
className={clsx("flex items-center justify-center", {
|
||||
hidden: !deleting,
|
||||
})}
|
||||
>
|
||||
<Spinner size="medium" />
|
||||
</span>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
export default TwoStepDelete
|
||||
@@ -0,0 +1,23 @@
|
||||
import * as React from "react"
|
||||
import { toast, ToastOptions } from "react-hot-toast"
|
||||
|
||||
export type ToasterProps = {
|
||||
visible: boolean
|
||||
children: React.ReactElement
|
||||
} & ToastOptions
|
||||
|
||||
const Toaster = ({ visible, children, ...options }: ToasterProps) => {
|
||||
React.useEffect(() => {
|
||||
if (visible) {
|
||||
toast.custom((t) => React.cloneElement(children, { toast: t }), {
|
||||
...options,
|
||||
})
|
||||
} else {
|
||||
toast.dismiss(options.id)
|
||||
}
|
||||
}, [visible, children])
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
export default Toaster
|
||||
@@ -0,0 +1,43 @@
|
||||
import clsx from "clsx"
|
||||
import React from "react"
|
||||
|
||||
type BadgeProps = {
|
||||
variant:
|
||||
| "primary"
|
||||
| "danger"
|
||||
| "success"
|
||||
| "warning"
|
||||
| "ghost"
|
||||
| "default"
|
||||
| "disabled"
|
||||
} & React.HTMLAttributes<HTMLDivElement>
|
||||
|
||||
const Badge: React.FC<BadgeProps> = ({
|
||||
children,
|
||||
variant,
|
||||
onClick,
|
||||
className,
|
||||
...props
|
||||
}) => {
|
||||
const variantClassname = clsx({
|
||||
["badge-primary"]: variant === "primary",
|
||||
["badge-danger"]: variant === "danger",
|
||||
["badge-success"]: variant === "success",
|
||||
["badge-warning"]: variant === "warning",
|
||||
["badge-ghost"]: variant === "ghost",
|
||||
["badge-default"]: variant === "default",
|
||||
["badge-disabled"]: variant === "disabled",
|
||||
})
|
||||
|
||||
return (
|
||||
<div
|
||||
className={clsx("badge", variantClassname, className)}
|
||||
onClick={onClick}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Badge
|
||||
@@ -0,0 +1,71 @@
|
||||
import clsx from "clsx"
|
||||
import React, { Children } from "react"
|
||||
import Spinner from "../../atoms/spinner"
|
||||
|
||||
export type ButtonProps = {
|
||||
variant: "primary" | "secondary" | "ghost" | "danger" | "nuclear"
|
||||
size?: "small" | "medium" | "large"
|
||||
loading?: boolean
|
||||
} & React.ButtonHTMLAttributes<HTMLButtonElement>
|
||||
|
||||
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
(
|
||||
{
|
||||
variant = "primary",
|
||||
size = "large",
|
||||
loading = false,
|
||||
children,
|
||||
...attributes
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const handleClick = (e) => {
|
||||
if (!loading && attributes.onClick) {
|
||||
attributes.onClick(e)
|
||||
}
|
||||
}
|
||||
|
||||
const variantClassname = clsx({
|
||||
["btn-primary"]: variant === "primary",
|
||||
["btn-secondary"]: variant === "secondary",
|
||||
["btn-ghost"]: variant === "ghost",
|
||||
["btn-danger"]: variant === "danger",
|
||||
["btn-nuclear"]: variant === "nuclear",
|
||||
})
|
||||
|
||||
const sizeClassname = clsx({
|
||||
["btn-large"]: size === "large",
|
||||
["btn-medium"]: size === "medium",
|
||||
["btn-small"]: size === "small",
|
||||
})
|
||||
|
||||
return (
|
||||
<button
|
||||
{...attributes}
|
||||
className={clsx(
|
||||
"btn",
|
||||
variantClassname,
|
||||
sizeClassname,
|
||||
attributes.className
|
||||
)}
|
||||
disabled={attributes.disabled || loading}
|
||||
ref={ref}
|
||||
onClick={handleClick}
|
||||
>
|
||||
{loading ? (
|
||||
<Spinner size={size} variant={"secondary"} />
|
||||
) : (
|
||||
Children.map(children, (child, i) => {
|
||||
return (
|
||||
<span key={i} className="mr-xsmall last:mr-0">
|
||||
{child}
|
||||
</span>
|
||||
)
|
||||
})
|
||||
)}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
export default Button
|
||||
@@ -0,0 +1,7 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.4444 17H4.55556C3.7 17 3 16.35 3 15.5556V5.44444C3 4.65 3.7 4 4.55556 4H15.4444C16.3 4 17 4.65 17 5.44444V15.5556C17 16.35 16.3 17 15.4444 17Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M13 2.43994V3.43994" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M7 2.43994V3.43994" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 10.7632C11.1046 10.7632 12 9.86775 12 8.76318C12 7.65861 11.1046 6.76318 10 6.76318C8.89543 6.76318 8 7.65861 8 8.76318C8 9.86775 8.89543 10.7632 10 10.7632Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M14 14.2979C12.88 13.6312 11.52 13.2979 10 13.2979C8.48 13.2979 7.12 13.6979 6 14.2979" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1013 B |
@@ -0,0 +1,57 @@
|
||||
import React from "react"
|
||||
import IconProps from "../icons/types/icon-type"
|
||||
|
||||
const DetailsIcon: React.FC<IconProps> = ({
|
||||
size = "16",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M15.4444 17H4.55556C3.7 17 3 16.35 3 15.5556V5.44444C3 4.65 3.7 4 4.55556 4H15.4444C16.3 4 17 4.65 17 5.44444V15.5556C17 16.35 16.3 17 15.4444 17Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M13 2.43994V3.43994"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M7 2.43994V3.43994"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M10 10.7632C11.1046 10.7632 12 9.86775 12 8.76318C12 7.65861 11.1046 6.76318 10 6.76318C8.89543 6.76318 8 7.65861 8 8.76318C8 9.86775 8.89543 10.7632 10 10.7632Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M14 14.2979C12.88 13.6312 11.52 13.2979 10 13.2979C8.48 13.2979 7.12 13.6979 6 14.2979"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default DetailsIcon
|
||||
@@ -0,0 +1,21 @@
|
||||
import React from "react"
|
||||
import { useFeatureFlag } from "../../providers/feature-flag-provider"
|
||||
|
||||
export type FeatureToggleProps = {
|
||||
featureFlag: string
|
||||
showOnlyWhenDisabled?: boolean
|
||||
children?: React.ReactNode
|
||||
}
|
||||
|
||||
const FeatureToggle: React.FC<FeatureToggleProps> = ({
|
||||
featureFlag,
|
||||
showOnlyWhenDisabled = false,
|
||||
children,
|
||||
}) => {
|
||||
const { isFeatureEnabled } = useFeatureFlag()
|
||||
|
||||
const showContent = isFeatureEnabled(featureFlag) === !showOnlyWhenDisabled
|
||||
return showContent ? <>{children}</> : null
|
||||
}
|
||||
|
||||
export default FeatureToggle
|
||||
@@ -0,0 +1,36 @@
|
||||
import clsx from "clsx"
|
||||
import React from "react"
|
||||
import Badge from "../badge"
|
||||
|
||||
type IconBadgeProps = {
|
||||
variant?:
|
||||
| "primary"
|
||||
| "danger"
|
||||
| "success"
|
||||
| "warning"
|
||||
| "ghost"
|
||||
| "default"
|
||||
| "disabled"
|
||||
} & React.HTMLAttributes<HTMLDivElement>
|
||||
|
||||
const IconBadge: React.FC<IconBadgeProps> = ({
|
||||
children,
|
||||
variant,
|
||||
className,
|
||||
...rest
|
||||
}) => {
|
||||
return (
|
||||
<Badge
|
||||
variant={variant ?? "default"}
|
||||
className={clsx(
|
||||
"flex items-center justify-center aspect-square w-[40px] h-[40px] border-2 border-white outline outline-1 outline-grey-20",
|
||||
className
|
||||
)}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
</Badge>
|
||||
)
|
||||
}
|
||||
|
||||
export default IconBadge
|
||||
@@ -0,0 +1,43 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const AlertIcon: React.FC<IconProps> = ({
|
||||
size = "20",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M10 6.66669V10"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M10 13.3333H10.0088"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default AlertIcon
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from "react"
|
||||
import IconProps from "./types/icon-type"
|
||||
|
||||
const ArrowDownIcon: React.FC<IconProps> = ({
|
||||
size = "24px",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M8 3.33331V12.6666"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M12.667 8L8.00033 12.6667L3.33366 8"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default ArrowDownIcon
|
||||
@@ -0,0 +1,35 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const ArrowLeftIcon: React.FC<IconProps> = ({
|
||||
size = "20",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M3.75 10H16.875"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M8.125 5L3.125 10L8.125 15"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default ArrowLeftIcon
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const ArrowRightIcon: React.FC<IconProps> = ({
|
||||
size = "16",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M3.33301 8H12.6663"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M8 3.33331L12.6667 7.99998L8 12.6666"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default ArrowRightIcon
|
||||
@@ -0,0 +1,29 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const ArrowTopRightIcon: React.FC<IconProps> = ({
|
||||
size = "20",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M15.0129 4.98792L4.93799 15.0628M15.0129 4.98792L7.93994 4.93713M15.0129 4.98792L15.0636 12.0608"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default ArrowTopRightIcon
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from "react"
|
||||
import IconProps from "./types/icon-type"
|
||||
|
||||
const ArrowUpIcon: React.FC<IconProps> = ({
|
||||
size = "24px",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M8 12.6667V3.33335"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M3.33301 8L7.99967 3.33333L12.6663 8"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default ArrowUpIcon
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const BackIcon: React.FC<IconProps> = ({
|
||||
size = "24",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M3.33301 2.91669V7.91669H8.33301"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M3.41396 11.6784C3.57168 13.1642 4.14444 13.9943 5.18922 15.0653C6.23401 16.1363 7.6093 16.8262 9.0944 17.0244C10.5795 17.2226 12.0883 16.9175 13.3787 16.1581C14.6691 15.3988 15.6663 14.2291 16.2103 12.8369C16.7542 11.4446 16.8134 9.91052 16.3783 8.48073C15.9432 7.05094 15.039 5.80836 13.8109 4.95238C12.5828 4.0964 11.1019 3.67666 9.60596 3.76051C8.10998 3.84436 6.68561 4.42693 5.56142 5.41475L3.33301 7.41474"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default BackIcon
|
||||
@@ -0,0 +1,42 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const BackspaceIcon: React.FC<IconProps> = ({
|
||||
size = "16",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M7.5 6.66675L10.1667 9.33341"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M10.1667 6.66675L7.5 9.33341"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M4.56137 11.8559L2.55004 9.49392H2.55004C1.81665 8.63293 1.81665 7.36691 2.55004 6.50592L4.56137 4.14392V4.14392C4.9991 3.62949 5.64058 3.33312 6.31604 3.33325H11.6954V3.33325C12.9682 3.33325 14 4.36509 14 5.63792C14 5.63792 14 5.63792 14 5.63792V10.3619V10.3619C14 11.6348 12.9682 12.6666 11.6954 12.6666H6.31604V12.6666C5.64058 12.6667 4.99911 12.3704 4.56137 11.8559V11.8559Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default BackspaceIcon
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const BellIcon: React.FC<IconProps> = ({
|
||||
size = "24",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M14 20C13.7968 20.3042 13.505 20.5566 13.154 20.7321C12.803 20.9076 12.4051 21 12 21C11.5949 21 11.197 20.9076 10.846 20.7321C10.495 20.5566 10.2032 20.3042 10 20"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M17.3333 8.2C17.3333 6.82087 16.7714 5.49823 15.7712 4.52304C14.771 3.54786 13.4145 3 12 3C10.5855 3 9.22896 3.54786 8.22876 4.52304C7.22857 5.49823 6.66667 6.82087 6.66667 8.2C6.66667 14.2667 4 16 4 16H20C20 16 17.3333 14.2667 17.3333 8.2Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default BellIcon
|
||||
@@ -0,0 +1,41 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
type IBellNotiIconProps = IconProps & {
|
||||
accentColor?: string
|
||||
}
|
||||
|
||||
const BellNotiIcon: React.FC<IBellNotiIconProps> = ({
|
||||
size = "24px",
|
||||
color = "currentColor",
|
||||
accentColor = "#F43F5E",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M14 20C13.7968 20.3042 13.505 20.5566 13.154 20.7321C12.803 20.9076 12.4051 21 12 21C11.5949 21 11.197 20.9076 10.846 20.7321C10.495 20.5566 10.2032 20.3042 10 20"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M18.4735 11.7793C18.0077 11.9228 17.5129 12 17.0001 12C16.9947 12 16.9894 12 16.9841 12C17.2526 13.1526 17.6265 14.0517 18.0122 14.7412C18.1157 14.9262 18.2197 15.0955 18.3223 15.25H5.67782C5.78041 15.0955 5.88443 14.9262 5.98793 14.7412C6.72391 13.4256 7.41673 11.347 7.41673 8.2C7.41673 7.026 7.89488 5.89613 8.7524 5.06004C9.61057 4.22333 10.7784 3.75 12.0001 3.75C12.372 3.75 12.7391 3.79389 13.0938 3.87856C13.4571 3.42462 13.8978 3.03537 14.3959 2.73085C13.6453 2.41632 12.831 2.25 12.0001 2.25C10.3927 2.25 8.84747 2.87238 7.70525 3.98604C6.56238 5.10034 5.91673 6.61575 5.91673 8.2C5.91673 8.46632 5.9114 8.7235 5.90126 8.97181L3.58406 15.3759C3.31067 15.5581 3.18742 15.8975 3.28099 16.2132C3.37538 16.5316 3.66795 16.75 4.00006 16.75H20.0001C20.3322 16.75 20.6247 16.5316 20.7191 16.2132C20.8127 15.8975 20.6895 15.5582 20.4161 15.376M3.59055 15.3713L3.59037 15.3718L3.58947 15.3724L3.58787 15.3734L3.58537 15.3751L3.58406 15.3759L3.58945 15.3721C3.5898 15.3718 3.59017 15.3716 3.59055 15.3713ZM3.59055 15.3713L5.90099 8.97837C5.79921 11.4485 5.22124 13.0393 4.67886 14.0088C4.37901 14.5448 4.08562 14.8989 3.87883 15.1117C3.77524 15.2183 3.69289 15.29 3.6417 15.3316C3.61711 15.3516 3.5997 15.3646 3.59055 15.3713ZM20.4108 15.3725L20.4123 15.3734L20.4148 15.3751L20.4157 15.3757C20.4146 15.3749 20.413 15.3737 20.4107 15.3721C20.4019 15.3657 20.384 15.3524 20.3584 15.3316C20.3072 15.29 20.2249 15.2183 20.1213 15.1117C19.9145 14.8989 19.6211 14.5448 19.3213 14.0088C19.0206 13.4713 18.7089 12.7428 18.4735 11.7793M5.90099 8.97837L7.70525 3.98604L5.90126 8.97181C5.90117 8.974 5.90108 8.97619 5.90099 8.97837Z"
|
||||
fill={color}
|
||||
/>
|
||||
<circle cx="17" cy="7" r="3" fill={accentColor} />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default BellNotiIcon
|
||||
@@ -0,0 +1,57 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const BellOffIcon: React.FC<IconProps> = ({
|
||||
size = "20",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M11.2971 16.7566C11.1653 16.9839 10.976 17.1726 10.7483 17.3037C10.5206 17.4349 10.2624 17.5039 9.99964 17.5039C9.73686 17.5039 9.47869 17.4349 9.25097 17.3037C9.02326 17.1726 8.83401 16.9839 8.70215 16.7566"
|
||||
stroke={color}
|
||||
strokeWidth="1.49999"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M14.9723 10.7567C14.6386 9.53526 14.4795 8.27274 14.4998 7.00671"
|
||||
stroke={color}
|
||||
strokeWidth="1.49999"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M5.69498 5.7016C5.56468 6.1243 5.49894 6.56426 5.49998 7.00659C5.49998 12.2566 3.25 13.7565 3.25 13.7565H13.7499"
|
||||
stroke={color}
|
||||
strokeWidth="1.49999"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M14.4994 7.00665C14.5006 6.19145 14.2804 5.39124 13.8622 4.69148C13.444 3.99173 12.8435 3.41871 12.125 3.03365C11.4065 2.64859 10.5969 2.46595 9.78261 2.50523C8.96836 2.54451 8.18007 2.80424 7.50195 3.25667"
|
||||
stroke={color}
|
||||
strokeWidth="1.49999"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M2.5 2.50665L17.4999 17.5065"
|
||||
stroke={color}
|
||||
strokeWidth="1.49999"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default BellOffIcon
|
||||
@@ -0,0 +1,64 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const BuildingsIcon: React.FC<IconProps> = ({
|
||||
size = "20",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox={`0 0 20 20`}
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M17.0141 16.5422V8.79964C17.0141 8.5943 16.9325 8.39736 16.7873 8.25216C16.6421 8.10696 16.4452 8.02539 16.2398 8.02539H13.1428"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M3.07739 16.5422V4.15414C3.07739 3.94879 3.15897 3.75186 3.30417 3.60666C3.44937 3.46146 3.6463 3.37988 3.85165 3.37988H12.3684C12.5738 3.37988 12.7707 3.46146 12.9159 3.60666C13.0611 3.75186 13.1427 3.94879 13.1427 4.15414V16.5422"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M5.98071 6.6521H10.2391"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M5.98071 9.96094H10.2391"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M5.98087 16.5422H10.2393V13.2089H5.98087V16.5422Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M17.7885 16.5422H2.30347"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default BuildingsIcon
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const CancelIcon: React.FC<IconProps> = ({
|
||||
size = "16",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M5 5L15 15"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default CancelIcon
|
||||
@@ -0,0 +1,49 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const CartIcon: React.FC<IconProps> = ({
|
||||
size = "24",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M5.70291 11.7848L4.18457 5.34766H16.6736C17.3175 5.34766 17.7893 5.89045 17.633 6.45189L16.2997 11.242C16.0969 11.9695 15.4084 12.5043 14.5776 12.579L7.83552 13.1848C6.83054 13.2745 5.91162 12.6713 5.70291 11.7848V11.7848Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M4.18418 5.34722L3.54123 2.68213H1.83594"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M14.2117 15.7988C13.7978 15.7988 13.4618 16.1349 13.4659 16.5488C13.4659 16.9628 13.8019 17.2988 14.2158 17.2988C14.6298 17.2988 14.9658 16.9628 14.9658 16.5488C14.9638 16.1349 14.6277 15.7988 14.2117 15.7988Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M7.20104 15.7988C6.78655 15.7988 6.45003 16.1344 6.45414 16.5478C6.45003 16.9632 6.7886 17.2988 7.20309 17.2988C7.61758 17.2988 7.9541 16.9632 7.9541 16.5499C7.9541 16.1344 7.61758 15.7988 7.20104 15.7988Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
export default CartIcon
|
||||
@@ -0,0 +1,99 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const CashIcon: React.FC<IconProps> = ({
|
||||
size = "20",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M3.75 7.5H2.5"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M3.75 12.5H2.5"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M3.33366 10H1.66699"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M4.69727 4.6967C5.74616 3.64781 7.08253 2.9335 8.53739 2.64411C9.99225 2.35472 11.5002 2.50325 12.8707 3.07091C14.2411 3.63856 15.4125 4.59986 16.2366 5.83323C17.0607 7.0666 17.5006 8.51664 17.5006 10C17.5006 11.4834 17.0607 12.9334 16.2366 14.1668C15.4125 15.4001 14.2411 16.3614 12.8707 16.9291C11.5002 17.4968 9.99225 17.6453 8.53739 17.3559C7.08253 17.0665 5.74616 16.3522 4.69727 15.3033"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M10 6.25V7.00737"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M8.125 8.52196C8.17767 8.07456 8.40336 7.66555 8.75379 7.38246C9.10421 7.09936 9.55152 6.96468 10 7.00722"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M10 13.7501V12.9927"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M11.875 11.4778C11.8223 11.9252 11.5966 12.3343 11.2462 12.6174C10.8958 12.9004 10.4485 13.0351 10 12.9926"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M11.8273 8.19148C11.6899 7.8243 11.4381 7.51099 11.1091 7.29776C10.7801 7.08453 10.3913 6.98266 10 7.00718"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M8.17188 11.8083C8.30928 12.1755 8.56105 12.4888 8.89004 12.702C9.21904 12.9152 9.60785 13.0171 9.99913 12.9926"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M8.125 8.52216C8.125 8.83316 8.23276 9.13455 8.42993 9.37506C8.6271 9.61556 8.90151 9.78033 9.20647 9.84132L10.7935 10.1587C11.0985 10.2197 11.3729 10.3845 11.5701 10.625C11.7672 10.8655 11.875 11.1669 11.875 11.4779"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default CashIcon
|
||||
@@ -0,0 +1,65 @@
|
||||
import React from "react"
|
||||
|
||||
import IconProps from "./types/icon-type"
|
||||
|
||||
const ChannelsIcon: React.FC<IconProps> = ({
|
||||
size = "24px",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M17.6627 7.05C18.7811 7.05 19.6877 6.14338 19.6877 5.025C19.6877 3.90662 18.7811 3 17.6627 3C16.5443 3 15.6377 3.90662 15.6377 5.025C15.6377 6.14338 16.5443 7.05 17.6627 7.05Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M17.6627 14.025C18.7811 14.025 19.6877 13.1184 19.6877 12C19.6877 10.8816 18.7811 9.97498 17.6627 9.97498C16.5443 9.97498 15.6377 10.8816 15.6377 12C15.6377 13.1184 16.5443 14.025 17.6627 14.025Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M5.5123 14.025C6.63068 14.025 7.5373 13.1184 7.5373 12C7.5373 10.8816 6.63068 9.97498 5.5123 9.97498C4.39393 9.97498 3.4873 10.8816 3.4873 12C3.4873 13.1184 4.39393 14.025 5.5123 14.025Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M17.6627 21C18.7811 21 19.6877 20.0933 19.6877 18.975C19.6877 17.8566 18.7811 16.95 17.6627 16.95C16.5443 16.95 15.6377 17.8566 15.6377 18.975C15.6377 20.0933 16.5443 21 17.6627 21Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M15.6369 5.02502H13.3869C12.3924 5.02502 11.5869 5.83052 11.5869 6.82502V17.175C11.5869 18.1695 12.3924 18.975 13.3869 18.975H15.6369"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M15.6361 12H7.53613"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default ChannelsIcon
|
||||
+28
@@ -0,0 +1,28 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const CheckCircleFillIcon: React.FC<IconProps> = ({
|
||||
size = "24",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M18 10C18 14.4184 14.4184 18 10 18C5.5816 18 2 14.4184 2 10C2 5.5816 5.5816 2 10 2C14.4184 2 18 5.5816 18 10ZM13.9053 8.28033C14.1982 7.98744 14.1982 7.51256 13.9053 7.21967C13.6124 6.92678 13.1376 6.92678 12.8447 7.21967L8.875 11.1893L7.15533 9.46967C6.86244 9.17678 6.38756 9.17678 6.09467 9.46967C5.80178 9.76256 5.80178 10.2374 6.09467 10.5303L8.34467 12.7803C8.63756 13.0732 9.11244 13.0732 9.40533 12.7803L13.9053 8.28033Z"
|
||||
fill={color}
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default CheckCircleFillIcon
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const CheckCircleIcon: React.FC<IconProps> = ({
|
||||
size = "24",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M10 17.5C14.1422 17.5 17.5 14.1422 17.5 10C17.5 5.85775 14.1422 2.5 10 2.5C5.85775 2.5 2.5 5.85775 2.5 10C2.5 14.1422 5.85775 17.5 10 17.5Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M7.5 9.99998L9.16667 11.6666L12.5 8.33331"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default CheckCircleIcon
|
||||
@@ -0,0 +1,29 @@
|
||||
import React from "react"
|
||||
import IconProps from "./types/icon-type"
|
||||
|
||||
const CheckIcon: React.FC<IconProps> = ({
|
||||
size = "24px",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M13.3334 4L6.00008 11.3333L2.66675 8"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default CheckIcon
|
||||
@@ -0,0 +1,29 @@
|
||||
import React from "react"
|
||||
import IconProps from "./types/icon-type"
|
||||
|
||||
const ChevronDownIcon: React.FC<IconProps> = ({
|
||||
size = "24px",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M4 6L8 10L12 6"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default ChevronDownIcon
|
||||
@@ -0,0 +1,29 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const ChevronLeftIcon: React.FC<IconProps> = ({
|
||||
size = "24",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M9 12L5 8L9 4"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default ChevronLeftIcon
|
||||
@@ -0,0 +1,29 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const ChevronRightIcon: React.FC<IconProps> = ({
|
||||
size = "24",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M6 12L10 8L6 4"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default ChevronRightIcon
|
||||
@@ -0,0 +1,29 @@
|
||||
import React from "react"
|
||||
import IconProps from "./types/icon-type"
|
||||
|
||||
const ChevronUpIcon: React.FC<IconProps> = ({
|
||||
size = "24px",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M5 12.5L10 7.5L15 12.5"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default ChevronUpIcon
|
||||
@@ -0,0 +1,50 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const ClipboardCopyIcon: React.FC<IconProps> = ({
|
||||
size = "20",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M12.917 4.16669H14.3753C14.7621 4.16669 15.133 4.32277 15.4065 4.6006C15.68 4.87843 15.8337 5.25526 15.8337 5.64817V8.33335M7.08366 4.16669H5.62533C5.23855 4.16669 4.86762 4.32277 4.59413 4.6006C4.32064 4.87843 4.16699 5.25526 4.16699 5.64817V16.0185C4.16699 16.4115 4.32064 16.7883 4.59413 17.0661C4.86762 17.3439 5.23855 17.5 5.62533 17.5H14.3753C14.7621 17.5 15.133 17.3439 15.4065 17.0661C15.68 16.7883 15.8337 16.4115 15.8337 16.0185V15"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M11.875 2.5H8.125C7.77982 2.5 7.5 2.8731 7.5 3.33333V5C7.5 5.46024 7.77982 5.83333 8.125 5.83333H11.875C12.2202 5.83333 12.5 5.46024 12.5 5V3.33333C12.5 2.8731 12.2202 2.5 11.875 2.5Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M17.5 11.6667H10"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M12.5 9.16669L10 11.6667L12.5 14.1667"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default ClipboardCopyIcon
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const ClockIcon: React.FC<IconProps> = ({
|
||||
size = "20",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M8 4.66669V8.16669L10 9.33335"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default ClockIcon
|
||||
@@ -0,0 +1,50 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const CoinsIcon: React.FC<IconProps> = ({
|
||||
size = "24",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M8.39844 13.2534C11.1599 13.2534 13.3984 11.0148 13.3984 8.25336C13.3984 5.49193 11.1599 3.25336 8.39844 3.25336C5.63701 3.25336 3.39844 5.49193 3.39844 8.25336C3.39844 11.0148 5.63701 13.2534 8.39844 13.2534Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M18.187 11.7466C18.8282 12.1161 19.3757 12.6281 19.7872 13.2431C20.1987 13.8582 20.4631 14.5596 20.56 15.2932C20.6569 16.0268 20.5837 16.7729 20.346 17.4737C20.1083 18.1744 19.7125 18.8111 19.1892 19.3343C18.666 19.8576 18.0293 20.2534 17.3286 20.4911C16.6278 20.7288 15.8818 20.802 15.1481 20.7051C14.4145 20.6082 13.7131 20.3438 13.0981 19.9323C12.4831 19.5208 11.971 18.9733 11.6016 18.3321"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M7.39844 6.75336H8.39844V9.75336"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M15.9874 13.6536L16.5964 14.2129L14.1602 16.4501"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default CoinsIcon
|
||||
+36
@@ -0,0 +1,36 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const CornerDownRightIcon: React.FC<IconProps> = ({
|
||||
size = "16",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M10 6.66602L13.3333 9.99935L10 13.3327"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M2.66797 2.66602V7.33268C2.66797 8.03993 2.94892 8.7182 3.44902 9.2183C3.94911 9.7184 4.62739 9.99935 5.33464 9.99935H13.3346"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default CornerDownRightIcon
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const CrossIcon: React.FC<IconProps> = ({
|
||||
size = "20",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M15 5L5 15"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M5 5L15 15"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default CrossIcon
|
||||
@@ -0,0 +1,57 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const CrosshairIcon: React.FC<IconProps> = ({
|
||||
size = "24",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M21 12H17"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M7 12H3"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M12 7V3"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M12 21V17"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default CrosshairIcon
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const CustomerIcon: React.FC<IconProps> = ({
|
||||
size = "24",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default CustomerIcon
|
||||
@@ -0,0 +1,57 @@
|
||||
import React from "react"
|
||||
import IconProps from "./types/icon-type"
|
||||
|
||||
const DetailsIcon: React.FC<IconProps> = ({
|
||||
size = "16",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M15.4444 17H4.55556C3.7 17 3 16.35 3 15.5556V5.44444C3 4.65 3.7 4 4.55556 4H15.4444C16.3 4 17 4.65 17 5.44444V15.5556C17 16.35 16.3 17 15.4444 17Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M13 2.43994V3.43994"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M7 2.43994V3.43994"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M10 10.7632C11.1046 10.7632 12 9.86775 12 8.76318C12 7.65861 11.1046 6.76318 10 6.76318C8.89543 6.76318 8 7.65861 8 8.76318C8 9.86775 8.89543 10.7632 10 10.7632Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M14 14.2979C12.88 13.6312 11.52 13.2979 10 13.2979C8.48 13.2979 7.12 13.6979 6 14.2979"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default DetailsIcon
|
||||
@@ -0,0 +1,26 @@
|
||||
import React from "react"
|
||||
import IconProps from "./types/icon-type"
|
||||
|
||||
const DiscordIcon: React.FC<IconProps> = ({
|
||||
size = "16",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M18.9308 5.63282C17.6561 5.04792 16.2892 4.61699 14.8599 4.37018C14.8339 4.36541 14.8079 4.37732 14.7945 4.40112C14.6187 4.7138 14.4239 5.12172 14.2876 5.44234C12.7503 5.2122 11.221 5.2122 9.71527 5.44234C9.57887 5.11459 9.37707 4.7138 9.20048 4.40112C9.18707 4.37811 9.16107 4.36621 9.13504 4.37018C7.70659 4.6162 6.33963 5.04713 5.06411 5.63282C5.05307 5.63758 5.04361 5.64552 5.03732 5.65583C2.44449 9.52947 1.73421 13.3079 2.08265 17.0395C2.08423 17.0577 2.09447 17.0752 2.10867 17.0863C3.81934 18.3426 5.47642 19.1052 7.10273 19.6108C7.12876 19.6187 7.15634 19.6092 7.1729 19.5877C7.55761 19.0624 7.90054 18.5085 8.19456 17.9259C8.21192 17.8918 8.19535 17.8513 8.15989 17.8378C7.61594 17.6315 7.098 17.3799 6.59977 17.0942C6.56037 17.0712 6.55721 17.0148 6.59347 16.9879C6.69831 16.9093 6.80318 16.8275 6.9033 16.745C6.92141 16.7299 6.94665 16.7268 6.96794 16.7363C10.2411 18.2307 13.7846 18.2307 17.0191 16.7363C17.0404 16.726 17.0657 16.7292 17.0846 16.7442C17.1847 16.8268 17.2895 16.9093 17.3952 16.9879C17.4314 17.0148 17.4291 17.0712 17.3897 17.0942C16.8914 17.3855 16.3735 17.6315 15.8288 17.837C15.7933 17.8505 15.7775 17.8918 15.7949 17.9259C16.0952 18.5076 16.4381 19.0616 16.8157 19.587C16.8315 19.6092 16.8599 19.6187 16.8859 19.6108C18.5201 19.1052 20.1772 18.3426 21.8879 17.0863C21.9028 17.0752 21.9123 17.0585 21.9139 17.0403C22.3309 12.7261 21.2154 8.9787 18.9568 5.65662C18.9513 5.64552 18.9419 5.63758 18.9308 5.63282ZM8.68335 14.7673C7.69792 14.7673 6.88594 13.8626 6.88594 12.7515C6.88594 11.6405 7.68217 10.7358 8.68335 10.7358C9.69239 10.7358 10.4965 11.6484 10.4807 12.7515C10.4807 13.8626 9.68451 14.7673 8.68335 14.7673ZM15.329 14.7673C14.3435 14.7673 13.5316 13.8626 13.5316 12.7515C13.5316 11.6405 14.3278 10.7358 15.329 10.7358C16.338 10.7358 17.1421 11.6484 17.1264 12.7515C17.1264 13.8626 16.338 14.7673 15.329 14.7673Z"
|
||||
fill={color}
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default DiscordIcon
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const DollarSignIcon: React.FC<IconProps> = ({
|
||||
size = "24",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M12 3V21"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M17 6H9.5C8.57174 6 7.6815 6.31607 7.02513 6.87868C6.36875 7.44129 6 8.20435 6 9C6 9.79565 6.36875 10.5587 7.02513 11.1213C7.6815 11.6839 8.57174 12 9.5 12H14.5C15.4283 12 16.3185 12.3161 16.9749 12.8787C17.6313 13.4413 18 14.2044 18 15C18 15.7956 17.6313 16.5587 16.9749 17.1213C16.3185 17.6839 15.4283 18 14.5 18H6"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default DollarSignIcon
|
||||
@@ -0,0 +1,34 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const DownLeftIcon: React.FC<IconProps> = ({
|
||||
size = "16",
|
||||
color = "#9CA3AF",
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.00033 6.66663L2.66699 9.99996L6.00033 13.3333"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M13.3337 2.66663V7.33329C13.3337 8.04054 13.0527 8.71881 12.5526 9.21891C12.0525 9.71901 11.3742 9.99996 10.667 9.99996H2.66699"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default DownLeftIcon
|
||||
@@ -0,0 +1,42 @@
|
||||
import React, { FC } from "react"
|
||||
import IconProps from "./types/icon-type"
|
||||
|
||||
const DownloadIcon: FC<IconProps> = (props) => {
|
||||
const { fill, size, ...attributes } = props
|
||||
const line = fill || "#111827"
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={size || 20}
|
||||
height={size || 20}
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5"
|
||||
stroke={line}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M5.83203 8.33301L9.9987 12.4997L14.1654 8.33301"
|
||||
stroke={line}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M10 12.5V2.5"
|
||||
stroke={line}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default DownloadIcon
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from "react"
|
||||
import IconProps from "./types/icon-type"
|
||||
|
||||
const DuplicateIcon: React.FC<IconProps> = ({
|
||||
size = "20px",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M16.0894 8.33333H9.74326C8.9644 8.33333 8.33301 8.96472 8.33301 9.74358V16.0897C8.33301 16.8686 8.9644 17.5 9.74326 17.5H16.0894C16.8683 17.5 17.4997 16.8686 17.4997 16.0897V9.74358C17.4997 8.96472 16.8683 8.33333 16.0894 8.33333Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M4.61538 11.6667H3.91026C3.53623 11.6667 3.17753 11.5181 2.91305 11.2536C2.64858 10.9891 2.5 10.6304 2.5 10.2564V3.91026C2.5 3.53623 2.64858 3.17753 2.91305 2.91305C3.17753 2.64858 3.53623 2.5 3.91026 2.5H10.2564C10.6304 2.5 10.9891 2.64858 11.2536 2.91305C11.5181 3.17753 11.6667 3.53623 11.6667 3.91026V4.61538"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default DuplicateIcon
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from "react"
|
||||
import IconProps from "./types/icon-type"
|
||||
|
||||
const EditIcon: React.FC<IconProps> = ({
|
||||
size = "24px",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M9 3H4.55556C4.143 3 3.74733 3.16389 3.45561 3.45561C3.16389 3.74733 3 4.143 3 4.55556V15.4444C3 15.857 3.16389 16.2527 3.45561 16.5444C3.74733 16.8361 4.143 17 4.55556 17H15.4444C15.857 17 16.2527 16.8361 16.5444 16.5444C16.8361 16.2527 17 15.857 17 15.4444V11"
|
||||
stroke={color}
|
||||
strokeWidth="1.4667"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M14.4356 3.43999C14.7173 3.15827 15.0994 3 15.4978 3C15.8962 3 16.2783 3.15827 16.56 3.43999C16.8417 3.72171 17 4.1038 17 4.50221C17 4.90062 16.8417 5.28272 16.56 5.56443L9.8326 12.2919L7 13L7.70815 10.1674L14.4356 3.43999Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default EditIcon
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const EditIcon: React.FC<IconProps> = ({
|
||||
size = "20",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M9 3H4.55556C4.143 3 3.74733 3.16389 3.45561 3.45561C3.16389 3.74733 3 4.143 3 4.55556V15.4444C3 15.857 3.16389 16.2527 3.45561 16.5444C3.74733 16.8361 4.143 17 4.55556 17H15.4444C15.857 17 16.2527 16.8361 16.5444 16.5444C16.8361 16.2527 17 15.857 17 15.4444V11"
|
||||
stroke={color}
|
||||
strokeWidth="1.4667"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M14.4356 3.43999C14.7173 3.15827 15.0994 3 15.4978 3C15.8962 3 16.2783 3.15827 16.56 3.43999C16.8417 3.72171 17 4.1038 17 4.50221C17 4.90062 16.8417 5.28272 16.56 5.56443L9.8326 12.2919L7 13L7.70815 10.1674L14.4356 3.43999Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default EditIcon
|
||||
@@ -0,0 +1,43 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const ExportIcon: React.FC<IconProps> = ({
|
||||
size = "20",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 21 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M17.5 13V15.6667C17.5 16.0203 17.3361 16.3594 17.0444 16.6095C16.7527 16.8595 16.357 17 15.9444 17H5.05556C4.643 17 4.24733 16.8595 3.95561 16.6095C3.66389 16.3594 3.5 16.0203 3.5 15.6667V13"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M14.6673 6.92057L10.5007 2.75391L6.33398 6.92057"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M10.5 2.75391V12.7539"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default ExportIcon
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const EyeIcon: React.FC<IconProps> = ({
|
||||
size = "20",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M2.5 10C2.5 10 5.22727 4.58337 10 4.58337C14.7727 4.58337 17.5 10 17.5 10C17.5 10 14.7727 15.4167 10 15.4167C5.22727 15.4167 2.5 10 2.5 10Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9.99965 12.0739C11.145 12.0739 12.0735 11.1454 12.0735 10C12.0735 8.85465 11.145 7.92615 9.99965 7.92615C8.85428 7.92615 7.92578 8.85465 7.92578 10C7.92578 11.1454 8.85428 12.0739 9.99965 12.0739Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default EyeIcon
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const EyeOffIcon: React.FC<IconProps> = ({
|
||||
size = "20",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M8.56818 4.70906C9.0375 4.59921 9.518 4.54429 10 4.54543C14.7727 4.54543 17.5 9.99997 17.5 9.99997C17.0861 10.7742 16.5925 11.5032 16.0273 12.175M11.4455 11.4454C11.2582 11.6464 11.0324 11.8076 10.7815 11.9194C10.5306 12.0312 10.2597 12.0913 9.98506 12.0961C9.71042 12.101 9.43761 12.0505 9.18292 11.9476C8.92822 11.8447 8.69686 11.6916 8.50262 11.4973C8.30839 11.3031 8.15527 11.0718 8.05239 10.8171C7.94952 10.5624 7.899 10.2896 7.90384 10.0149C7.90869 9.74027 7.9688 9.46941 8.0806 9.2185C8.19239 8.9676 8.35358 8.74178 8.55455 8.55452M14.05 14.05C12.8845 14.9384 11.4653 15.4306 10 15.4545C5.22727 15.4545 2.5 9.99997 2.5 9.99997C3.34811 8.41945 4.52441 7.03857 5.95 5.94997L14.05 14.05Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M2.5 2.5L17.5 17.5"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default EyeOffIcon
|
||||
@@ -0,0 +1,64 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const FastDeliveryIcon: React.FC<IconProps> = ({
|
||||
size = "20",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M3.02901 6.12695H2.25439"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M3.80363 3.8031H2.25439"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M13.8734 16.1969H3.02881"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M14.0861 3.8031L13.3224 6.34927C13.224 6.67693 12.9219 6.90157 12.5803 6.90157H10.1697C9.65067 6.90157 9.27886 6.40117 9.42758 5.90464L10.0581 3.8031"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M6.90088 10.7745H8.55081"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M14.2125 13.0985H6.01087C4.76529 13.0985 3.87216 11.8978 4.23003 10.7049L5.9032 5.1277C6.13946 4.34146 6.86295 3.8031 7.68405 3.8031H15.8865C17.1321 3.8031 18.0252 5.00376 17.6673 6.19667L15.9941 11.7739C15.7579 12.5601 15.0336 13.0985 14.2125 13.0985Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default FastDeliveryIcon
|
||||
@@ -0,0 +1,55 @@
|
||||
import React, { FC } from "react"
|
||||
import IconProps from "./types/icon-type"
|
||||
|
||||
const FileIcon: FC<IconProps> = (props) => {
|
||||
const { fill, size, ...attributes } = props
|
||||
const line = fill || "#2DD4BF"
|
||||
return (
|
||||
<svg
|
||||
width={size || 20}
|
||||
height={size || 20}
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M13.333 17.5H14.1663C14.8294 17.5 15.4653 17.2366 15.9341 16.7678C16.4029 16.2989 16.6663 15.663 16.6663 15V7.09109C16.6663 6.42805 16.4029 5.79217 15.9341 5.32333L13.843 3.23223C13.3742 2.76339 12.7383 2.5 12.0752 2.5H5.83301C5.16997 2.5 4.53408 2.76339 4.06524 3.23223C3.5964 3.70107 3.33301 4.33696 3.33301 5V7.5"
|
||||
stroke={line}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M16.6663 7.08333H13.7497C13.3076 7.08333 12.8837 6.90774 12.5712 6.59518C12.2586 6.28262 12.083 5.85869 12.083 5.41667V2.5"
|
||||
stroke={line}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M4.99967 10H9.16634C9.60837 10 10.0323 10.1756 10.3449 10.4882C10.6574 10.8007 10.833 11.2246 10.833 11.6667V15.8333C10.833 16.2754 10.6574 16.6993 10.3449 17.0118C10.0323 17.3244 9.60837 17.5 9.16634 17.5H4.99967C4.55765 17.5 4.13372 17.3244 3.82116 17.0118C3.5086 16.6993 3.33301 16.2754 3.33301 15.8333V11.6667C3.33301 11.2246 3.5086 10.8007 3.82116 10.4882C4.13372 10.1756 4.55765 10 4.99967 10V10Z"
|
||||
stroke={line}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M10.833 13.75H3.33301"
|
||||
stroke={line}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M7.08301 10V17.5"
|
||||
stroke={line}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default FileIcon
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const GearIcon: React.FC<IconProps> = ({
|
||||
size = "24",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M12.1952 3H11.8048C11.3342 3 10.8829 3.18964 10.5502 3.52721C10.2174 3.86477 10.0305 4.32261 10.0305 4.8V4.962C10.0302 5.27765 9.94806 5.58767 9.79235 5.86095C9.63663 6.13424 9.41282 6.36117 9.14336 6.519L8.76188 6.744C8.49215 6.90198 8.18618 6.98515 7.87472 6.98515C7.56327 6.98515 7.2573 6.90198 6.98757 6.744L6.8545 6.672C6.44735 6.43374 5.96365 6.3691 5.50957 6.49228C5.05549 6.61546 4.66815 6.91638 4.43256 7.329L4.23739 7.671C4.00252 8.08404 3.93881 8.57475 4.06023 9.0354C4.18165 9.49605 4.47828 9.889 4.88501 10.128L5.01808 10.218C5.28625 10.3751 5.50923 10.6006 5.66486 10.8721C5.8205 11.1437 5.90337 11.4519 5.90524 11.766V12.225C5.90648 12.5422 5.82508 12.8541 5.66929 13.1291C5.5135 13.4041 5.28885 13.6324 5.01808 13.791L4.88501 13.872C4.47828 14.111 4.18165 14.5039 4.06023 14.9646C3.93881 15.4253 4.00252 15.916 4.23739 16.329L4.43256 16.671C4.66815 17.0836 5.05549 17.3845 5.50957 17.5077C5.96365 17.6309 6.44735 17.5663 6.8545 17.328L6.98757 17.256C7.2573 17.098 7.56327 17.0148 7.87472 17.0148C8.18618 17.0148 8.49215 17.098 8.76188 17.256L9.14336 17.481C9.41282 17.6388 9.63663 17.8658 9.79235 18.139C9.94806 18.4123 10.0302 18.7223 10.0305 19.038V19.2C10.0305 19.6774 10.2174 20.1352 10.5502 20.4728C10.8829 20.8104 11.3342 21 11.8048 21H12.1952C12.6658 21 13.1171 20.8104 13.4498 20.4728C13.7826 20.1352 13.9695 19.6774 13.9695 19.2V19.038C13.9698 18.7223 14.0519 18.4123 14.2077 18.139C14.3634 17.8658 14.5872 17.6388 14.8566 17.481L15.2381 17.256C15.5078 17.098 15.8138 17.0148 16.1253 17.0148C16.4367 17.0148 16.7427 17.098 17.0124 17.256L17.1455 17.328C17.5527 17.5663 18.0364 17.6309 18.4904 17.5077C18.9445 17.3845 19.3319 17.0836 19.5674 16.671L19.7626 16.32C19.9975 15.907 20.0612 15.4163 19.9398 14.9556C19.8184 14.4949 19.5217 14.102 19.115 13.863L18.9819 13.791C18.7111 13.6324 18.4865 13.4041 18.3307 13.1291C18.1749 12.8541 18.0935 12.5422 18.0948 12.225V11.775C18.0935 11.4578 18.1749 11.1459 18.3307 10.8709C18.4865 10.5959 18.7111 10.3676 18.9819 10.209L19.115 10.128C19.5217 9.889 19.8184 9.49605 19.9398 9.0354C20.0612 8.57475 19.9975 8.08404 19.7626 7.671L19.5674 7.329C19.3319 6.91638 18.9445 6.61546 18.4904 6.49228C18.0364 6.3691 17.5527 6.43374 17.1455 6.672L17.0124 6.744C16.7427 6.90198 16.4367 6.98515 16.1253 6.98515C15.8138 6.98515 15.5078 6.90198 15.2381 6.744L14.8566 6.519C14.5872 6.36117 14.3634 6.13424 14.2077 5.86095C14.0519 5.58767 13.9698 5.27765 13.9695 4.962V4.8C13.9695 4.32261 13.7826 3.86477 13.4498 3.52721C13.1171 3.18964 12.6658 3 12.1952 3Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default GearIcon
|
||||
@@ -0,0 +1,57 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const GiftIcon: React.FC<IconProps> = ({
|
||||
size = "24",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M19 11.5V19.5H5V11.5"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M21 7.5H3V11.5H21V7.5Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M12 19.5V7.5"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M12 7.5H8.14286C7.57454 7.5 7.02949 7.23661 6.62763 6.76777C6.22576 6.29893 6 5.66304 6 5C6 4.33696 6.22576 3.70107 6.62763 3.23223C7.02949 2.76339 7.57454 2.5 8.14286 2.5C11.1429 2.5 12 7.5 12 7.5Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M12 7.5H15.8571C16.4255 7.5 16.9705 7.23661 17.3724 6.76777C17.7742 6.29893 18 5.66304 18 5C18 4.33696 17.7742 3.70107 17.3724 3.23223C16.9705 2.76339 16.4255 2.5 15.8571 2.5C12.8571 2.5 12 7.5 12 7.5Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default GiftIcon
|
||||
@@ -0,0 +1,64 @@
|
||||
import React from "react"
|
||||
import IconProps from "./types/icon-type"
|
||||
|
||||
const GripIcon: React.FC<IconProps> = ({
|
||||
size = "24px",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M7.49935 10.8337C7.95959 10.8337 8.33268 10.4606 8.33268 10.0003C8.33268 9.54009 7.95959 9.16699 7.49935 9.16699C7.03911 9.16699 6.66602 9.54009 6.66602 10.0003C6.66602 10.4606 7.03911 10.8337 7.49935 10.8337Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.66667"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M7.49935 4.99967C7.95959 4.99967 8.33268 4.62658 8.33268 4.16634C8.33268 3.7061 7.95959 3.33301 7.49935 3.33301C7.03911 3.33301 6.66602 3.7061 6.66602 4.16634C6.66602 4.62658 7.03911 4.99967 7.49935 4.99967Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.66667"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M7.49935 16.6667C7.95959 16.6667 8.33268 16.2936 8.33268 15.8333C8.33268 15.3731 7.95959 15 7.49935 15C7.03911 15 6.66602 15.3731 6.66602 15.8333C6.66602 16.2936 7.03911 16.6667 7.49935 16.6667Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.66667"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M12.4993 10.8337C12.9596 10.8337 13.3327 10.4606 13.3327 10.0003C13.3327 9.54009 12.9596 9.16699 12.4993 9.16699C12.0391 9.16699 11.666 9.54009 11.666 10.0003C11.666 10.4606 12.0391 10.8337 12.4993 10.8337Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.66667"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M12.4993 4.99967C12.9596 4.99967 13.3327 4.62658 13.3327 4.16634C13.3327 3.7061 12.9596 3.33301 12.4993 3.33301C12.0391 3.33301 11.666 3.7061 11.666 4.16634C11.666 4.62658 12.0391 4.99967 12.4993 4.99967Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.66667"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M12.4993 16.6667C12.9596 16.6667 13.3327 16.2936 13.3327 15.8333C13.3327 15.3731 12.9596 15 12.4993 15C12.0391 15 11.666 15.3731 11.666 15.8333C11.666 16.2936 12.0391 16.6667 12.4993 16.6667Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.66667"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default GripIcon
|
||||
@@ -0,0 +1,50 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const HappyIcon: React.FC<IconProps> = ({
|
||||
size = "24",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M8 14C8 14 9.5 16 12 16C14.5 16 16 14 16 14"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9 9H9.01"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M15 9H15.01"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default HappyIcon
|
||||
@@ -0,0 +1,43 @@
|
||||
import React from "react"
|
||||
import IconProps from "./types/icon-type"
|
||||
|
||||
const HelpCircleIcon: React.FC<IconProps> = ({
|
||||
size = "24px",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9.08594 9.03573C9.32104 8.36739 9.78509 7.80383 10.3959 7.44486C11.0067 7.08588 11.7248 6.95466 12.4231 7.07444C13.1214 7.19421 13.7548 7.55725 14.211 8.09925C14.6673 8.64126 14.917 9.32725 14.9159 10.0357C14.9159 12.0357 11.9159 13.0357 11.9159 13.0357"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M11.9961 16.4316H12.0061"
|
||||
stroke={color}
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default HelpCircleIcon
|
||||
+43
@@ -0,0 +1,43 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const ImagePlaceholderIcon: React.FC<IconProps> = ({
|
||||
size = "24",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M18.2222 4H5.77778C4.79594 4 4 4.79594 4 5.77778V18.2222C4 19.2041 4.79594 20 5.77778 20H18.2222C19.2041 20 20 19.2041 20 18.2222V5.77778C20 4.79594 19.2041 4 18.2222 4Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9.5 11C10.3284 11 11 10.3284 11 9.5C11 8.67157 10.3284 8 9.5 8C8.67157 8 8 8.67157 8 9.5C8 10.3284 8.67157 11 9.5 11Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M20 15.0909L15.625 11L6 20"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default ImagePlaceholderIcon
|
||||
@@ -0,0 +1,43 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const InfoIcon: React.FC<IconProps> = ({
|
||||
size = "16",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M8 10.6667V8"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M8 5.33331H8.0075"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default InfoIcon
|
||||
@@ -0,0 +1,30 @@
|
||||
import React from "react"
|
||||
|
||||
import IconProps from "./types/icon-type"
|
||||
|
||||
const KeyIcon: React.FC<IconProps> = ({
|
||||
size = "32px",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M18.9095 10.761C19.5268 10.761 20.1188 11.0063 20.5553 11.4427C20.9918 11.8792 21.237 12.4713 21.237 13.0886M23.5646 13.0886C23.5647 13.7675 23.4162 14.4383 23.1297 15.0538C22.8432 15.6693 22.4255 16.2147 21.9059 16.6518C21.3863 17.0888 20.7773 17.4069 20.1218 17.5837C19.4663 17.7605 18.78 17.7918 18.1111 17.6754C17.6743 17.6001 17.2119 17.6955 16.8985 18.009L14.8363 20.0712H13.0906V21.8168H11.345V23.5625H8.43555V21.3762C8.43555 20.913 8.61942 20.4684 8.94683 20.1418L13.9891 15.0996C14.3025 14.7861 14.3979 14.3237 14.3227 13.8869C14.2127 13.2516 14.2358 12.6004 14.3907 11.9745C14.5455 11.3487 14.8287 10.7618 15.2222 10.2511C15.6158 9.74039 16.1112 9.31702 16.6769 9.0078C17.2427 8.69858 17.8665 8.51026 18.5088 8.45477C19.1512 8.39928 19.7981 8.47784 20.4085 8.68545C21.0189 8.89307 21.5795 9.22523 22.0548 9.66087C22.5301 10.0965 22.9097 10.6261 23.1696 11.2162C23.4295 11.8062 23.564 12.4438 23.5646 13.0886V13.0886Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default KeyIcon
|
||||
@@ -0,0 +1,57 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const ListArrowIcon: React.FC<IconProps> = ({
|
||||
size = "20",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M10.8335 4.16663H2.50016"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M10.8335 7.5H5.00016"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M10.8335 10.8334H7.50016"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M17.5 14.1666L15 16.6666L12.5 14.1666"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M15 15V3.33337"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default ListArrowIcon
|
||||
@@ -0,0 +1,64 @@
|
||||
import React from "react"
|
||||
import IconProps from "./types/icon-type"
|
||||
|
||||
const ListIcon: React.FC<IconProps> = ({
|
||||
size = "20px",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M6.66669 5H17.5"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M6.66669 10H17.5"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M6.66669 15H17.5"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M2.5 5H2.50875"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M2.5 10H2.50875"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M2.5 15H2.50875"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default ListIcon
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const LockIcon: React.FC<IconProps> = ({
|
||||
size = "16",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M15.1849 8.33334H4.81449C3.99629 8.33334 3.33301 9.0117 3.33301 9.8485V15.1515C3.33301 15.9883 3.99629 16.6667 4.81449 16.6667H15.1849C16.0031 16.6667 16.6663 15.9883 16.6663 15.1515V9.8485C16.6663 9.0117 16.0031 8.33334 15.1849 8.33334Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M6.66699 8.33333V5.74074C6.66699 4.88124 7.01818 4.05695 7.6433 3.44919C8.26842 2.84143 9.11627 2.5 10.0003 2.5C10.8844 2.5 11.7322 2.84143 12.3573 3.44919C12.9825 4.05695 13.3337 4.88124 13.3337 5.74074V8.33333"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default LockIcon
|
||||
@@ -0,0 +1,43 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const SignOutIcon: React.FC<IconProps> = ({
|
||||
size = "16",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M8 17H4.66667C4.22464 17 3.80072 16.8361 3.48816 16.5444C3.17559 16.2527 3 15.857 3 15.4444V4.55556C3 4.143 3.17559 3.74733 3.48816 3.45561C3.80072 3.16389 4.22464 3 4.66667 3H8"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M13 14L17 10L13 6"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M17 10L8 10"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default SignOutIcon
|
||||
+38
@@ -0,0 +1,38 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const LongArrowRightIcon: React.FC<IconProps> = ({
|
||||
size = "24",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
const width = +size * 2
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={size}
|
||||
viewBox="0 0 40 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M4 9H36"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M31 5L36 9L31 13"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default LongArrowRightIcon
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const MailIcon: React.FC<IconProps> = ({
|
||||
size = "24",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M4.8 5H19.2C20.19 5 21 5.7875 21 6.75V17.25C21 18.2125 20.19 19 19.2 19H4.8C3.81 19 3 18.2125 3 17.25V6.75C3 5.7875 3.81 5 4.8 5Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M20 6L12 12L4 6"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default MailIcon
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const MapPinIcon: React.FC<IconProps> = ({
|
||||
size = "24",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M19 10.3636C19 16.0909 12 21 12 21C12 21 5 16.0909 5 10.3636C5 8.41068 5.7375 6.53771 7.05025 5.15676C8.36301 3.77581 10.1435 3 12 3C13.8565 3 15.637 3.77581 16.9497 5.15676C18.2625 6.53771 19 8.41068 19 10.3636Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M12 12C13.1046 12 14 11.1046 14 10C14 8.89543 13.1046 8 12 8C10.8954 8 10 8.89543 10 10C10 11.1046 10.8954 12 12 12Z"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default MapPinIcon
|
||||
@@ -0,0 +1,23 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const MedusaIcon: React.FC<IconProps> = ({ size = "48", ...attributes }) => {
|
||||
const width = +size * 0.9375 // width relative to height (from size prop)
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={size}
|
||||
viewBox="0 0 45 48"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M38.8535 7.79156L28.0165 1.5383C24.4707 -0.512767 20.1259 -0.512767 16.5802 1.5383L5.69318 7.79156C2.19737 9.84263 0 13.6446 0 17.6967V30.2533C0 34.3554 2.19737 38.1073 5.69318 40.1584L16.5302 46.4617C20.076 48.5128 24.4208 48.5128 27.9665 46.4617L38.8036 40.1584C42.3493 38.1073 44.4967 34.3554 44.4967 30.2533V17.6967C44.5966 13.6446 42.3992 9.84263 38.8535 7.79156ZM22.2733 35.1558C16.1307 35.1558 11.1367 30.1532 11.1367 24C11.1367 17.8468 16.1307 12.8442 22.2733 12.8442C28.416 12.8442 33.4599 17.8468 33.4599 24C33.4599 30.1532 28.4659 35.1558 22.2733 35.1558Z"
|
||||
fill="#8B5CF6"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default MedusaIcon
|
||||
@@ -0,0 +1,39 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const MedusaVice: React.FC<IconProps> = ({
|
||||
size = "96",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 96 96"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M75.6103 20.9859L57.5892 10.5638C51.6929 7.14539 44.4678 7.14539 38.5715 10.5638L20.4673 20.9859C14.6541 24.4044 11 30.741 11 37.4945V58.4221C11 65.259 14.6541 71.5122 20.4673 74.9307L38.4884 85.4362C44.3848 88.8546 51.6098 88.8546 57.5061 85.4362L75.5273 74.9307C81.4236 71.5122 84.9946 65.259 84.9946 58.4221V37.4945C85.1607 30.741 81.5066 24.4044 75.6103 20.9859ZM48.0388 66.593C37.8241 66.593 29.5194 58.2553 29.5194 48C29.5194 37.7447 37.8241 29.407 48.0388 29.407C58.2535 29.407 66.6413 37.7447 66.6413 48C66.6413 58.2553 58.3366 66.593 48.0388 66.593Z"
|
||||
fill="url(#paint0_linear_2823_15237)"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_2823_15237"
|
||||
x1="11"
|
||||
y1="88"
|
||||
x2="100.328"
|
||||
y2="63.1913"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#7C53FF" />
|
||||
<stop offset="1" stopColor="#F796FF" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default MedusaVice
|
||||
@@ -0,0 +1,29 @@
|
||||
import React from "react"
|
||||
import IconProps from "../types/icon-type"
|
||||
|
||||
const MinusIcon: React.FC<IconProps> = ({
|
||||
size = "16",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M3.33301 8H12.6663"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default MinusIcon
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user