hyl.st
this repo has no description
a little nicer looking, but i still don't really understand where to set colors...
I stole a bunch of things from
[this](https://github.com/danielagg/shadcn-data-table-resize-columns)
repository I found online, and that seems to have helped.
I'm still having trouble with colors and tailwind and shadcn...
The buttons also only misalign on firefox, not chrome...
+265
-152
+2
-2
mast-react-vite/components.json
+2
-2
mast-react-vite/components.json
+32
-7
mast-react-vite/src/App.tsx
+32
-7
mast-react-vite/src/App.tsx
···
1
1
import { useState } from 'react'
2
2
import { useCachedState, useQuery } from "@vlcn.io/react";
3
-
import './App.css'
4
3
import {
5
4
ColumnDef,
6
5
flexRender,
···
9
8
} from "@tanstack/react-table"
10
9
import { DataTable } from "@/components/ui/data-table"
11
10
import * as addParser from '../../parser/add_parser.js';
11
+
import { Checkbox } from "@/components/ui/checkbox"
12
+
import { Input } from "@/components/ui/input"
12
13
13
14
function Marshall(parsed) {
14
15
let project = "";
15
16
const tags = [];
16
-
console.log(parsed);
17
17
for (const attr of parsed.attributes) {
18
-
console.log(attr);
19
18
switch (attr.type) {
20
19
case 'project':
21
20
project = attr.value;
···
38
37
39
38
export const columns: ColumnDef<Todo>[] = [
40
39
{
40
+
id: "select",
41
+
header: ({ table }) => (
42
+
<Checkbox
43
+
checked={
44
+
table.getIsAllPageRowsSelected() ||
45
+
(table.getIsSomePageRowsSelected() && "indeterminate")
46
+
}
47
+
onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
48
+
aria-label="Select all"
49
+
className="translate-y-[2px]"
50
+
/>
51
+
),
52
+
cell: ({ row }) => (
53
+
<Checkbox
54
+
checked={row.getIsSelected()}
55
+
onCheckedChange={(value) => row.toggleSelected(!!value)}
56
+
aria-label="Select row"
57
+
className="translate-y-[2px]"
58
+
/>
59
+
),
60
+
enableSorting: false,
61
+
enableHiding: false,
62
+
size: 20,
63
+
},
64
+
{
41
65
accessorKey: "description",
42
66
header: "Description",
43
67
},
···
47
71
},
48
72
{
49
73
accessorKey: "tags",
50
-
header: "tags",
74
+
header: "Tags",
51
75
cell: ({ row }) => {
52
-
console.log("Tags Parsing: " + row.getValue("tags"))
53
76
const formatted = JSON.parse(row.getValue("tags"))
54
-
return <div className="text-right font-medium">{formatted.join(", ")}</div>
77
+
return <div className="font-medium">{formatted.join(", ")}</div>
55
78
}
56
79
},
57
80
]
···
76
99
77
100
return (
78
101
<>
79
-
<input type="text"
102
+
<section className="pt-16 container">
103
+
<Input type="text"
80
104
onKeyUp={addTodo}
81
105
onChange={(e) => setNewText(e.target.value)}
82
106
/>
83
107
<DataTable columns={columns} data={todos} />
108
+
</section>
84
109
</>
85
110
)
86
111
}
+27
mast-react-vite/src/components/ui/checkbox.tsx
+27
mast-react-vite/src/components/ui/checkbox.tsx
···
1
+
import * as React from "react"
2
+
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
3
+
import { cn } from "@/lib/utils"
4
+
import { CheckIcon } from "@radix-ui/react-icons"
5
+
6
+
const Checkbox = React.forwardRef<
7
+
React.ElementRef<typeof CheckboxPrimitive.Root>,
8
+
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
9
+
>(({ className, ...props }, ref) => (
10
+
<CheckboxPrimitive.Root
11
+
ref={ref}
12
+
className={cn(
13
+
"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",
14
+
className
15
+
)}
16
+
{...props}
17
+
>
18
+
<CheckboxPrimitive.Indicator
19
+
className={cn("flex items-center justify-center text-current")}
20
+
>
21
+
<CheckIcon className="h-4 w-4" />
22
+
</CheckboxPrimitive.Indicator>
23
+
</CheckboxPrimitive.Root>
24
+
))
25
+
Checkbox.displayName = CheckboxPrimitive.Root.displayName
26
+
27
+
export { Checkbox }
+17
-2
mast-react-vite/src/components/ui/data-table.tsx
+17
-2
mast-react-vite/src/components/ui/data-table.tsx
···
1
1
"use client"
2
2
3
+
import { useState } from "react"
4
+
3
5
import {
4
6
ColumnDef,
7
+
ColumnSizingState,
5
8
flexRender,
6
9
getCoreRowModel,
7
10
useReactTable,
···
25
28
columns,
26
29
data,
27
30
}: DataTableProps<TData, TValue>) {
31
+
const [colSizing, setColSizing] = useState<ColumnSizingState>({});
28
32
const table = useReactTable({
29
33
data,
30
34
columns,
35
+
enableColumnResizing: true,
36
+
columnResizeMode: "onChange",
31
37
getCoreRowModel: getCoreRowModel(),
38
+
onColumnSizingChange: setColSizing,
39
+
state: {
40
+
columnSizing: colSizing,
41
+
},
32
42
})
33
43
34
44
return (
35
-
<div className="bg-zinc-950 dark:bg-white">
45
+
<div >
36
46
<Table >
37
47
<TableHeader>
38
48
{table.getHeaderGroups().map((headerGroup) => (
39
49
<TableRow key={headerGroup.id}>
40
50
{headerGroup.headers.map((header) => {
41
51
return (
42
-
<TableHead key={header.id}>
52
+
<TableHead key={header.id}
53
+
className="relative"
54
+
style={{
55
+
width: header.getSize(),
56
+
}}
57
+
>
43
58
{header.isPlaceholder
44
59
? null
45
60
: flexRender(
+25
mast-react-vite/src/components/ui/input.tsx
+25
mast-react-vite/src/components/ui/input.tsx
···
1
+
import * as React from "react"
2
+
3
+
import { cn } from "@/lib/utils"
4
+
5
+
export interface InputProps
6
+
extends React.InputHTMLAttributes<HTMLInputElement> {}
7
+
8
+
const Input = React.forwardRef<HTMLInputElement, InputProps>(
9
+
({ className, type, ...props }, ref) => {
10
+
return (
11
+
<input
12
+
type={type}
13
+
className={cn(
14
+
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
15
+
className
16
+
)}
17
+
ref={ref}
18
+
{...props}
19
+
/>
20
+
)
21
+
}
22
+
)
23
+
Input.displayName = "Input"
24
+
25
+
export { Input }
+22
-24
mast-react-vite/src/components/ui/table.tsx
+22
-24
mast-react-vite/src/components/ui/table.tsx
···
1
-
import * as React from "react"
1
+
import * as React from "react";
2
2
3
-
import { cn } from "@/lib/utils"
3
+
import { cn } from "@/lib/utils";
4
4
5
5
const Table = React.forwardRef<
6
6
HTMLTableElement,
···
13
13
{...props}
14
14
/>
15
15
</div>
16
-
))
17
-
Table.displayName = "Table"
16
+
));
17
+
Table.displayName = "Table";
18
18
19
19
const TableHeader = React.forwardRef<
20
20
HTMLTableSectionElement,
21
21
React.HTMLAttributes<HTMLTableSectionElement>
22
22
>(({ className, ...props }, ref) => (
23
23
<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
24
-
))
25
-
TableHeader.displayName = "TableHeader"
24
+
));
25
+
TableHeader.displayName = "TableHeader";
26
26
27
27
const TableBody = React.forwardRef<
28
28
HTMLTableSectionElement,
···
33
33
className={cn("[&_tr:last-child]:border-0", className)}
34
34
{...props}
35
35
/>
36
-
))
37
-
TableBody.displayName = "TableBody"
36
+
));
37
+
TableBody.displayName = "TableBody";
38
38
39
39
const TableFooter = React.forwardRef<
40
40
HTMLTableSectionElement,
···
48
48
)}
49
49
{...props}
50
50
/>
51
-
))
52
-
TableFooter.displayName = "TableFooter"
51
+
));
52
+
TableFooter.displayName = "TableFooter";
53
53
54
54
const TableRow = React.forwardRef<
55
55
HTMLTableRowElement,
···
63
63
)}
64
64
{...props}
65
65
/>
66
-
))
67
-
TableRow.displayName = "TableRow"
66
+
));
67
+
TableRow.displayName = "TableRow";
68
68
69
69
const TableHead = React.forwardRef<
70
70
HTMLTableCellElement,
···
73
73
<th
74
74
ref={ref}
75
75
className={cn(
76
-
"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
76
+
"h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
77
77
className
78
78
)}
79
79
{...props}
80
80
/>
81
-
))
82
-
TableHead.displayName = "TableHead"
81
+
));
82
+
TableHead.displayName = "TableHead";
83
83
84
84
const TableCell = React.forwardRef<
85
85
HTMLTableCellElement,
···
87
87
>(({ className, ...props }, ref) => (
88
88
<td
89
89
ref={ref}
90
-
className={cn(
91
-
"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
92
-
className
93
-
)}
90
+
className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
94
91
{...props}
95
92
/>
96
-
))
97
-
TableCell.displayName = "TableCell"
93
+
));
94
+
TableCell.displayName = "TableCell";
98
95
99
96
const TableCaption = React.forwardRef<
100
97
HTMLTableCaptionElement,
···
105
102
className={cn("mt-4 text-sm text-muted-foreground", className)}
106
103
{...props}
107
104
/>
108
-
))
109
-
TableCaption.displayName = "TableCaption"
105
+
));
106
+
TableCaption.displayName = "TableCaption";
110
107
111
108
export {
112
109
Table,
···
117
114
TableRow,
118
115
TableCell,
119
116
TableCaption,
120
-
}
117
+
};
118
+
+68
-63
mast-react-vite/src/index.css
+68
-63
mast-react-vite/src/index.css
···
1
1
@tailwind base;
2
2
@tailwind components;
3
3
@tailwind utilities;
4
+
5
+
@layer base {
6
+
:root {
7
+
--background: 0 0% 100%;
8
+
--foreground: 222.2 84% 4.9%;
4
9
5
-
:root {
6
-
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
7
-
line-height: 1.5;
8
-
font-weight: 400;
10
+
--card: 0 0% 100%;
11
+
--card-foreground: 222.2 84% 4.9%;
12
+
13
+
--popover: 0 0% 100%;
14
+
--popover-foreground: 222.2 84% 4.9%;
15
+
16
+
--primary: 222.2 47.4% 11.2%;
17
+
--primary-foreground: 210 40% 98%;
18
+
19
+
--secondary: 210 40% 96.1%;
20
+
--secondary-foreground: 222.2 47.4% 11.2%;
21
+
22
+
--muted: 210 40% 96.1%;
23
+
--muted-foreground: 215.4 16.3% 46.9%;
24
+
25
+
--accent: 210 40% 96.1%;
26
+
--accent-foreground: 222.2 47.4% 11.2%;
27
+
28
+
--destructive: 0 84.2% 60.2%;
29
+
--destructive-foreground: 210 40% 98%;
9
30
10
-
color-scheme: light dark;
11
-
color: rgba(255, 255, 255, 0.87);
12
-
background-color: #242424;
13
-
14
-
font-synthesis: none;
15
-
text-rendering: optimizeLegibility;
16
-
-webkit-font-smoothing: antialiased;
17
-
-moz-osx-font-smoothing: grayscale;
31
+
--border: 214.3 31.8% 91.4%;
32
+
--input: 214.3 31.8% 91.4%;
33
+
--ring: 222.2 84% 4.9%;
34
+
35
+
--radius: 0.5rem;
36
+
}
37
+
38
+
.dark {
39
+
--background: 222.2 84% 4.9%;
40
+
--foreground: 210 40% 98%;
41
+
42
+
--card: 222.2 84% 4.9%;
43
+
--card-foreground: 210 40% 98%;
44
+
45
+
--popover: 222.2 84% 4.9%;
46
+
--popover-foreground: 210 40% 98%;
47
+
48
+
--primary: 210 40% 98%;
49
+
--primary-foreground: 222.2 47.4% 11.2%;
50
+
51
+
--secondary: 217.2 32.6% 17.5%;
52
+
--secondary-foreground: 210 40% 98%;
53
+
54
+
--muted: 217.2 32.6% 17.5%;
55
+
--muted-foreground: 215 20.2% 65.1%;
56
+
57
+
--accent: 217.2 32.6% 17.5%;
58
+
--accent-foreground: 210 40% 98%;
59
+
60
+
--destructive: 0 62.8% 30.6%;
61
+
--destructive-foreground: 210 40% 98%;
62
+
63
+
--border: 217.2 32.6% 17.5%;
64
+
--input: 217.2 32.6% 17.5%;
65
+
--ring: 212.7 26.8% 83.9%;
66
+
}
18
67
}
19
-
20
-
a {
21
-
font-weight: 500;
22
-
color: #646cff;
23
-
text-decoration: inherit;
24
-
}
25
-
a:hover {
26
-
color: #535bf2;
27
-
}
28
-
29
-
body {
30
-
margin: 0;
31
-
display: flex;
32
-
place-items: center;
33
-
min-width: 320px;
34
-
min-height: 100vh;
35
-
}
36
-
37
-
h1 {
38
-
font-size: 3.2em;
39
-
line-height: 1.1;
40
-
}
41
-
42
-
button {
43
-
border-radius: 8px;
44
-
border: 1px solid transparent;
45
-
padding: 0.6em 1.2em;
46
-
font-size: 1em;
47
-
font-weight: 500;
48
-
font-family: inherit;
49
-
background-color: #1a1a1a;
50
-
cursor: pointer;
51
-
transition: border-color 0.25s;
52
-
}
53
-
button:hover {
54
-
border-color: #646cff;
55
-
}
56
-
button:focus,
57
-
button:focus-visible {
58
-
outline: 4px auto -webkit-focus-ring-color;
59
-
}
60
-
61
-
@media (prefers-color-scheme: light) {
62
-
:root {
63
-
color: #213547;
64
-
background-color: #ffffff;
68
+
69
+
@layer base {
70
+
* {
71
+
@apply border-border;
65
72
}
66
-
a:hover {
67
-
color: #747bff;
68
-
}
69
-
button {
70
-
background-color: #f9f9f9;
73
+
body {
74
+
@apply bg-background text-foreground;
71
75
}
72
76
}
77
+
+72
-54
mast-react-vite/tailwind.config.js
+72
-54
mast-react-vite/tailwind.config.js
···
1
1
/** @type {import('tailwindcss').Config} */
2
-
export default {
3
-
darkMode: ["class"],
4
-
content: [
5
-
"./index.html",
6
-
"./src/**/.{js,ts,jsx,tsx}",
2
+
module.exports = {
3
+
darkMode: ["class"],
4
+
content: [
5
+
'./pages/**/*.{ts,tsx}',
6
+
'./components/**/*.{ts,tsx}',
7
+
'./app/**/*.{ts,tsx}',
8
+
'./src/**/*.{ts,tsx}',
7
9
],
10
+
prefix: "",
8
11
theme: {
9
-
extend: {
10
-
borderRadius: {
11
-
lg: 'var(--radius)',
12
-
md: 'calc(var(--radius) - 2px)',
13
-
sm: 'calc(var(--radius) - 4px)'
14
-
},
15
-
colors: {
16
-
background: 'hsl(var(--background))',
17
-
foreground: 'hsl(var(--foreground))',
18
-
card: {
19
-
DEFAULT: 'hsl(var(--card))',
20
-
foreground: 'hsl(var(--card-foreground))'
21
-
},
22
-
popover: {
23
-
DEFAULT: 'hsl(var(--popover))',
24
-
foreground: 'hsl(var(--popover-foreground))'
25
-
},
26
-
primary: {
27
-
DEFAULT: 'hsl(var(--primary))',
28
-
foreground: 'hsl(var(--primary-foreground))'
29
-
},
30
-
secondary: {
31
-
DEFAULT: 'hsl(var(--secondary))',
32
-
foreground: 'hsl(var(--secondary-foreground))'
33
-
},
34
-
muted: {
35
-
DEFAULT: 'hsl(var(--muted))',
36
-
foreground: 'hsl(var(--muted-foreground))'
37
-
},
38
-
accent: {
39
-
DEFAULT: 'hsl(var(--accent))',
40
-
foreground: 'hsl(var(--accent-foreground))'
41
-
},
42
-
destructive: {
43
-
DEFAULT: 'hsl(var(--destructive))',
44
-
foreground: 'hsl(var(--destructive-foreground))'
45
-
},
46
-
border: 'hsl(var(--border))',
47
-
input: 'hsl(var(--input))',
48
-
ring: 'hsl(var(--ring))',
49
-
chart: {
50
-
'1': 'hsl(var(--chart-1))',
51
-
'2': 'hsl(var(--chart-2))',
52
-
'3': 'hsl(var(--chart-3))',
53
-
'4': 'hsl(var(--chart-4))',
54
-
'5': 'hsl(var(--chart-5))'
55
-
}
56
-
}
57
-
}
12
+
container: {
13
+
center: true,
14
+
padding: "2rem",
15
+
screens: {
16
+
"2xl": "1400px",
17
+
},
18
+
},
19
+
extend: {
20
+
colors: {
21
+
border: "hsl(var(--border))",
22
+
input: "hsl(var(--input))",
23
+
ring: "hsl(var(--ring))",
24
+
background: "hsl(var(--background))",
25
+
foreground: "hsl(var(--foreground))",
26
+
primary: {
27
+
DEFAULT: "hsl(var(--primary))",
28
+
foreground: "hsl(var(--primary-foreground))",
29
+
},
30
+
secondary: {
31
+
DEFAULT: "hsl(var(--secondary))",
32
+
foreground: "hsl(var(--secondary-foreground))",
33
+
},
34
+
destructive: {
35
+
DEFAULT: "hsl(var(--destructive))",
36
+
foreground: "hsl(var(--destructive-foreground))",
37
+
},
38
+
muted: {
39
+
DEFAULT: "hsl(var(--muted))",
40
+
foreground: "hsl(var(--muted-foreground))",
41
+
},
42
+
accent: {
43
+
DEFAULT: "hsl(var(--accent))",
44
+
foreground: "hsl(var(--accent-foreground))",
45
+
},
46
+
popover: {
47
+
DEFAULT: "hsl(var(--popover))",
48
+
foreground: "hsl(var(--popover-foreground))",
49
+
},
50
+
card: {
51
+
DEFAULT: "hsl(var(--card))",
52
+
foreground: "hsl(var(--card-foreground))",
53
+
},
54
+
},
55
+
borderRadius: {
56
+
lg: "var(--radius)",
57
+
md: "calc(var(--radius) - 2px)",
58
+
sm: "calc(var(--radius) - 4px)",
59
+
},
60
+
keyframes: {
61
+
"accordion-down": {
62
+
from: { height: "0" },
63
+
to: { height: "var(--radix-accordion-content-height)" },
64
+
},
65
+
"accordion-up": {
66
+
from: { height: "var(--radix-accordion-content-height)" },
67
+
to: { height: "0" },
68
+
},
69
+
},
70
+
animation: {
71
+
"accordion-down": "accordion-down 0.2s ease-out",
72
+
"accordion-up": "accordion-up 0.2s ease-out",
73
+
},
74
+
},
58
75
},
59
76
plugins: [require("tailwindcss-animate")],
60
77
}
78
+