Merge pull request #15 from FiligranHQ/add-textarea

[filigran-ui][Textarea] Add textarea input component

packages/filigran-ui/src/components/servers/index.ts

@@ -5,3 +5,4 @@ export * from './card'
 export * from './input'
 export * from './badge'
 export * from './multi-select'
+export * from './textarea'

packages/filigran-ui/src/components/servers/textarea.tsx

@@ -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}

projects/filigran-website/components/mdx-component.tsx

@@ -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'
@@ -27,7 +26,6 @@ const components = {
   ...FiligranIcon,
   ReactLiveDisplay: ReactLiveDisplay,
   DisplayAllIcons: DisplayAllIcons,
-  ExampleTable: ExampleTable,
   ExampleDataTable: ExampleDataTable,
   ExampleMultiSelect: ExampleMultiSelect,
   ExampleCombobox: ExampleCombobox,

projects/filigran-website/content/docs/components/textarea.mdx

@@ -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>`}
+/>