shadcn-ui-react 0.2.1 → 0.2.3

package/README.md

@@ -26,7 +26,7 @@ Then use the components:
 import { Button } from 'shadcn-ui-react'
 
 export default function MyComponent() {
-  return <Button>Hello world</Button>
+  return (<Button>Hello world</Button>)
 }
 ```
 
@@ -34,11 +34,27 @@ export default function MyComponent() {
 import { Card } from 'shadcn-ui-react'
 
 export default function MyComponent() {
-  return <Card/>
+  return (<Card><h1>Hello World</h1></Card>)
 }
 ```
 
-## Example
+```tsx
+import React, { useState } from 'react';
+import { SearchInput } from './components/search-input';
+
+export default function MyComponent()  {
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const handleSearch = (term) => {
+    setSearchTerm(term);
+    console.log('Search term:', term);
+  };
+
+  return (<SearchInput placeholder="Search" value={searchTerm} onSearch={handleSearch} />);
+};
+```
+
+## Example of a login form
 ```tsx
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
@@ -105,4 +121,67 @@ export default function UserAuthForm() {
       </Form>
   );
 }
+```
+
+## Example of a data table
+
+```tsx
+import React, { useState } from 'react';
+import { DataTable } from 'shadcn-ui-react';
+import { ColumnDef } from '@tanstack/react-table';
+
+type Data = {
+  id: number;
+  name: string;
+  age: number;
+};
+
+const columns: ColumnDef<Data, any>[] = [
+  {
+    accessorKey: 'id',
+    header: 'ID',
+  },
+  {
+    accessorKey: 'name',
+    header: 'Name',
+  },
+  {
+    accessorKey: 'age',
+    header: 'Age',
+  },
+];
+
+const data: Data[] = [
+  { id: 1, name: 'John Doe', age: 28 },
+  { id: 2, name: 'Jane Smith', age: 34 },
+  { id: 3, name: 'Sam Johnson', age: 45 },
+];
+
+const Example = () => {
+  const [page, setPage] = useState(1);
+
+  const handlePageChange = (newPage: number) => {
+    setPage(newPage);
+  };
+
+  const handleRowClick = (row: Data) => {
+    console.log('Row clicked:', row);
+  };
+
+  return (
+    <div>
+      <h1>Data Table Example</h1>
+      <DataTable
+        columns={columns}
+        data={data}
+        pageCount={3}
+        page={page}
+        onPageChange={handlePageChange}
+        onClick={handleRowClick}
+      />
+    </div>
+  );
+};
+
+export default Example;
 ```