cfbender/snowballtools-base
1
0
Fork 0
forked from cerc-io/snowballtools-base
Code Pull Requests Activity

🔧 chore: add input to page/components

Browse Source
This commit is contained in:
Andre H 2024-02-21 15:44:21 +07:00
parent 33b6191539
commit 7d5963d776
1 changed files with 55 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
packages/frontend/src/pages/components/index.tsx
View File

@ -3,7 +3,8 @@ import { Badge, BadgeProps } from 'components/shared/Badge';
import { Button, ButtonOrLinkProps } from 'components/shared/Button'; import { Button, ButtonOrLinkProps } from 'components/shared/Button';
import { Calendar } from 'components/shared/Calendar'; import { Calendar } from 'components/shared/Calendar';
import { Checkbox } from 'components/shared/Checkbox'; import { Checkbox } from 'components/shared/Checkbox';
import { PlusIcon } from 'components/shared/CustomIcon'; import { SearchIcon, CrossIcon, PlusIcon } from 'components/shared/CustomIcon';
import { Input } from 'components/shared/Input';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Value } from 'react-calendar/dist/cjs/shared/types'; import { Value } from 'react-calendar/dist/cjs/shared/types';
@ -53,6 +54,59 @@ const Page = () => {
{/* Insert Components here */} {/* Insert Components here */}
<div className="flex flex-col gap-10 items-center justify-between"> <div className="flex flex-col gap-10 items-center justify-between">
<h1 className="text-2xl font-bold">Input</h1>
<div className="flex w-full flex-col gap-10">
<div className="flex w-full gap-10">
<Input
label="Label"
description="Additional information or context"
leftIcon={<SearchIcon />}
rightIcon={<CrossIcon />}
placeholder="Placeholder text"
/>
<Input
disabled
label="Label"
description="Additional information or context"
placeholder="Placeholder text"
/>
<Input
state="error"
label="Label"
description="Additional information or context"
placeholder="Placeholder text"
helperText="The error goes here"
/>
</div>
<div className="flex w-full gap-10">
<Input
label="Label"
leftIcon={<SearchIcon />}
rightIcon={<CrossIcon />}
description="Additional information or context"
placeholder="Placeholder text"
size="sm"
/>
<Input
disabled
label="Label"
description="Additional information or context"
placeholder="Placeholder text"
size="sm"
/>
<Input
state="error"
label="Label"
description="Additional information or context"
placeholder="Placeholder text"
size="sm"
helperText="The error goes here"
/>
</div>
</div>
<div className="w-full h border border-gray-200 px-20 my-10" />
<h1 className="text-2xl font-bold">Button</h1> <h1 className="text-2xl font-bold">Button</h1>
<div className="flex flex-col gap-10"> <div className="flex flex-col gap-10">
{['primary', 'secondary', 'tertiary', 'danger'].map( {['primary', 'secondary', 'tertiary', 'danger'].map(