shadcn-ui-react 0.2.0 → 0.2.3

package/LICENSE

@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

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;
 ```