cerc-io/snowballtools-base
16
0
Fork 2
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

🔧 chore: add render tags component

Browse Source
This commit is contained in:
Andre H 2024-02-22 17:01:58 +07:00
parent fb932eeb04
commit 596889b5e2
2 changed files with 77 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,6 +23,7 @@ import {
renderInlineNotifications, renderInlineNotifications,
} from './renders/inlineNotifications'; } from './renders/inlineNotifications';
import { renderInputs } from './renders/input'; import { renderInputs } from './renders/input';
import { renderDefaultTags, renderMinimalTags } from './renders/tags';
const Page = () => { const Page = () => {
const [singleDate, setSingleDate] = useState<Value>(); const [singleDate, setSingleDate] = useState<Value>();
@ -41,6 +42,19 @@ const Page = () => {
<div className="w-full h border border-gray-200 px-20 my-10" /> <div className="w-full h border border-gray-200 px-20 my-10" />
{/* Tags */}
<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">Tags</h1>
<div className="flex flex-col gap-10 items-center justify-center">
{renderDefaultTags()}
{renderMinimalTags()}
</div>
</div>
</div>
<div className="w-full h border border-gray-200 px-20 my-10" />
{/* Button */} {/* Button */}
<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> <h1 className="text-2xl font-bold">Input</h1>

63
packages/frontend/src/pages/components/renders/tags.tsx Normal file
View File

@ -0,0 +1,63 @@
import React from 'react';
import { Tags } from 'components/shared/Tags';
import { PlusIcon } from 'components/shared/CustomIcon';
export const renderDefaultTags = () =>
(['default'] as const).map((style) => (
<div key={style} className="flex gap-4 items-center">
{(
['attention', 'negative', 'positive', 'emphasized', 'neutral'] as const
).map((type) => (
<div key={type} className="flex flex-col gap-4">
<Tags
leftIcon={<PlusIcon />}
rightIcon={<PlusIcon />}
style={style}
type={type}
size="sm"
>
Label
</Tags>
<Tags
leftIcon={<PlusIcon />}
rightIcon={<PlusIcon />}
size="xs"
style={style}
type={type}
>
Label
</Tags>
</div>
))}
</div>
));
export const renderMinimalTags = () =>
(['minimal'] as const).map((style) => (
<div key={style} className="flex gap-4 items-center">
{(
['attention', 'negative', 'positive', 'emphasized', 'neutral'] as const
).map((type) => (
<div key={type} className="flex flex-col gap-4">
<Tags
leftIcon={<PlusIcon />}
rightIcon={<PlusIcon />}
style={style}
type={type}
size="sm"
>
Label
</Tags>
<Tags
leftIcon={<PlusIcon />}
rightIcon={<PlusIcon />}
size="xs"
style={style}
type={type}
>
Label
</Tags>
</div>
))}
</div>
));