Github/screenshot-to-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve look of history display

Browse Source
This commit is contained in:
Abi Raja 2023-12-06 15:37:59 -05:00
parent 75198cf638
commit 3d16d784c2
1 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/components/HistoryDisplay.tsx
View File

@ -25,15 +25,16 @@ function displayHistoryItemType(itemType: HistoryItemType) {
} }
export default function HistoryDisplay({ history, revertToVersion }: Props) { export default function HistoryDisplay({ history, revertToVersion }: Props) {
return ( return history.length === 0 ? null : (
<div className="flex flex-col h-screen p-4"> <div className="flex flex-col h-screen">
<h1 className="font-bold mb-4">History</h1> <h1 className="font-bold mb-2">History</h1>
<ScrollArea className="flex-1 overflow-y-auto"> <ScrollArea className="flex-1 overflow-y-auto">
<ul className="space-y-4"> <ul className="space-y-0">
{history.map((item, index) => ( {history.map((item, index) => (
<li <li
key={index} key={index}
className="flex items-center space-x-4 justify-between border-b pb-1 cursor-pointer" className="flex items-center space-x-2 justify-between p-2
border-b cursor-pointer hover:bg-black hover:text-white"
onClick={() => revertToVersion(index)} onClick={() => revertToVersion(index)}
> >
<h2 className="text-sm">{displayHistoryItemType(item.type)}</h2> <h2 className="text-sm">{displayHistoryItemType(item.type)}</h2>