Skip to content

Commit

Permalink
feat: add landing page (#12)
Browse files Browse the repository at this point in the history 
* feat: add navbar integrated with authenticated user

* feat: add landing page
  • Loading branch information
@nisrinasalm
nisrinasalm authored Nov 27, 2024
1 parent 7f2b4cf commit ba759b8
Show file tree
Hide file tree
Showing 10 changed files with 437 additions and 515 deletions.
Binary file added public/images/jumbotron-2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/jumbotron-3.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/jumbotron.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion resources/js/Components/NavLink.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export default function NavLink({
className = "",
children,
...props
}: InertiaLinkProps & { active: boolean }) {
}: InertiaLinkProps & { active?: boolean }) {
return (
<Link
{...props}
Expand Down
174 changes: 3 additions & 171 deletions resources/js/Layouts/AuthenticatedLayout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,181 +1,13 @@
import ApplicationLogo from "@/Components/ApplicationLogo";
import Dropdown from "@/Components/Dropdown";
import NavLink from "@/Components/NavLink";
import ResponsiveNavLink from "@/Components/ResponsiveNavLink";
import { Link, usePage } from "@inertiajs/react";
import { type PropsWithChildren, type ReactNode, useState } from "react";
import { type PropsWithChildren, type ReactNode } from "react";
import Navbar from "./Navbar";

export default function Authenticated({
header,
children,
}: PropsWithChildren<{ header?: ReactNode }>) {
const { auth } = usePage().props as unknown as {
auth: {
user: {
name: string;
email: string;
role: string;
};
};
};
const user = auth.user;
const role = auth.user.role;

const [showingNavigationDropdown, setShowingNavigationDropdown] =
useState(false);

return (
<div className="min-h-screen bg-gray-100">
<nav className="border-b border-gray-100 bg-white">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="flex h-16 justify-between">
<div className="flex">
<div className="flex shrink-0 items-center">
<Link href="/">
<ApplicationLogo width="40" height="40" />
</Link>
</div>

<div className="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
<NavLink
href={route("product.index")}
active={route().current("product.index")}
>
Product
</NavLink>
{role === "user" && (
<NavLink
href={route("cart.index")}
active={route().current("cart.index")}
>
Cart
</NavLink>
)}
</div>
</div>

<div className="hidden sm:ms-6 sm:flex sm:items-center">
<div className="relative ms-3">
<Dropdown>
<Dropdown.Trigger>
<span className="inline-flex rounded-md">
<button
type="button"
className="inline-flex items-center rounded-md border border-transparent bg-white px-3 py-2 text-sm font-medium leading-4 text-gray-500 transition duration-150 ease-in-out hover:text-gray-700 focus:outline-none"
>
{user.name}

<svg
className="-me-0.5 ms-2 h-4 w-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
</button>
</span>
</Dropdown.Trigger>

<Dropdown.Content>
<Dropdown.Link href={route("profile.edit")}>
Profile
</Dropdown.Link>
<Dropdown.Link
href={route("logout")}
method="post"
as="button"
>
Log Out
</Dropdown.Link>
</Dropdown.Content>
</Dropdown>
</div>
</div>

<div className="-me-2 flex items-center sm:hidden">
<button
onClick={() =>
setShowingNavigationDropdown(
(previousState) => !previousState,
)
}
className="inline-flex items-center justify-center rounded-md p-2 text-gray-400 transition duration-150 ease-in-out hover:bg-gray-100 hover:text-gray-500 focus:bg-gray-100 focus:text-gray-500 focus:outline-none"
>
<svg
className="h-6 w-6"
stroke="currentColor"
fill="none"
viewBox="0 0 24 24"
>
<path
className={
!showingNavigationDropdown ? "inline-flex" : "hidden"
}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4 6h16M4 12h16M4 18h16"
/>
<path
className={
showingNavigationDropdown ? "inline-flex" : "hidden"
}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
</div>
</div>

<div
className={
(showingNavigationDropdown ? "block" : "hidden") + " sm:hidden"
}
>
<div className="space-y-1 pb-3 pt-2">
<ResponsiveNavLink
href={route("dashboard")}
active={route().current("dashboard")}
>
Dashboard
</ResponsiveNavLink>
</div>

<div className="border-t border-gray-200 pb-1 pt-4">
<div className="px-4">
<div className="text-base font-medium text-gray-800">
{user.name}
</div>
<div className="text-sm font-medium text-gray-500">
{user.email}
</div>
</div>

<div className="mt-3 space-y-1">
<ResponsiveNavLink href={route("profile.edit")}>
Profile
</ResponsiveNavLink>
<ResponsiveNavLink
method="post"
href={route("logout")}
as="button"
>
Log Out
</ResponsiveNavLink>
</div>
</div>
</div>
</nav>

<Navbar />
{header && (
<header className="bg-white shadow">
<div className="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
Expand Down
89 changes: 89 additions & 0 deletions resources/js/Layouts/Footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import ApplicationLogo from "@/Components/ApplicationLogo";
import Typography from "@/Components/Typography";
import { Link } from "@inertiajs/react";
import { Instagram } from "lucide-react";
import { Twitter } from "lucide-react";
import { Facebook } from "lucide-react";

export default function Footer() {
return (
<footer className="bg-secondary-500 py-8 px-12 lg:px-24">
<div className="flex flex-col lg:flex-row gap-4">
<div className="flex items-center w-1/2 gap-2">
<ApplicationLogo width="50px" height="50px" />
<Typography variant="h3" className="text-primary-500">
Furnixy
</Typography>
</div>
{/* Quick Links */}
<div className="flex w-1/2 flex-col gap-2">
<Typography
className="text-primary-500 underline decoration-2"
variant="h3"
>
Quick Links
</Typography>
<div className="flex items-center gap-2">
<Link href="/">
<Typography className="text-primary-500 font-semibold">
Home
</Typography>
</Link>
</div>
<div className="flex items-center gap-2">
<Link href="/product">
<Typography className="text-primary-500 font-semibold">
Product
</Typography>
</Link>
</div>
<div className="flex items-center gap-2">
<Link href="/login">
<Typography className="text-primary-500 font-semibold">
Login
</Typography>
</Link>
</div>
<div className="flex items-center gap-2">
<Link href="/register">
<Typography className="text-primary-500 font-semibold">
Register
</Typography>
</Link>
</div>
</div>
{/* Our Contact */}
<div className="flex w-1/2 flex-col gap-2">
<Typography
className="text-primary-500 underline decoration-2"
variant="h3"
>
Our Contact
</Typography>
<div className="flex items-center gap-2">
<Instagram className="text-primary-500" />
<Typography className="text-primary-500 font-semibold">
Instagram
</Typography>
</div>
<div className="flex items-center gap-2">
<Twitter className="text-primary-500" />
<Typography className="text-primary-500 font-semibold">
Twitter
</Typography>
</div>
<div className="flex items-center gap-2">
<Facebook className="text-primary-500" />
<Typography className="text-primary-500 font-semibold">
Facebook
</Typography>
</div>
</div>
</div>
<div className="mt-4 h-[2px] bg-primary-500"></div>
<Typography className="mt-4">
© Copyright Furnixy! 2024. All Rights Reserved
</Typography>
</footer>
);
}
13 changes: 13 additions & 0 deletions resources/js/Layouts/Layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { type PropsWithChildren } from "react";
import Footer from "./Footer";
import Navbar from "./Navbar";

export default function Layout({ children }: PropsWithChildren) {
return (
<div>
<Navbar />
<main>{children}</main>
<Footer />
</div>
);
}
Loading

0 comments on commit ba759b8

Please sign in to comment.