make it look nicer
This commit is contained in:
parent
55b73f8be4
commit
73e41285a2
|
@ -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>
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -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>
|
||||||
))
|
))
|
||||||
|
|
|
@ -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(),
|
||||||
}}
|
}}
|
||||||
|
|
Loading…
Reference in a new issue