make it look nicer

This commit is contained in:
Anish Lakhwara 2024-11-06 23:11:46 -08:00
parent 55b73f8be4
commit 73e41285a2
3 changed files with 7 additions and 5 deletions

View file

@ -99,11 +99,13 @@ function App({ ctx }) {
return ( return (
<> <>
<section className="pt-16 container"> <section className="pt-8 container">
<Input type="text" <Input type="text"
className="bg-background p-4"
onKeyUp={addTodo} onKeyUp={addTodo}
onChange={(e) => setNewText(e.target.value)} onChange={(e) => setNewText(e.target.value)}
/> />
<div className="p-2"/>
<DataTable columns={columns} data={todos} /> <DataTable columns={columns} data={todos} />
</section> </section>
</> </>

View file

@ -10,7 +10,7 @@ const Checkbox = React.forwardRef<
<CheckboxPrimitive.Root <CheckboxPrimitive.Root
ref={ref} ref={ref}
className={cn( className={cn(
"peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", "flex h-4 w-4 shrink-0 items-center justify-center text-current rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
className className
)} )}
{...props} {...props}
@ -18,7 +18,7 @@ const Checkbox = React.forwardRef<
<CheckboxPrimitive.Indicator <CheckboxPrimitive.Indicator
className={cn("flex items-center justify-center text-current")} className={cn("flex items-center justify-center text-current")}
> >
<CheckIcon className="h-4 w-4" /> <CheckIcon className="h-3 w-3" />
</CheckboxPrimitive.Indicator> </CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root> </CheckboxPrimitive.Root>
)) ))

View file

@ -44,13 +44,13 @@ export function DataTable<TData, TValue>({
return ( return (
<div > <div >
<Table > <Table >
<TableHeader> <TableHeader className="bg-accent">
{table.getHeaderGroups().map((headerGroup) => ( {table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}> <TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => { {headerGroup.headers.map((header) => {
return ( return (
<TableHead key={header.id} <TableHead key={header.id}
className="relative" className="relative text-foreground"
style={{ style={{
width: header.getSize(), width: header.getSize(),
}} }}