Skip to content

Commit

Permalink
navbar y footer
Browse files Browse the repository at this point in the history
  • Loading branch information
IvanRomero03 committed Nov 1, 2024
1 parent 23a9bca commit fee25a8
Show file tree
Hide file tree
Showing 5 changed files with 224 additions and 37 deletions.
37 changes: 37 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
"@prisma/client": "^5.14.0",
"@radix-ui/react-avatar": "^1.1.1",
"@radix-ui/react-checkbox": "^1.1.2",
"@radix-ui/react-dialog": "^1.1.2",
"@radix-ui/react-dropdown-menu": "^2.1.2",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-label": "^2.1.0",
Expand Down
140 changes: 140 additions & 0 deletions r/components/ui/sheet.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
"use client";

import * as React from "react";
import * as SheetPrimitive from "@radix-ui/react-dialog";
import { Cross2Icon } from "@radix-ui/react-icons";
import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "r/lib/utils";

const Sheet = SheetPrimitive.Root;

const SheetTrigger = SheetPrimitive.Trigger;

const SheetClose = SheetPrimitive.Close;

const SheetPortal = SheetPrimitive.Portal;

const SheetOverlay = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
>(({ className, ...props }, ref) => (
<SheetPrimitive.Overlay
className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className,
)}
{...props}
ref={ref}
/>
));
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;

const sheetVariants = cva(
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
{
variants: {
side: {
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
bottom:
"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
right:
"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
},
},
defaultVariants: {
side: "right",
},
},
);

interface SheetContentProps
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
VariantProps<typeof sheetVariants> {}

const SheetContent = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Content>,
SheetContentProps
>(({ side = "right", className, children, ...props }, ref) => (
<SheetPortal>
<SheetOverlay />
<SheetPrimitive.Content
ref={ref}
className={cn(sheetVariants({ side }), className)}
{...props}
>
<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
<Cross2Icon className="h-4 w-4" />
<span className="sr-only">Close</span>
</SheetPrimitive.Close>
{children}
</SheetPrimitive.Content>
</SheetPortal>
));
SheetContent.displayName = SheetPrimitive.Content.displayName;

const SheetHeader = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col space-y-2 text-center sm:text-left",
className,
)}
{...props}
/>
);
SheetHeader.displayName = "SheetHeader";

const SheetFooter = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
className,
)}
{...props}
/>
);
SheetFooter.displayName = "SheetFooter";

const SheetTitle = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
>(({ className, ...props }, ref) => (
<SheetPrimitive.Title
ref={ref}
className={cn("text-lg font-semibold text-foreground", className)}
{...props}
/>
));
SheetTitle.displayName = SheetPrimitive.Title.displayName;

const SheetDescription = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
>(({ className, ...props }, ref) => (
<SheetPrimitive.Description
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
));
SheetDescription.displayName = SheetPrimitive.Description.displayName;

export {
Sheet,
SheetPortal,
SheetOverlay,
SheetTrigger,
SheetClose,
SheetContent,
SheetHeader,
SheetFooter,
SheetTitle,
SheetDescription,
};
36 changes: 16 additions & 20 deletions src/app/_components/footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,26 +7,22 @@ import YoutubeLogo from "rbrgs/app/_components/YoutubeLogo";

export default function Footer() {
return (
<footer className="mt-[5rem] flex w-full max-w-full items-center justify-items-center bg-gradient-to-tr from-neutral-950 to-neutral-800 py-[5vw] font-archivo text-white sm:grid-cols-1 sm:flex-wrap sm:px-4 md:flex-row md:px-[5rem] lg:flex lg:h-[15rem] lg:grid-cols-2 lg:items-center lg:py-0">
<div className="flex sm:flex-wrap md:flex-row">
<div>
<p className="font-anton text-[2rem] text-white">
More about RoBorregos
</p>
<div className="mt-[1rem] flex flex-wrap">
<div>
<a href="mailto:[email protected]">
<p className="hover:underline">[email protected]</p>
</a>
<Link href="https://www.roborregos.com/">
<p className="cursor-pointer hover:underline">
www.roborregos.com
</p>
</Link>
</div>
</div>
<footer className="mt-[5rem] flex w-full max-w-full flex-col items-center gap-2 bg-gradient-to-tr from-neutral-950 to-neutral-800 px-10 py-[5vw] text-center font-archivo text-white md:flex-row">
<div>
<p className="font-anton text-[2rem] text-white">
More about RoBorregos
</p>
<div className="mt-[1rem] flex w-full flex-col flex-wrap gap-2">
<a href="mailto:[email protected]">
<p className="hover:underline">[email protected]</p>
</a>
<Link href="https://www.roborregos.com/">
<p className="cursor-pointer hover:underline">www.roborregos.com</p>
</Link>
</div>
<div className="lg:ml-[5rem]">
</div>
<div className="flex w-full flex-col items-center gap-2">
<div>
<p>RoBorregos</p>
<p>
<Link href="https://www.tec.mx/" className="hover:underline">
Expand Down Expand Up @@ -55,7 +51,7 @@ export default function Footer() {
</div>
<Link
href="https://www.roborregos.com/"
className="h-[8rem] w-fit self-center justify-self-center object-contain sm:mt-0 md:mt-[3rem] lg:ml-auto lg:mt-0"
className="flex h-[8rem] w-fit items-center justify-center self-center justify-self-center object-contain lg:ml-auto"
>
<Image
src={robologo}
Expand Down
47 changes: 30 additions & 17 deletions src/app/_components/navDropdown.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,43 +10,56 @@ import menu from "rbrgs/../public/images/menu.svg";
import SignInButton from "./SignInButton";
import { Session } from "next-auth";
import { StaticImport } from "next/dist/shared/lib/get-img-props";
import {
Sheet,
SheetContent,
SheetDescription,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "r/components/ui/sheet";

export default function NavDropdown({ session }: { session: Session | null }) {
return (
<div className="block justify-self-end lg:hidden">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Sheet>
<SheetTrigger asChild>
<Image src={menu as StaticImport} alt="" className="flex h-5 w-5" />
</DropdownMenuTrigger>
<DropdownMenuContent className="mt-3 w-fit rounded-xl border border-white bg-black text-white">
<DropdownMenuItem>
</SheetTrigger>
<SheetContent
className="flex flex-col items-center justify-center bg-black text-white"
side={"top"}
>
<div>
<Link href="/" className="w-full text-center text-lg">
Home
</Link>
</DropdownMenuItem>
<DropdownMenuItem>
</div>
<div>
<Link href="/scoreboard" className="w-full text-center text-lg">
Scoreboard
</Link>
</DropdownMenuItem>
<DropdownMenuItem>
</div>
<div>
<Link href="/team" className="w-full text-center text-lg">
Team
</Link>
</DropdownMenuItem>
<DropdownMenuItem>
</div>
<div>
<Link
href="https://www.roborregos.com"
className="w-full text-center text-lg"
>
About Us
</Link>
</DropdownMenuItem>
<DropdownMenuItem>
<SignInButton session={session} />
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
<div>
<div className="w-fit">
<SignInButton session={session} />
</div>
</div>
</SheetContent>
</Sheet>
</div>
);
}

0 comments on commit fee25a8

Please sign in to comment.