Skip to content

Commit 20d560e

Browse files
psiddharthdesignpsiddharthdesign
committed
feature/tentative tfvars table implementation
1 parent f589d72 commit 20d560e

File tree

22 files changed

+837
-98
lines changed

22 files changed

+837
-98
lines changed

‎src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/project/[projectSlug]/(specific-project-pages)/EmptyTFVarState.tsx

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { Button } from "@/components/ui/button";
2+
import { Card, CardContent } from "@/components/ui/card";
3+
import { motion } from 'framer-motion';
4+
import { Plus } from 'lucide-react';
5+
import React from 'react';
6+
7+
interface EmptyStateProps {
8+
onAddVariable: () => void;
9+
}
10+
11+
const EmptyState: React.FC<EmptyStateProps> = ({ onAddVariable }) => {
12+
return (
13+
<motion.div
14+
initial={{ opacity: 0, y: 20 }}
15+
animate={{ opacity: 1, y: 0 }}
16+
transition={{ duration: 0.5 }}
17+
>
18+
<Card className="mt-6 border-none bg-transparent shadow-none">
19+
<CardContent className="flex flex-col items-center justify-center py-12">
20+
<h3 className="text-2xl font-semibold mb-2">No Environment Variables Yet</h3>
21+
<p className="text-muted-foreground mb-6 text-center max-w-md">
22+
Add your first environment variable to get started. These variables will be available in your project's runtime.
23+
</p>
24+
<motion.div
25+
whileHover={{ scale: 1.05 }}
26+
whileTap={{ scale: 0.95 }}
27+
>
28+
<Button onClick={onAddVariable} size="lg">
29+
<Plus className="mr-2 h-4 w-4" /> Add Environment Variable
30+
</Button>
31+
</motion.div>
32+
</CardContent>
33+
</Card>
34+
</motion.div>
35+
);
36+
};
37+
38+
export default EmptyState;

‎src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/project/[projectSlug]/(specific-project-pages)/ProjectDetails.tsx

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
'use client';
2+
3+
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
4+
import { motion } from "framer-motion";
5+
import { Run, RunsTable } from "./RunsTable";
6+
7+
export default function RunsDetails({ runs }: { runs: Run[] }) {
8+
return (
9+
<motion.div
10+
initial={{ opacity: 0, y: 10 }}
11+
animate={{ opacity: 1, y: 0 }}
12+
exit={{ opacity: 0, y: -10 }}
13+
transition={{ duration: 0.1 }}
14+
>
15+
<Card className="w-full">
16+
<motion.div
17+
initial={{ opacity: 0, y: -5 }}
18+
animate={{ opacity: 1, y: 0 }}
19+
transition={{ duration: 0.15, delay: 0.1 }}
20+
>
21+
<CardHeader>
22+
23+
<CardTitle>Project Runs</CardTitle>
24+
<CardDescription>View all runs for this project</CardDescription>
25+
26+
</CardHeader>
27+
</motion.div>
28+
<CardContent>
29+
<motion.div
30+
initial={{ opacity: 0 }}
31+
animate={{ opacity: 1 }}
32+
transition={{ duration: 0.15, delay: 0.2 }}
33+
>
34+
<RunsTable runs={runs} />
35+
</motion.div>
36+
</CardContent>
37+
</Card>
38+
</motion.div>
39+
);
40+
}

‎src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/project/[projectSlug]/(specific-project-pages)/ProjectSettings.tsx

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
'use client';
2+
3+
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
4+
import { motion } from "framer-motion";
5+
6+
export default function ProjectSettings() {
7+
return (
8+
<motion.div
9+
initial={{ opacity: 0, y: 10 }}
10+
animate={{ opacity: 1, y: 0 }}
11+
exit={{ opacity: 0, y: -10 }}
12+
transition={{ duration: 0.1 }}
13+
>
14+
<Card className="w-full">
15+
<motion.div
16+
initial={{ opacity: 0, y: -5 }}
17+
animate={{ opacity: 1, y: 0 }}
18+
transition={{ duration: 0.15, delay: 0.1 }}
19+
>
20+
<CardHeader>
21+
<CardTitle>Project Settings</CardTitle>
22+
<CardDescription>Manage settings for your project</CardDescription>
23+
</CardHeader>
24+
</motion.div>
25+
<CardContent>
26+
<motion.div
27+
initial={{ opacity: 0 }}
28+
animate={{ opacity: 1 }}
29+
transition={{ duration: 0.15, delay: 0.2 }}
30+
>
31+
{/* Add your project settings management component here */}
32+
</motion.div>
33+
</CardContent>
34+
</Card>
35+
</motion.div>
36+
);
37+
}

‎src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/project/[projectSlug]/(specific-project-pages)/RunsTable.tsx

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
2+
3+
export type Run = {
4+
runId: string;
5+
commitId: string;
6+
status: string;
7+
date: string;
8+
user: string;
9+
};
10+
11+
type StatusColor = {
12+
[key: string]: string;
13+
};
14+
15+
const statusColors: StatusColor = {
16+
queued: 'bg-yellow-200/50 text-yellow-800 dark:bg-yellow-900/50 dark:text-yellow-200',
17+
'pending approval': 'bg-blue-200/50 text-blue-800 dark:bg-blue-900/50 dark:text-blue-200',
18+
running: 'bg-purple-200/50 text-purple-800 dark:bg-purple-900/50 dark:text-purple-200',
19+
approved: 'bg-green-200/50 text-green-800 dark:bg-green-900/50 dark:text-green-200',
20+
succeeded: 'bg-green-200/50 text-green-800 dark:bg-green-900/50 dark:text-green-200',
21+
failed: 'bg-red-200/50 text-red-800 dark:bg-red-900/50 dark:text-red-200',
22+
};
23+
24+
export const RunsTable = ({ runs }: { runs: Run[] }) => (
25+
<Table>
26+
<TableHeader>
27+
<TableRow>
28+
<TableHead className="text-left">Run ID</TableHead>
29+
<TableHead className="text-left">Commit ID</TableHead>
30+
<TableHead className="text-left">Status</TableHead>
31+
<TableHead className="text-left">Date</TableHead>
32+
<TableHead className="text-left">User</TableHead>
33+
</TableRow>
34+
</TableHeader>
35+
<TableBody>
36+
{runs.length > 0 ? (
37+
runs.map((run) => (
38+
<TableRow key={run.runId}>
39+
<TableCell>{run.runId}</TableCell>
40+
<TableCell>{run.commitId}</TableCell>
41+
<TableCell>
42+
<span className={`px-2 py-1 rounded-full text-xs font-medium ${statusColors[run.status.toLowerCase()] || ''}`}>
43+
{run.status.toUpperCase()}
44+
</span>
45+
</TableCell>
46+
<TableCell>{run.date}</TableCell>
47+
<TableCell>{run.user}</TableCell>
48+
</TableRow>
49+
))
50+
) : (
51+
<TableRow>
52+
<TableCell colSpan={5} className="text-center">No runs available</TableCell>
53+
</TableRow>
54+
)}
55+
</TableBody>
56+
</Table>
57+
);

0 commit comments

Comments
 (0)