Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI toggle and fixed build issues #713

Merged
merged 1 commit into from
Oct 16, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 19 additions & 20 deletions Benjamin/app/(auth)/login/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,42 +2,41 @@
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Spinner } from "@/components/ui/spinner";
import { Loader2, Lock, Mail, User } from "lucide-react";
import { signIn, useSession } from "next-auth/react";
import { Lock, Mail, User } from "lucide-react";
import { useState } from "react";
import toast, { Toaster } from "react-hot-toast";

const Login = () => {
// BE logic and states
const session= useSession();
// const session= useSession();

const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState("");
const [loading, setloading] =useState(false);
const [loading] =useState(false);

if (error != "") {
toast.error(error);
setError("");
}

const handleSubmit = async (e: React.FormEvent) => {
setloading(true)
e.preventDefault();
// const handleSubmit = async (e: React.FormEvent) => {
// setloading(true)
// e.preventDefault();

const result = await signIn("credentials", {
email,
password,
redirect: false,
});
console.log(result)
if (result?.error) setError("Invalid email or password");
else {
toast.success(`Welcome ${session.data?.user?.name}`)
window.location.href = "/"; // Redirect on success
}
setloading(false)
};
// const result = await signIn("credentials", {
// email,
// password,
// redirect: false,
// });
// console.log(result)
// if (result?.error) setError("Invalid email or password");
// else {
// toast.success(`Welcome ${session.data?.user?.name}`)
// window.location.href = "/"; // Redirect on success
// }
// setloading(false)
// };

// FE logic and states
const [switchCss, setSwitchCss] = useState(true);
Expand Down
6 changes: 3 additions & 3 deletions Benjamin/app/Blog/[blogId]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@ import Blog from "@/components/Blog/Blog";

const BlogPage = () => {
return (
<>
<div className="h-full dark:bg-DarkGray">
<div className="h-full">
<div className="text-white flex items-center justify-center bg-customTeal h-full mb-20 p-24">
<div className="text-white flex items-center justify-center bg-customTeal dark:bg-gradient-to-r from-Green to-Yellow h-full mb-20 p-24">
<div className="text-4xl pt-5 lg:pt-0 lg:text-7xl text-center lg:text-start font-extrabold font-handlee">Blog Page</div>
</div>
</div>

<Blog/>
</>
</div>
);
}

Expand Down
8 changes: 4 additions & 4 deletions Benjamin/app/Blog/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,18 @@ import SeperatorHeading from "@/components/ui/seperatorHeading";

const Blogs = () => {
return (
<>
<div className="h-full dark:bg-DarkGray pb-10">
<div className="h-full">
<div className="text-white flex items-center justify-center bg-gradient-to-r from-Green to-Yellow h-full mb-20 p-24">
<div className="text-white flex items-center justify-center bg-customTeal dark:bg-gradient-to-r from-Green to-Yellow h-full mb-20 p-24">
<div className="text-4xl pt-5 lg:pt-0 lg:text-7xl text-center lg:text-start font-extrabold text-gray-200 font-handlee">Our Blog</div>
</div>
</div>
<SeperatorHeading label="Latest Blog" />
<div className="flex items-center justify-center px-5 text-3xl lg:px-0 my-10 lg:text-4xl font-bold text-Green font-handlee">
<div className="flex items-center justify-center px-5 text-3xl lg:px-0 my-10 lg:text-4xl font-bold text-customTeal dark:text-Green font-handlee">
Latest articles from our blogs
</div>
<BlogCard/>
</>
</div>
);
};

Expand Down
10 changes: 5 additions & 5 deletions Benjamin/app/MyOrders/[orderId]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -50,23 +50,23 @@ const orderItems = [

const Order = () => {
return (
<div className="flex items-start my-10 w-full justify-center min-h-screen">
<div className="flex items-start dark:bg-DarkGray py-10 w-full justify-center min-h-screen">
<div className="w-3/4 flex flex-col gap-2">
<Link href={"/MyOrders"}>
<Button className="h-12 mb-2 hover:shadow-lg w-12 p-0">
<Button className="h-12 mb-2 bg-customTeal dark:bg-Green hover:opacity-90 hover:shadow-lg w-12 p-0">
<ArrowLeft className="h-10 w-10" />
</Button>
</Link>

<div className="text-gray-200 font-bold text-2xl">Order Summary</div>
<div className="dark:text-gray-200 font-bold text-2xl">Order Summary</div>
<div className="text-gray-500 text-sm">Arrived at 9:59 pm</div>
<div className="flex mb-5 hover:cursor-pointer hover:underline items-center text-green-500 justify-start">
<div className="flex mb-5 hover:cursor-pointer hover:underline items-center text-customTeal dark:text-green-500 justify-start">
<div>Download Invoice</div>
<Download className="h-4 w-4 ml-1" />
</div>

{/* Scrollable Content Section */}
<div className="flex-1 shadow-2xl overflow-y-auto max-h-[400px] w-full border border-gray-700 rounded-lg p-3">
<div className="flex-1 shadow-2xl overflow-y-auto max-h-[400px] w-full border border-gray-700 rounded-lg ">
{orderItems.map((item) => (
<OrderItem key={item.name} item={item} />
))}
Expand Down
2 changes: 1 addition & 1 deletion Benjamin/app/MyOrders/components/columns.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ export const columns: ColumnDef<order>[] = [
const orderId = row.getValue("orderId");
return (
<Link href={`MyOrders/${orderId}`}>
<Button className="border text-sm font-bold text-Green hover:bg-Green hover:text-gray-200 hover:border hover:border-DarkGray">
<Button className="border text-sm font-bold bg-customTeal hover:bg-customTeal dark:bg-Green dark:hover:bg-Green hover:opacity-80 text-gray-200 hover:border hover:border-DarkGray">
view details
</Button>
</Link>
Expand Down
13 changes: 7 additions & 6 deletions Benjamin/app/MyOrders/components/datatable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,15 +44,15 @@ export function DataTable<TData, TValue>({
});

return (
<div className="w-3/4 text-gray-200">
<div className="rounded-md border">
<div className="w-3/4 text-black dark:text-gray-200">
<div className="rounded-md dark:dark:border-gray-200 border">
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<TableHead className="bg-DarkGray" key={header.id}>
<TableHead className= "bg-customTeal text-gray-200 dark:bg-Green dark:text-Yellow font-bold dark:border-gray-200 dark:border-b" key={header.id}>
{header.isPlaceholder
? null
: flexRender(
Expand All @@ -65,12 +65,13 @@ export function DataTable<TData, TValue>({
</TableRow>
))}
</TableHeader>
<TableBody>
<TableBody className="dark:border-gray-200 dark:border-y">
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={row.getIsSelected() && "selected"}
className="dark:border-gray-200 dark:border-y"
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
Expand Down Expand Up @@ -101,7 +102,7 @@ export function DataTable<TData, TValue>({
size="sm"
onClick={() => table.previousPage()}
disabled={!table.getCanPreviousPage()}
className="text-gray-500 font-bold"
className="bg-customTeal text-gray-200 dark:text-gray-200 dark:bg-Green hover:opacity-80 font-bold"
>
Previous
</Button>
Expand All @@ -110,7 +111,7 @@ export function DataTable<TData, TValue>({
size="sm"
onClick={() => table.nextPage()}
disabled={!table.getCanNextPage()}
className="text-gray-500 font-bold"
className="bg-customTeal text-gray-200 dark:text-gray-200 dark:bg-Green hover:opacity-80 font-bold"
>
Next
</Button>
Expand Down
8 changes: 4 additions & 4 deletions Benjamin/app/MyOrders/components/orderItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,16 @@ export interface orderItemProps {

const OrderItem: React.FC<orderItemProps> = ({ item }) => {
return (
<div className="flex bg-gray-700 p-5 hover:scale-100 my-2 rounded-lg shadow-2xl w-full items-center justify-between">
<div className="flex items-center text-gray-200 justify-center gap-5">
<div className="flex bg-gray-200 dark:bg-gray-700 p-5 hover:scale-100 my-2 rounded-lg shadow-lg w-full items-center justify-between">
<div className="flex items-center dark:text-gray-200 justify-center gap-5">
<Image
src={item.image}
className="rounded-lg"
width={"100"}
height={"100"}
alt="orderImage"
/>
<div className="flex text-gray-200 flex-col items-start justify-center">
<div className="flex dark:text-gray-200 flex-col items-start justify-center">
<div className="flex gap-2 font-bold items-center justify-center">
<div>{item.name}</div>
</div>
Expand All @@ -30,7 +30,7 @@ const OrderItem: React.FC<orderItemProps> = ({ item }) => {
</div>
</div>
</div>
<div className="text-gray-200">{item.price}</div>
<div className="dark:text-gray-200">{item.price}</div>

</div>
);
Expand Down
Loading