Add framer-motion dependency and update HistoryTable and ProfileCard components

- Added framer-motion version 12.29.0 to enhance animation capabilities.
- Updated HistoryTable component headers for improved clarity and consistency.
- Enhanced ProfileCard component styling for better visual integration.
This commit is contained in:
Jamie Pine
2026-01-25 17:19:46 -08:00
parent a1b0f268c9
commit a0302c095e
4 changed files with 19 additions and 18 deletions
+1
View File
@@ -36,6 +36,7 @@
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"date-fns": "^3.6.0",
"framer-motion": "^12.29.0",
"lucide-react": "^0.454.0",
"react": "^18.3.0",
"react-dom": "^18.3.0",
+10 -17
View File
@@ -84,12 +84,12 @@ export function HistoryTable() {
<Table className="w-full table-fixed">
<TableHeader className="sticky top-0 bg-background z-10">
<TableRow>
<TableHead className="w-[38%]">Text</TableHead>
<TableHead className="w-[13%]">Profile</TableHead>
<TableHead className="w-[9%]">Language</TableHead>
<TableHead className="w-[9%]">Duration</TableHead>
<TableHead className="w-[13%]">Created</TableHead>
<TableHead className="w-[8%] text-right">Actions</TableHead>
<TableHead className="w-[38%]">Input</TableHead>
<TableHead className="w-[13%]">Voice</TableHead>
<TableHead className="w-[9%]">Lang</TableHead>
<TableHead className="w-[9%]">Length</TableHead>
<TableHead className="w-[13%]">Date</TableHead>
<TableHead className="w-[8%] text-right"></TableHead>
</TableRow>
</TableHeader>
<TableBody>
@@ -104,7 +104,7 @@ export function HistoryTable() {
<TableCell className="truncate">{gen.text}</TableCell>
<TableCell className="truncate">{gen.profile_name}</TableCell>
<TableCell>
<Badge variant="outline" className="text-xs">
<Badge variant="outline" className="text-xs text-muted-foreground">
{gen.language}
</Badge>
</TableCell>
@@ -113,10 +113,7 @@ export function HistoryTable() {
{formatDate(gen.created_at)}
</TableCell>
<TableCell className="text-right">
<div
className="flex justify-end"
onClick={(e) => e.stopPropagation()}
>
<div className="flex justify-end" onClick={(e) => e.stopPropagation()}>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
@@ -129,15 +126,11 @@ export function HistoryTable() {
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem
onClick={() => handlePlay(gen.id, gen.text)}
>
<DropdownMenuItem onClick={() => handlePlay(gen.id, gen.text)}>
<Play className="mr-2 h-4 w-4" />
Play
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => handleDownload(gen.id, gen.text)}
>
<DropdownMenuItem onClick={() => handleDownload(gen.id, gen.text)}>
<Download className="mr-2 h-4 w-4" />
Download
</DropdownMenuItem>
@@ -74,7 +74,7 @@ export function ProfileCard({ profile }: ProfileCardProps) {
{profile.description || 'No description'}
</p>
<div className="mb-2">
<Badge variant="outline" className="text-xs h-5 px-1.5">
<Badge variant="outline" className="text-xs h-5 px-1.5 text-muted-foreground">
{profile.language}
</Badge>
</div>
+7
View File
@@ -38,6 +38,7 @@
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"date-fns": "^3.6.0",
"framer-motion": "^12.29.0",
"lucide-react": "^0.454.0",
"react": "^18.3.0",
"react-dom": "^18.3.0",
@@ -734,6 +735,8 @@
"fraction.js": ["[email protected]", "", {}, "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ=="],
"framer-motion": ["[email protected]", "", { "dependencies": { "motion-dom": "^12.29.0", "motion-utils": "^12.27.2", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-1gEFGXHYV2BD42ZPTFmSU9buehppU+bCuOnHU0AD18DKh9j4DuTx47MvqY5ax+NNWRtK32qIcJf1UxKo1WwjWg=="],
"fs.realpath": ["[email protected]", "", {}, "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="],
"fsevents": ["[email protected]", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
@@ -850,6 +853,10 @@
"minimatch": ["[email protected]", "", { "dependencies": { "brace-expansion": "^1.1.7" } }, "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw=="],
"motion-dom": ["[email protected]", "", { "dependencies": { "motion-utils": "^12.27.2" } }, "sha512-3eiz9bb32yvY8Q6XNM4AwkSOBPgU//EIKTZwsSWgA9uzbPBhZJeScCVcBuwwYVqhfamewpv7ZNmVKTGp5qnzkA=="],
"motion-utils": ["[email protected]", "", {}, "sha512-B55gcoL85Mcdt2IEStY5EEAsrMSVE2sI14xQ/uAdPL+mfQxhKKFaEag9JmfxedJOR4vZpBGoPeC/Gm13I/4g5Q=="],
"ms": ["[email protected]", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
"mz": ["[email protected]", "", { "dependencies": { "any-promise": "^1.0.0", "object-assign": "^4.0.1", "thenify-all": "^1.0.0" } }, "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q=="],