feat: add breadcrumbs

This commit is contained in:
mehedi-hasan 2024-05-03 18:15:24 +06:00
parent b9ea061a2e
commit 5c76a8b444
16 changed files with 114 additions and 49 deletions

View File

@ -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>
);

View File

@ -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>

View File

@ -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>
);
}

View File

@ -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>
);

View File

@ -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>

View File

@ -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>
);
};

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>