101 changed files with 1100 additions and 161 deletions
@ -0,0 +1,49 @@
|
||||
import { ReactNode } from 'react'; |
||||
import { Col } from 'reactstrap'; |
||||
|
||||
interface Props { |
||||
children: ReactNode; |
||||
className?: string; |
||||
lg?: string; |
||||
sm?: string; |
||||
md?: string; |
||||
xs?: string; |
||||
xl?: string; |
||||
style?: React.CSSProperties; |
||||
} |
||||
|
||||
/** |
||||
* |
||||
* @param children: ReactNode |
||||
* @param className?:string |
||||
* @param lg?:string |
||||
* @param sm?:string |
||||
* @param md?:string |
||||
* @param xs?:string |
||||
* @param xl?:string |
||||
* |
||||
*/ |
||||
export default function CustomCol({ |
||||
children, |
||||
className, |
||||
lg, |
||||
sm, |
||||
md, |
||||
xs, |
||||
xl, |
||||
style |
||||
}: Props) { |
||||
return ( |
||||
<Col |
||||
lg={lg} |
||||
sm={sm} |
||||
md={md} |
||||
xs={xs} |
||||
xl={xl} |
||||
style={style} |
||||
className={className} |
||||
> |
||||
{children} |
||||
</Col> |
||||
); |
||||
} |
||||
@ -0,0 +1,17 @@
|
||||
import { ReactNode } from 'react'; |
||||
import { Alert } from 'reactstrap'; |
||||
|
||||
interface Props { |
||||
children: ReactNode; |
||||
color?: 'primary' | 'danger'; |
||||
} |
||||
|
||||
/** |
||||
* |
||||
* @param children: ReactNode |
||||
* @param color?: 'primary' | 'danger' ; |
||||
* |
||||
*/ |
||||
export default function CustomAlert({ children, color = 'primary' }: Props) { |
||||
return <Alert color={color}>{children}</Alert>; |
||||
} |
||||
@ -0,0 +1,24 @@
|
||||
'use client'; |
||||
import { Badge } from 'reactstrap'; |
||||
import { ReactNode } from 'react'; |
||||
|
||||
interface Props { |
||||
children: ReactNode; |
||||
className?: string; |
||||
color?: string; |
||||
} |
||||
|
||||
/** |
||||
* |
||||
* @param children: ReactNode |
||||
* @param className?:string |
||||
* @param color?: 'light-secondary' | 'primary' | 'secondary' | 'light-primary' |
||||
*/ |
||||
|
||||
export default function CustomBadge({ children, className, color }: Props) { |
||||
return ( |
||||
<Badge color={color} className={className}> |
||||
{children} |
||||
</Badge> |
||||
); |
||||
} |
||||
@ -0,0 +1,74 @@
|
||||
import { |
||||
ButtonHTMLAttributes, |
||||
MouseEvent, |
||||
MouseEventHandler, |
||||
ReactNode |
||||
} from 'react'; |
||||
import { Button } from 'reactstrap'; |
||||
interface Props { |
||||
outline?: boolean; |
||||
active?: boolean; |
||||
color?: 'primary' | 'secondary' | 'danger'; |
||||
type?: ButtonHTMLAttributes<HTMLButtonElement>['type']; |
||||
tag?: React.ElementType; |
||||
innerRef?: React.Ref<HTMLButtonElement>; |
||||
size?: string; |
||||
className?: string; |
||||
onClick?: MouseEventHandler<HTMLButtonElement>; |
||||
children?: ReactNode; |
||||
disabled?: boolean; |
||||
id?: string; |
||||
ripple?: boolean; |
||||
} |
||||
|
||||
/** |
||||
* @param outline?:boolean default false |
||||
* @param active?:boolean default false |
||||
* @param color?: 'primary' | 'secondary' | 'danger' |
||||
* @param type?:ButtonHTMLAttributes<HTMLButtonElement>['type'] |
||||
* @param tag?:React.ElementType |
||||
* @param innerRef?:React.Ref<HTMLButtonElement> |
||||
* @param size?:string |
||||
* @param className?:string |
||||
* @param onClick?:MouseEventHandler<HTMLButtonElement> |
||||
* @param children?:ReactNode |
||||
* @param disabled?:boolean default false |
||||
* @param id?:string |
||||
* @param ripple?:boolean default false |
||||
*/ |
||||
|
||||
export default function CustomButton({ |
||||
outline = false, |
||||
color, |
||||
type, |
||||
tag, |
||||
size, |
||||
className, |
||||
onClick, |
||||
children, |
||||
disabled = false, |
||||
id |
||||
}: Props) { |
||||
// const ButtonComponent = ripple ? Button.Ripple : Button;
|
||||
const handleClick = (event: MouseEvent<HTMLButtonElement>) => { |
||||
event.preventDefault(); // 기본 동작 중지
|
||||
if (onClick) { |
||||
onClick(event); |
||||
} |
||||
}; |
||||
return ( |
||||
<Button |
||||
onClick={handleClick} |
||||
outline={outline} |
||||
color={color} |
||||
type={type} |
||||
size={size} |
||||
className={className} |
||||
tag={tag} |
||||
disabled={disabled} |
||||
id={id} |
||||
> |
||||
{children} |
||||
</Button> |
||||
); |
||||
} |
||||
@ -0,0 +1,18 @@
|
||||
import { ButtonGroup } from 'reactstrap'; |
||||
import { ReactNode } from 'react'; |
||||
|
||||
interface Props { |
||||
children: ReactNode; |
||||
className?: string; |
||||
} |
||||
|
||||
/** |
||||
* |
||||
* @param children: ReactNode |
||||
* @param className?:string |
||||
* |
||||
*/ |
||||
|
||||
export default function CustomButtonGroup({ children, className }: Props) { |
||||
return <ButtonGroup className={className}>{children}</ButtonGroup>; |
||||
} |
||||
@ -0,0 +1,17 @@
|
||||
'use client'; |
||||
import { ReactNode } from 'react'; |
||||
import { Card } from 'reactstrap'; |
||||
|
||||
interface Props { |
||||
children: ReactNode; |
||||
className?: string; |
||||
} |
||||
/** |
||||
* |
||||
* @param children: ReactNode |
||||
* @param className?:string |
||||
*/ |
||||
|
||||
export default function CustomCard({ children, className }: Props) { |
||||
return <Card className={className}>{children}</Card>; |
||||
} |
||||
@ -0,0 +1,17 @@
|
||||
'use client'; |
||||
import { ReactNode } from 'react'; |
||||
import { CardBody } from 'reactstrap'; |
||||
|
||||
interface Props { |
||||
children: ReactNode; |
||||
className?: string; |
||||
} |
||||
/** |
||||
* |
||||
* @param children: ReactNode |
||||
* @param className?:string |
||||
*/ |
||||
|
||||
export default function CustomCardBody({ children, className }: Props) { |
||||
return <CardBody className={className}>{children}</CardBody>; |
||||
} |
||||
@ -0,0 +1,17 @@
|
||||
'use client'; |
||||
import { ReactNode } from 'react'; |
||||
import { CardHeader } from 'reactstrap'; |
||||
|
||||
interface Props { |
||||
children: ReactNode; |
||||
className?: string; |
||||
} |
||||
/** |
||||
* |
||||
* @param children: ReactNode |
||||
* @param className?:string |
||||
*/ |
||||
|
||||
export default function CustomCardHeader({ children, className }: Props) { |
||||
return <CardHeader className={className}>{children}</CardHeader>; |
||||
} |
||||
@ -0,0 +1,23 @@
|
||||
'use client'; |
||||
import { ElementType, ReactNode } from 'react'; |
||||
import { CardTitle } from 'reactstrap'; |
||||
|
||||
interface Props { |
||||
children: ReactNode; |
||||
className?: string; |
||||
tag: ElementType; |
||||
} |
||||
/** |
||||
* |
||||
* @param children: ReactNode |
||||
* @param className?:string |
||||
* @param tag?:string |
||||
*/ |
||||
|
||||
export default function CustomCardTitle({ children, className, tag }: Props) { |
||||
return ( |
||||
<CardTitle className={className} tag={tag}> |
||||
{children} |
||||
</CardTitle> |
||||
); |
||||
} |
||||
@ -0,0 +1,74 @@
|
||||
'use client'; |
||||
import { read } from 'fs'; |
||||
import { ChangeEvent, MouseEventHandler, ReactNode } from 'react'; |
||||
import { CustomInput } from 'reactstrap'; |
||||
|
||||
interface Props { |
||||
children: ReactNode; |
||||
className?: string; |
||||
readOnly?: boolean; |
||||
checked?: boolean; |
||||
id?: string; |
||||
onClick?: MouseEventHandler<HTMLInputElement>; |
||||
onChange?: (event: ChangeEvent<HTMLInputElement>) => void; |
||||
value?: any; |
||||
name?: string; |
||||
type?: any; |
||||
bsSize?: 'lg' | 'sm' | undefined; |
||||
label?: string; |
||||
inline?: boolean; |
||||
} |
||||
/** |
||||
* |
||||
* @param children: ReactNode |
||||
* @param className?:string |
||||
* @param readOnly?:boolean default false |
||||
* @param checked?:boolean |
||||
* @param label?:string |
||||
* @param id?:string |
||||
* @param onClick?:MouseEventHandler<HTMLButtonElement> |
||||
* @param onChange?:MouseEventHandler<HTMLButtonElement> |
||||
* @param value?:any |
||||
* @param name?:string |
||||
* @param type?:string |
||||
* @param bsSize?: "lg" | "sm" |
||||
* @param inline?:boolean default false |
||||
* |
||||
*/ |
||||
|
||||
export default function CustomInputs({ |
||||
children, |
||||
className, |
||||
label, |
||||
checked, |
||||
id, |
||||
onClick, |
||||
onChange, |
||||
value, |
||||
name, |
||||
readOnly, |
||||
type, |
||||
inline = false, |
||||
bsSize |
||||
}: Props) { |
||||
return ( |
||||
<> |
||||
<CustomInput |
||||
className={className} |
||||
id={id} |
||||
checked={checked} |
||||
label={label} |
||||
value={value} |
||||
bsSize={bsSize} |
||||
name={name} |
||||
type={type} |
||||
readOnly={readOnly} |
||||
onClick={onClick} |
||||
inline={inline} |
||||
onChange={onChange} |
||||
> |
||||
{children} |
||||
</CustomInput> |
||||
</> |
||||
); |
||||
} |
||||
@ -0,0 +1,21 @@
|
||||
import { FormEventHandler, ReactNode } from 'react'; |
||||
import { Form } from 'reactstrap'; |
||||
|
||||
interface Props { |
||||
children: ReactNode; |
||||
onSubmit?: FormEventHandler<HTMLFormElement>; |
||||
key?: string; |
||||
} |
||||
/** |
||||
* |
||||
* @param children: ReactNode |
||||
* @param className?:string |
||||
*/ |
||||
|
||||
export default function CustomForm({ children, onSubmit, key }: Props) { |
||||
return ( |
||||
<Form onSubmit={onSubmit} key={key}> |
||||
{children} |
||||
</Form> |
||||
); |
||||
} |
||||
@ -0,0 +1,14 @@
|
||||
import { FormFeedback } from 'reactstrap'; |
||||
import { ReactNode } from 'react'; |
||||
|
||||
interface Props { |
||||
children: ReactNode; |
||||
} |
||||
/** |
||||
* |
||||
* @param children: ReactNode |
||||
*/ |
||||
|
||||
export default function CustomFormFeedback({ children }: Props) { |
||||
return <FormFeedback>{children}</FormFeedback>; |
||||
} |
||||
@ -0,0 +1,22 @@
|
||||
import { ReactNode } from 'react'; |
||||
import { FormGroup, Col } from 'reactstrap'; |
||||
|
||||
interface Props { |
||||
children: ReactNode; |
||||
className?: string; |
||||
md?: string; |
||||
tag?: any; |
||||
} |
||||
/** |
||||
* |
||||
* @param children: ReactNode |
||||
* @param className?:string |
||||
*/ |
||||
|
||||
export default function CustomFormGroup({ children, className, md }: Props) { |
||||
return ( |
||||
<FormGroup className={className} md={md}> |
||||
{children} |
||||
</FormGroup> |
||||
); |
||||
} |
||||
@ -0,0 +1,68 @@
|
||||
import Badge from './badge/index'; |
||||
import Button from './button/CustomButton'; |
||||
import ButtonGroup from './button/CustomButtonGroup'; |
||||
import Card from './card/CustomCard'; |
||||
import CardBody from './card/CustomCardBody'; |
||||
import CardTitle from './card/CustomCardTitle'; |
||||
import CardHeader from './card/CustomCardHeader'; |
||||
import Col from './Col/index'; |
||||
import From from './form/CustomForm'; |
||||
import FormGroup from './form/CustomFormGroup'; |
||||
import FormFeedback from './form/CustomFormFeedback'; |
||||
import Input from './input'; |
||||
import Label from './label'; |
||||
import Row from './row'; |
||||
import InputGroup from './input/CustomInputGroup'; |
||||
import InputGroupText from './input/CustomInputGroupText'; |
||||
import Spinner from './spinner'; |
||||
import TabContent from './tab/CustomTabContent'; |
||||
import TabPane from './tab/CustomTabPane'; |
||||
import Nav from './nav/index'; |
||||
import NavItem from './nav/CustomNavItem'; |
||||
import NavLink from './nav/CustomNavLink'; |
||||
import Alert from './alert/index'; |
||||
import Table from './table/index'; |
||||
import Popover from './popover/index'; |
||||
import CustomInput from './custominput/index'; |
||||
import InputGroupAddon from './input/CustomInputGroupAddon'; |
||||
import Modal from './modal/CustomModal'; |
||||
import ModalHeader from './modal/CustomModalHeader'; |
||||
import ModalBody from './modal/CustomModalBody'; |
||||
import ModalFooter from './modal/CustomModalFooter'; |
||||
import Form from './form/CustomForm'; |
||||
import Media from './media/index'; |
||||
export { |
||||
Button, |
||||
ButtonGroup, |
||||
Card, |
||||
CardBody, |
||||
CardTitle, |
||||
CardHeader, |
||||
Col, |
||||
From, |
||||
FormGroup, |
||||
FormFeedback, |
||||
Input, |
||||
Label, |
||||
Row, |
||||
InputGroup, |
||||
InputGroupText, |
||||
Badge, |
||||
Spinner, |
||||
TabContent, |
||||
TabPane, |
||||
Nav, |
||||
NavItem, |
||||
NavLink, |
||||
Alert, |
||||
Table, |
||||
Popover, |
||||
CustomInput, |
||||
InputGroupAddon, |
||||
Modal, |
||||
ModalHeader, |
||||
ModalBody, |
||||
ModalFooter, |
||||
Form, |
||||
Media |
||||
}; |
||||
@ -0,0 +1,18 @@
|
||||
import { ReactNode } from 'react'; |
||||
import { InputGroup } from 'reactstrap'; |
||||
|
||||
interface Props { |
||||
children: ReactNode; |
||||
className?: string; |
||||
} |
||||
|
||||
/** |
||||
* |
||||
* @param children: ReactNode |
||||
* @param className?:string |
||||
* |
||||
*/ |
||||
|
||||
export default function CustomInputGroup({ children, className }: Props) { |
||||
return <InputGroup className={className}>{children}</InputGroup>; |
||||
} |
||||
@ -0,0 +1,17 @@
|
||||
import { InputGroupAddon } from 'reactstrap'; |
||||
import { ReactNode } from 'react'; |
||||
|
||||
interface Props { |
||||
children: ReactNode; |
||||
addonType?: 'prepend' | 'append'; |
||||
} |
||||
|
||||
/** |
||||
* |
||||
* @param children: ReactNode |
||||
* @param addonType?: 'prepend' | 'append' |
||||
*/ |
||||
|
||||
export default function CustomInputGroupAddon({ children, addonType }: Props) { |
||||
return <InputGroupAddon addonType={addonType}>{children}</InputGroupAddon>; |
||||
} |
||||
@ -0,0 +1,15 @@
|
||||
import { InputGroupText } from 'reactstrap'; |
||||
import { ReactNode } from 'react'; |
||||
|
||||
interface Props { |
||||
children: ReactNode; |
||||
} |
||||
|
||||
/** |
||||
* |
||||
* @param children: ReactNode |
||||
*/ |
||||
|
||||
export default function CustomInputGroupText({ children }: Props) { |
||||
return <InputGroupText>{children}</InputGroupText>; |
||||
} |
||||
@ -0,0 +1,83 @@
|
||||
'use client'; |
||||
import { ChangeEvent, MouseEventHandler, ReactNode } from 'react'; |
||||
import { Input } from 'reactstrap'; |
||||
|
||||
interface Props { |
||||
children: ReactNode; |
||||
className?: string; |
||||
readOnly?: boolean; |
||||
checked?: boolean; |
||||
label?: string; |
||||
id?: string; |
||||
onClick?: MouseEventHandler<HTMLInputElement>; |
||||
onChange?: (event: ChangeEvent<HTMLInputElement>) => void; |
||||
value?: any; |
||||
name?: string; |
||||
type?: any; |
||||
inline?: boolean; |
||||
bsSize?: 'lg' | 'sm' | undefined; |
||||
placeholder?: string; |
||||
disabled?: boolean; |
||||
onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void; |
||||
} |
||||
/** |
||||
* |
||||
* @param children: ReactNode |
||||
* @param className?:string |
||||
* @param readOnly?:boolean default false |
||||
* @param checked?:boolean |
||||
* @param label?:string |
||||
* @param id?:string |
||||
* @param onClick?:MouseEventHandler<HTMLButtonElement> |
||||
* @param onChange?:MouseEventHandler<HTMLButtonElement> |
||||
* @param value?:any |
||||
* @param name?:string |
||||
* @param type?:string |
||||
* @param inline?:boolean default false |
||||
* @param bsSize?: "lg" | "sm" |
||||
* @param placeholder?:string |
||||
* @param onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void; |
||||
* @param disabled?:boolean default false |
||||
*/ |
||||
|
||||
export default function CustomInput({ |
||||
children, |
||||
className, |
||||
label, |
||||
checked, |
||||
readOnly = false, |
||||
id, |
||||
onClick, |
||||
onChange, |
||||
value, |
||||
name, |
||||
type, |
||||
inline = false, |
||||
bsSize, |
||||
placeholder, |
||||
disabled = false, |
||||
onKeyPress |
||||
}: Props) { |
||||
return ( |
||||
<> |
||||
<Input |
||||
className={className} |
||||
id={id} |
||||
checked={checked} |
||||
readOnly={readOnly} |
||||
label={label} |
||||
value={value} |
||||
name={name} |
||||
disabled={disabled} |
||||
type={type} |
||||
bsSize={bsSize} |
||||
onClick={onClick} |
||||
onChange={onChange} |
||||
onKeyPress={onKeyPress} |
||||
placeholder={placeholder} |
||||
> |
||||
{children} |
||||
</Input> |
||||
</> |
||||
); |
||||
} |
||||
@ -0,0 +1,16 @@
|
||||
import { ReactNode } from 'react'; |
||||
import { Label } from 'reactstrap'; |
||||
|
||||
interface Props { |
||||
children: ReactNode; |
||||
htmlFor?: string; |
||||
className?: string; |
||||
} |
||||
|
||||
export default function CustomLabel({ children, htmlFor, className }: Props) { |
||||
return ( |
||||
<Label for={htmlFor} className={className}> |
||||
{children} |
||||
</Label> |
||||
); |
||||
} |
||||
@ -0,0 +1,16 @@
|
||||
import { ReactNode } from 'react'; |
||||
import { Media } from 'reactstrap'; |
||||
|
||||
interface Props { |
||||
children: ReactNode; |
||||
body?: string; |
||||
} |
||||
/** |
||||
* |
||||
* @param children: ReactNode |
||||
* @param body?:string |
||||
*/ |
||||
|
||||
export default function CustomMedia({ children, body }: Props) { |
||||
return <Media body={body}>{children}</Media>; |
||||
} |
||||
@ -0,0 +1,22 @@
|
||||
import { Children, ReactNode } from 'react'; |
||||
import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap'; |
||||
|
||||
interface Props { |
||||
isOpen: boolean; |
||||
toggle: () => void; |
||||
className?: string; |
||||
children: ReactNode; |
||||
} |
||||
|
||||
export default function CustomModal({ |
||||
isOpen, |
||||
toggle, |
||||
className, |
||||
children |
||||
}: Props) { |
||||
return ( |
||||
<Modal isOpen={isOpen} toggle={toggle} className={className}> |
||||
{children} |
||||
</Modal> |
||||
); |
||||
} |
||||
@ -0,0 +1,16 @@
|
||||
import { ReactNode } from 'react'; |
||||
import { ModalBody } from 'reactstrap'; |
||||
|
||||
interface Props { |
||||
children: ReactNode; |
||||
className?: string; |
||||
} |
||||
/** |
||||
* |
||||
* @param children: ReactNode |
||||
* @param className?:string |
||||
*/ |
||||
|
||||
export default function CustomModalBody({ children, className }: Props) { |
||||
return <ModalBody className={className}>{children}</ModalBody>; |
||||
} |
||||
@ -0,0 +1,26 @@
|
||||
import { ReactNode } from 'react'; |
||||
import { ModalFooter } from 'reactstrap'; |
||||
|
||||
interface Props { |
||||
children: ReactNode; |
||||
className?: string; |
||||
style?: React.CSSProperties; |
||||
} |
||||
/** |
||||
* |
||||
* @param children: ReactNode |
||||
* @param className?:string |
||||
* @param style?: React.CSSProperties |
||||
*/ |
||||
|
||||
export default function CustomModalFooter({ |
||||
children, |
||||
className, |
||||
style |
||||
}: Props) { |
||||
return ( |
||||
<ModalFooter className={className} style={style}> |
||||
{children} |
||||
</ModalFooter> |
||||
); |
||||
} |
||||
@ -0,0 +1,26 @@
|
||||
import { ReactNode } from 'react'; |
||||
import { ModalHeader } from 'reactstrap'; |
||||
|
||||
interface Props { |
||||
children: ReactNode; |
||||
toggle: () => void; |
||||
className?: string; |
||||
} |
||||
/** |
||||
* |
||||
* @param children: ReactNode |
||||
* @param toggle: () => void |
||||
* @param className?:string |
||||
*/ |
||||
|
||||
export default function CustomModalHeader({ |
||||
children, |
||||
toggle, |
||||
className |
||||
}: Props) { |
||||
return ( |
||||
<ModalHeader toggle={toggle} className={className}> |
||||
{children} |
||||
</ModalHeader> |
||||
); |
||||
} |
||||
@ -0,0 +1,23 @@
|
||||
import { NavItem } from 'reactstrap'; |
||||
import { ReactNode } from 'react'; |
||||
|
||||
interface Props { |
||||
children: ReactNode; |
||||
className?: string; |
||||
active?: boolean; |
||||
} |
||||
|
||||
/** |
||||
* |
||||
* @param children: ReactNode |
||||
* @param className?:string |
||||
* @param active?:boolean |
||||
*/ |
||||
|
||||
export default function CustomNavItem({ children, className, active }: Props) { |
||||
return ( |
||||
<NavItem className={className} active={active}> |
||||
{children} |
||||
</NavItem> |
||||
); |
||||
} |
||||
@ -0,0 +1,22 @@
|
||||
import { NavLink } from 'reactstrap'; |
||||
import { MouseEventHandler, ReactNode } from 'react'; |
||||
|
||||
interface Props { |
||||
children: ReactNode; |
||||
className?: string; |
||||
active?: boolean; |
||||
onClick?: MouseEventHandler<HTMLInputElement>; |
||||
} |
||||
|
||||
export default function CustomNavLink({ |
||||
children, |
||||
className, |
||||
active, |
||||
onClick |
||||
}: Props) { |
||||
return ( |
||||
<NavLink className={className} onClick={onClick}> |
||||
{children} |
||||
</NavLink> |
||||
); |
||||
} |
||||
@ -0,0 +1,30 @@
|
||||
import { Nav } from 'reactstrap'; |
||||
import { ReactNode } from 'react'; |
||||
|
||||
interface Props { |
||||
className?: string; |
||||
children: ReactNode; |
||||
tabs?: boolean; |
||||
pills?: boolean; |
||||
} |
||||
|
||||
/** |
||||
* |
||||
* @param children: ReactNode |
||||
* @param className?:string |
||||
* @param tabs?:boolean |
||||
* @param pills?:boolean |
||||
*/ |
||||
|
||||
export default function CustomNav({ |
||||
className, |
||||
tabs = false, |
||||
children, |
||||
pills = false |
||||
}: Props) { |
||||
return ( |
||||
<Nav tabs={tabs} className={className} pills={pills}> |
||||
{children} |
||||
</Nav> |
||||
); |
||||
} |
||||
@ -0,0 +1,21 @@
|
||||
import { ReactNode } from 'react'; |
||||
import { UncontrolledPopover, PopoverBody } from 'reactstrap'; |
||||
|
||||
interface Props { |
||||
children: ReactNode; |
||||
target?: string; |
||||
toggle?: () => void; |
||||
} |
||||
|
||||
export default function CustomPopover({ children, target, toggle }: Props) { |
||||
return ( |
||||
<UncontrolledPopover |
||||
trigger='focus' |
||||
placement='bottom' |
||||
target={target} |
||||
toggle={toggle} |
||||
> |
||||
<PopoverBody className='pal-popover-body'>{children}</PopoverBody> |
||||
</UncontrolledPopover> |
||||
); |
||||
} |
||||
@ -0,0 +1,17 @@
|
||||
import { Row } from 'reactstrap'; |
||||
import { ReactNode } from 'react'; |
||||
|
||||
interface Props { |
||||
children: ReactNode; |
||||
className?: string; |
||||
} |
||||
|
||||
/** |
||||
* |
||||
* @param children: ReactNode |
||||
* @param className?:string |
||||
*/ |
||||
|
||||
export default function CustomRow({ children, className }: Props) { |
||||
return <Row className={className}>{children}</Row>; |
||||
} |
||||
@ -0,0 +1,17 @@
|
||||
import { Spinner } from 'reactstrap'; |
||||
import React from 'react'; |
||||
|
||||
interface Props { |
||||
children: React.ReactNode; |
||||
color?: 'primary'; |
||||
} |
||||
|
||||
/** |
||||
* |
||||
* @param children: ReactNode |
||||
* @param color: default='primary' |
||||
*/ |
||||
|
||||
export default function CustomSpinner({ children, color = 'primary' }: Props) { |
||||
return <Spinner color={color}>{children}</Spinner>; |
||||
} |
||||
@ -0,0 +1,17 @@
|
||||
import { ReactNode } from 'react'; |
||||
import { TabContent } from 'reactstrap'; |
||||
|
||||
interface Props { |
||||
children: ReactNode; |
||||
activeTab?: string; |
||||
} |
||||
|
||||
/** |
||||
* |
||||
* @param children: ReactNode |
||||
* @param className?:string |
||||
*/ |
||||
|
||||
export default function CustomTabContent({ children, activeTab }: Props) { |
||||
return <TabContent activeTab={activeTab}>{children}</TabContent>; |
||||
} |
||||
@ -0,0 +1,17 @@
|
||||
import { ReactNode } from 'react'; |
||||
import { TabPane } from 'reactstrap'; |
||||
|
||||
interface Props { |
||||
tabId: string; |
||||
children: ReactNode; |
||||
} |
||||
|
||||
/** |
||||
* |
||||
* @param children: ReactNode |
||||
* @param tabId: string |
||||
*/ |
||||
|
||||
export default function CustomTabPane({ tabId, children }: Props) { |
||||
return <TabPane tabId={tabId}>{children}</TabPane>; |
||||
} |
||||
@ -0,0 +1,15 @@
|
||||
import { ReactNode } from 'react'; |
||||
import { Table } from 'reactstrap'; |
||||
|
||||
interface Props { |
||||
children: ReactNode; |
||||
} |
||||
|
||||
/** |
||||
* |
||||
* @param children: ReactNode |
||||
*/ |
||||
|
||||
export default function CustomTable({ children }: Props) { |
||||
return <Table responsive>{children}</Table>; |
||||
} |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue