mary.my.id
handy online tools for AT Protocol
boat.kelinci.net
atproto
bluesky
atcute
typescript
solidjs
1export interface DiffTableProps {
2 fields: { title: string; prev?: string | null; next: string | null }[];
3}
4
5const DiffTable = (props: DiffTableProps) => {
6 return (
7 <div class="grid grid-cols-[min-content_minmax(0,1fr)]">
8 {props.fields.map(({ title, prev, next }) => {
9 if (prev === undefined) {
10 prev = next;
11 }
12
13 return (
14 <>
15 <div class="w-20 py-1 pr-2 align-top font-medium text-gray-600">{`${title}:`}</div>
16 <div class="font-mono">
17 <div hidden={prev !== next} class="px-2 py-1">
18 {next}
19 </div>
20 <div hidden={prev === next || next === null} class="bg-green-200 px-2 py-1">
21 {next}
22 </div>
23 <div hidden={prev === next || prev === null} class="bg-red-200 px-2 py-1">
24 {prev}
25 </div>
26 </div>
27 </>
28 );
29 })}
30 </div>
31 );
32};
33
34export default DiffTable;