Skip to content

Commit

Permalink
[filigran-ui][Textarea] Add textarea input component
Browse files Browse the repository at this point in the history
  • Loading branch information
hervyt committed Aug 26, 2024
1 parent 47c0c4f commit d3c36aa
Show file tree
Hide file tree
Showing 5 changed files with 45 additions and 89 deletions.
1 change: 1 addition & 0 deletions packages/filigran-ui/src/components/servers/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,4 @@ export * from './card'
export * from './input'
export * from './badge'
export * from './multi-select'
export * from './textarea'
23 changes: 23 additions & 0 deletions packages/filigran-ui/src/components/servers/textarea.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import * as React from 'react'
import {cn} from '../../lib/utils'

export interface TextareaProps
extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
({className, ...props}, ref) => {
return (
<textarea
className={cn(
'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
className
)}
ref={ref}
{...props}
/>
)
}
)
Textarea.displayName = 'Textarea'

export {Textarea}
87 changes: 0 additions & 87 deletions projects/filigran-website/components/example/example-table.tsx

This file was deleted.

2 changes: 0 additions & 2 deletions projects/filigran-website/components/mdx-component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import * as FiligranUIComponent from 'filigran-ui'
import * as FiligranIcon from 'filigran-icon'
import * as LucidIcon from 'lucide-react'
import {DisplayAllIcons} from '@/components/display-all-icons'
import {ExampleTable} from '@/components/example/example-table'
import {ExampleDataTable} from '@/components/example/example-data-table'
import {ExampleMultiSelect} from '@/components/example/example-multi-select'
import {ExampleCombobox} from '@/components/example/example-combobox'
Expand All @@ -27,7 +26,6 @@ const components = {
...FiligranIcon,
ReactLiveDisplay: ReactLiveDisplay,
DisplayAllIcons: DisplayAllIcons,
ExampleTable: ExampleTable,
ExampleDataTable: ExampleDataTable,
ExampleMultiSelect: ExampleMultiSelect,
ExampleCombobox: ExampleCombobox,
Expand Down
21 changes: 21 additions & 0 deletions projects/filigran-website/content/docs/components/textarea.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
---
title: Textarea
---

## Example

<Textarea
placeholder="Example Cheese and wine halloumi fromage frais. Manchego cheesy feet rubber cheese cheeseburger edam squirty cheese cheese and wine st. agur blue cheese. Cheese and biscuits dolcelatte feta parmesan feta red leicester cheese and wine queso. Cow squirty cheese cheese on toast emmental cheesecake.
Mozzarella cut the cheese cheesecake. Cheesy feet gouda fromage manchego cheeseburger gouda queso hard cheese. Rubber cheese paneer queso stinking bishop stinking bishop say cheese cheese and biscuits say cheese. Pepper jack goat who moved my cheese bavarian bergkase fondue rubber cheese.
Roquefort when the cheese comes out everybody's happy cheese strings. Stilton lancashire smelly cheese bavarian bergkase say cheese the big cheese airedale emmental. Fromage roquefort say cheese fromage frais cheesy feet monterey jack when the cheese comes out everybody's happy smelly cheese. Stinking bishop bocconcini manchego red leicester airedale ricotta."
/>
## Playground

<ReactLiveDisplay
codeExample={`
<div className={tw(\`flex gap-2\`)}>
<Textarea placeholder="Insert your paragraph here" />
</div>`}
/>

0 comments on commit d3c36aa

Please sign in to comment.