File Upload Simple

1import { Button } from '@/components/ui/button';
2import {
3  Card,
4  CardContent,
5  CardDescription,
6  CardHeader,
7  CardTitle,
8} from '@/components/ui/card';
9import { Input } from '@/components/ui/input';
10import { Label } from '@/components/ui/label';
11 
12export default function FileUpload02() {
13  return (
14    <div className="flex items-center justify-center p-10">
15      <Card className="shadow-none">
16        <CardHeader>
17          <CardTitle>Set up your first workspace</CardTitle>
18          <CardDescription>
19            Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
20          </CardDescription>
21        </CardHeader>
22        <CardContent>
23          <form action="#" method="POST">
24            <div className="space-y-6">
25              <div className="space-y-2">
26                <Label htmlFor="workspace-name">
27                  Workspace <span className="text-destructive">*</span>
28                </Label>
29                <Input
30                  autoComplete="workspace-name"
31                  id="workspace-name"
32                  name="workspace-name"
33                  placeholder="Workspace name"
34                  required
35                  type="text"
36                />
37              </div>
38              <div className="space-y-2">
39                <Label htmlFor="file-1">
40                  Upload file <span className="text-destructive">*</span>
41                </Label>
42                <Input
43                  accept=".csv, .xlsx, .xls"
44                  id="file-1"
45                  name="file-1"
46                  type="file"
47                />
48                <p className="text-pretty text-muted-foreground text-sm">
49                  You are only allowed to upload CSV, XLSX or XLS files.
50                </p>
51              </div>
52            </div>
53            <div className="mt-8 flex justify-end space-x-3">
54              <Button type="button" variant="outline">
55                Cancel
56              </Button>
57              <Button type="submit">Submit</Button>
58            </div>
59          </form>
60        </CardContent>
61      </Card>
62    </div>
63  );
64}