feat: add breadcrumbs
This commit is contained in:
parent
b9ea061a2e
commit
5c76a8b444
|
@ -1,12 +1,21 @@
|
|||
import AddAccountForm from "@/components/add-account-form";
|
||||
import Breadcrumb from "@/components/breadcrumb";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
|
||||
const breadcrumbItems = [
|
||||
{ title: "Dashboard", link: "/dashboard" },
|
||||
{ title: "Accounts", link: "/dashboard/accounts" },
|
||||
{ title: "Add" },
|
||||
];
|
||||
|
||||
export default function SettingsDisplayPage() {
|
||||
return (
|
||||
<ScrollArea className="h-[calc(100vh-53px)]">
|
||||
<div className="flex-1 space-y-4 p-4 md:p-8 pt-6 w-full h-full flex justify-center items-center">
|
||||
<div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
|
||||
<Breadcrumb items={breadcrumbItems} />
|
||||
<div className="w-full h-full flex justify-center items-center">
|
||||
<Card className="max-w-[700px] w-full">
|
||||
<CardHeader>
|
||||
<CardTitle className="mb-4 font-bold text-xl">
|
||||
|
@ -20,6 +29,7 @@ export default function SettingsDisplayPage() {
|
|||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<ScrollBar />
|
||||
</ScrollArea>
|
||||
);
|
||||
|
|
|
@ -1,24 +1,34 @@
|
|||
import AddAPICommunicationForm from "@/components/add-api-communication-form";
|
||||
import Breadcrumb from "@/components/breadcrumb";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
|
||||
const breadcrumbItems = [
|
||||
{ title: "Dashboard", link: "/dashboard" },
|
||||
{ title: "Api Communications", link: "/dashboard/api-communications" },
|
||||
{ title: "Add" },
|
||||
];
|
||||
|
||||
export default function SettingsDisplayPage() {
|
||||
return (
|
||||
<ScrollArea className="h-[calc(100vh-53px)]">
|
||||
<div className="flex-1 space-y-4 p-4 md:p-8 pt-6 w-full h-full flex justify-center items-center">
|
||||
<Card className="max-w-[700px] w-full">
|
||||
<CardHeader>
|
||||
<CardTitle className="mb-4 font-bold text-xl">
|
||||
Create API Communication
|
||||
</CardTitle>
|
||||
<Separator />
|
||||
</CardHeader>
|
||||
<div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
|
||||
<Breadcrumb items={breadcrumbItems} />
|
||||
<div className="w-full h-full flex justify-center items-center">
|
||||
<Card className="max-w-[700px] w-full mb-8">
|
||||
<CardHeader>
|
||||
<CardTitle className="mb-4 font-bold text-xl">
|
||||
Create API Communication
|
||||
</CardTitle>
|
||||
<Separator />
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<AddAPICommunicationForm />
|
||||
</CardContent>
|
||||
</Card>
|
||||
<CardContent>
|
||||
<AddAPICommunicationForm />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<ScrollBar />
|
||||
</ScrollArea>
|
||||
|
|
|
@ -1,17 +1,18 @@
|
|||
import Breadcrumb from "@/components/breadcrumb";
|
||||
import ChangePasswordForm from "@/components/change-password-form";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
|
||||
const breadcrumbItems = [
|
||||
{ title: "Dashboard", link: "/dashboard" },
|
||||
{ title: "Change Password" },
|
||||
];
|
||||
|
||||
export default function SettingsProfilePage() {
|
||||
return (
|
||||
<div className="flex-1 space-y-4 p-4 md:p-8 pt-6 h-full w-full flex justify-center items-center">
|
||||
{/* <div>
|
||||
<h3 className="text-lg font-medium">Change Password</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Change your password carefully.
|
||||
</p>
|
||||
<div className="flex-1 space-y-4 p-4 md:p-8 pt-6 w-full h-full">
|
||||
<Breadcrumb items={breadcrumbItems} />
|
||||
<div className="w-full flex justify-center">
|
||||
<ChangePasswordForm />
|
||||
</div>
|
||||
<Separator /> */}
|
||||
<ChangePasswordForm />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -2,11 +2,20 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|||
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import AddConfigurationForm from "@/components/add-configuration-form";
|
||||
import Breadcrumb from "@/components/breadcrumb";
|
||||
|
||||
const breadcrumbItems = [
|
||||
{ title: "Dashboard", link: "/dashboard" },
|
||||
{ title: "Configurations", link: "/dashboard/configurations" },
|
||||
{ title: "Add" },
|
||||
];
|
||||
|
||||
export default function SettingsDisplayPage() {
|
||||
return (
|
||||
<ScrollArea className="h-[calc(100vh-53px)]">
|
||||
<div className="flex-1 space-y-4 p-4 md:p-8 pt-6 w-full h-full flex justify-center items-center">
|
||||
<div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
|
||||
<Breadcrumb items={breadcrumbItems} />
|
||||
<div className="w-full h-full flex justify-center items-center">
|
||||
<Card className="max-w-[700px] w-full">
|
||||
<CardHeader>
|
||||
<CardTitle className="mb-4 font-bold text-xl">
|
||||
|
@ -20,6 +29,7 @@ export default function SettingsDisplayPage() {
|
|||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<ScrollBar />
|
||||
</ScrollArea>
|
||||
);
|
||||
|
|
|
@ -2,23 +2,33 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|||
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import AddOrganizationForm from "@/components/add-organization-form";
|
||||
import Breadcrumb from "@/components/breadcrumb";
|
||||
|
||||
const breadcrumbItems = [
|
||||
{ title: "Dashboard", link: "/dashboard" },
|
||||
{ title: "Organizations", link: "/dashboard/organizations" },
|
||||
{ title: "Add" },
|
||||
];
|
||||
|
||||
export default function SettingsDisplayPage() {
|
||||
return (
|
||||
<ScrollArea className="h-[calc(100vh-53px)]">
|
||||
<div className="flex-1 space-y-4 p-4 md:p-8 pt-6 w-full h-full flex justify-center items-center">
|
||||
<Card className="max-w-[700px] w-full">
|
||||
<CardHeader>
|
||||
<CardTitle className="mb-4 font-bold text-xl">
|
||||
Create Organization
|
||||
</CardTitle>
|
||||
<Separator />
|
||||
</CardHeader>
|
||||
<div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
|
||||
<Breadcrumb items={breadcrumbItems} />
|
||||
<div className="w-full h-full flex justify-center items-center">
|
||||
<Card className="max-w-[700px] w-full">
|
||||
<CardHeader>
|
||||
<CardTitle className="mb-4 font-bold text-xl">
|
||||
Create Organization
|
||||
</CardTitle>
|
||||
<Separator />
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<AddOrganizationForm />
|
||||
</CardContent>
|
||||
</Card>
|
||||
<CardContent>
|
||||
<AddOrganizationForm />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<ScrollBar />
|
||||
</ScrollArea>
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
"use client";
|
||||
|
||||
import Breadcrumb from "@/components/breadcrumb";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
|
@ -76,6 +77,11 @@ const dummyPreferences = [
|
|||
},
|
||||
];
|
||||
|
||||
const breadcrumbItems = [
|
||||
{ title: "Dashboard", link: "/dashboard" },
|
||||
{ title: "Preferences" },
|
||||
];
|
||||
|
||||
const Page = () => {
|
||||
const [preference, setPreference] = useState({
|
||||
readability: [50],
|
||||
|
@ -91,8 +97,10 @@ const Page = () => {
|
|||
});
|
||||
|
||||
return (
|
||||
<div className="flex-1 space-y-4 p-4 md:p-8 pt-6 w-full h-full flex justify-center items-center">
|
||||
<Card className="max-w-[600px] w-full">
|
||||
<div className="flex-1 space-y-4 p-4 md:p-8 pt-6 w-full h-full">
|
||||
<Breadcrumb items={breadcrumbItems} />
|
||||
<div className="w-full h-full flex justify-center">
|
||||
<Card className="max-w-[600px] w-full h-fit">
|
||||
<CardHeader>
|
||||
<CardTitle className="mb-4 font-bold text-xl">
|
||||
Code Evaluation Criteria
|
||||
|
@ -106,7 +114,7 @@ const Page = () => {
|
|||
(item: { id: number; name: string; description: string }) => (
|
||||
<div key={item.id} className="space-y-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<h4 className="capitalize font-semibold">{item.name}</h4>
|
||||
<h4 className="capitalize font-semibold text-sm sm:text-base">{item.name}</h4>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<CircleHelp className="size-4" />
|
||||
|
@ -137,6 +145,7 @@ const Page = () => {
|
|||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import AddUserForm from "@/components/add-user-form";
|
||||
import Breadcrumb from "@/components/breadcrumb";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
|
@ -10,11 +11,19 @@ import {
|
|||
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
|
||||
const breadcrumbItems = [
|
||||
{ title: "Dashboard", link: "/dashboard" },
|
||||
{ title: "Users", link: "/dashboard/users" },
|
||||
{ title: "Add" },
|
||||
];
|
||||
|
||||
export default function SettingsDisplayPage() {
|
||||
return (
|
||||
<ScrollArea className="h-[calc(100vh-53px)]">
|
||||
<div className="flex-1 space-y-4 p-4 md:p-8 pt-6 w-full h-full flex justify-center items-center">
|
||||
<Card className="max-w-[700px] w-full">
|
||||
<div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
|
||||
<Breadcrumb items={breadcrumbItems} />
|
||||
<div className="w-full h-full flex justify-center items-center">
|
||||
<Card className="max-w-[700px] w-full mb-8">
|
||||
<CardHeader>
|
||||
<CardTitle className="mb-4 font-bold text-xl">
|
||||
Create User
|
||||
|
@ -26,6 +35,7 @@ export default function SettingsDisplayPage() {
|
|||
<AddUserForm />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<ScrollBar />
|
||||
</ScrollArea>
|
||||
|
|
|
@ -132,7 +132,7 @@ export default function AddAccountForm() {
|
|||
)}
|
||||
/>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-4 flex-col sm:flex-row">
|
||||
<Button className="w-full" size="lg">
|
||||
Create
|
||||
</Button>
|
||||
|
|
|
@ -227,7 +227,7 @@ export default function AddAPICommunicationForm() {
|
|||
)}
|
||||
/>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-4 flex-col sm:flex-row">
|
||||
<Button className="w-full" size="lg">
|
||||
Create
|
||||
</Button>
|
||||
|
|
|
@ -76,7 +76,7 @@ export default function AddConfigurationForm() {
|
|||
)}
|
||||
/>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-4 flex-col sm:flex-row">
|
||||
<Button className="w-full" size="lg">
|
||||
Create
|
||||
</Button>
|
||||
|
|
|
@ -92,7 +92,7 @@ export default function AddCriteriaForm() {
|
|||
)}
|
||||
/>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-4 flex-col sm:flex-row">
|
||||
<Button className="w-full" size="lg">
|
||||
Create
|
||||
</Button>
|
||||
|
|
|
@ -61,7 +61,7 @@ export default function AddOrganizationForm() {
|
|||
)}
|
||||
/>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-4 flex-col sm:flex-row">
|
||||
<Button className="w-full" size="lg">
|
||||
Create
|
||||
</Button>
|
||||
|
|
|
@ -61,7 +61,7 @@ export default function AddSkillForm() {
|
|||
)}
|
||||
/>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-4 flex-col sm:flex-row">
|
||||
<Button className="w-full" size="lg">
|
||||
Create
|
||||
</Button>
|
||||
|
|
|
@ -209,7 +209,7 @@ export default function AddUserForm() {
|
|||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-4 flex-col sm:flex-row">
|
||||
<Button className="w-full" size="lg">
|
||||
Create
|
||||
</Button>
|
||||
|
|
|
@ -87,6 +87,7 @@ export default function ChangePasswordForm() {
|
|||
<FormLabel>Current Password</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="Enter your current password..."
|
||||
{...field}
|
||||
/>
|
||||
|
@ -103,6 +104,7 @@ export default function ChangePasswordForm() {
|
|||
<FormLabel>New Password</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="Enter your new password..."
|
||||
{...field}
|
||||
/>
|
||||
|
@ -119,6 +121,7 @@ export default function ChangePasswordForm() {
|
|||
<FormLabel>Confirm New Password</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="Confirm the new password..."
|
||||
{...field}
|
||||
/>
|
||||
|
@ -127,7 +130,9 @@ export default function ChangePasswordForm() {
|
|||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Button type="submit" className="w-full" size="lg">Reset Password</Button>
|
||||
<Button type="submit" className="w-full" size="lg">
|
||||
Reset Password
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
</CardContent>
|
||||
|
|
|
@ -310,7 +310,7 @@ export default function AddEvaluationForm() {
|
|||
)}
|
||||
/>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-4 flex-col sm:flex-row">
|
||||
<Button className="w-full" size="lg">
|
||||
Create
|
||||
</Button>
|
||||
|
|
Loading…
Reference in New Issue