-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* bad code but ok * trabajo en la oficina * center nav menu --------- Co-authored-by: Benjamin Halasz <[email protected]>
- Loading branch information
Showing
13 changed files
with
649 additions
and
26 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,14 @@ | ||
| FROM oven/bun:latest | ||
|
|
||
| # To get fresh apk | ||
| RUN apt update | ||
| # Update packages and install prerequisites | ||
| RUN apt update && apt install -y \ | ||
| curl \ | ||
| git \ | ||
| openssh-client \ | ||
| iputils-ping | ||
|
|
||
| RUN apt install -y git openssh-client curl iputils-ping | ||
| # Install Node.js 18.x (includes a newer npm) | ||
| RUN curl -fsSL https://deb.nodesource.com/setup_18.x | bash - && \ | ||
| apt-get install -y nodejs | ||
|
|
||
| ENV ENV=development |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import Link from "next/link"; | ||
| import { NavigationMenuDemo } from "../components/NavBar"; | ||
|
|
||
| export default function MainLanding() { | ||
| return ( | ||
| <> | ||
| <NavigationMenuDemo /> | ||
| <div> | ||
| <p> | ||
| Hej! 👋 Du 🫵 ser 👀 denna 📄 sida 📘 för 💡 att ✨ du 🫶 är 🧊 cool | ||
| 😎 och 🕸️ spindel 🕷️. | ||
| </p> | ||
| <Link href="news">Goto news</Link> | ||
| </div> | ||
| </> | ||
| ); | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| // FLogga.tsx | ||
| import Image from "next/image"; | ||
| import fLoggaSrc from "@/assets/f-logga.svg"; | ||
| import { cn } from "@/lib/utils"; // if you’re using a utility to combine class names | ||
|
|
||
| interface FLoggaProps { | ||
| className?: string; | ||
| } | ||
|
|
||
| export default function FLogga({ className = "" }: FLoggaProps) { | ||
| return ( | ||
| <div className={cn(className)}> | ||
| <Image src={fLoggaSrc} alt="" width={100} height={100} /> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,182 @@ | ||
| "use client"; | ||
|
|
||
| import * as React from "react"; | ||
| import Link from "next/link"; | ||
|
|
||
| import { cn } from "@/lib/utils"; | ||
| import { | ||
| NavigationMenu, | ||
| NavigationMenuContent, | ||
| NavigationMenuItem, | ||
| NavigationMenuLink, | ||
| NavigationMenuList, | ||
| NavigationMenuTrigger, | ||
| navigationMenuTriggerStyle, | ||
| } from "@/components/ui/navigation-menu"; | ||
|
|
||
| const components: { title: string; href: string; description: string }[] = [ | ||
| { | ||
| title: "Alert Dialog", | ||
| href: "/docs/primitives/alert-dialog", | ||
| description: | ||
| "A modal dialog that interrupts the user with important content and expects a response.", | ||
| }, | ||
| { | ||
| title: "Hover Card", | ||
| href: "/docs/primitives/hover-card", | ||
| description: | ||
| "For sighted users to preview content available behind a link.", | ||
| }, | ||
| { | ||
| title: "Progress", | ||
| href: "/docs/primitives/progress", | ||
| description: | ||
| "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.", | ||
| }, | ||
| { | ||
| title: "Scroll-area", | ||
| href: "/docs/primitives/scroll-area", | ||
| description: "Visually or semantically separates content.", | ||
| }, | ||
| { | ||
| title: "Tabs", | ||
| href: "/docs/primitives/tabs", | ||
| description: | ||
| "A set of layered sections of content—known as tab panels—that are displayed one at a time.", | ||
| }, | ||
| { | ||
| title: "Tooltip", | ||
| href: "/docs/primitives/tooltip", | ||
| description: | ||
| "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.", | ||
| }, | ||
| ]; | ||
|
|
||
| export function NavigationMenuDemo() { | ||
| function onNavChange() { | ||
| setTimeout(() => { | ||
| // Select elements with the state "open" | ||
| const triggers = document.querySelectorAll( | ||
| '.submenu-trigger[data-state="open"]', | ||
| ); | ||
| const dropdowns = document.querySelectorAll( | ||
| '.nav-viewport[data-state="open"]', | ||
| ); | ||
|
|
||
| if (!triggers.length || !dropdowns.length) return; | ||
|
|
||
| const padding = 16; | ||
| const { x, width } = (triggers[0] as HTMLElement).getBoundingClientRect(); | ||
| const menuWidth = dropdowns[0].children[0].clientWidth; | ||
| let menuLeftPosition = x + width / 2 - menuWidth / 2; | ||
| if (menuLeftPosition < padding) { | ||
| menuLeftPosition = padding; | ||
| } else if (menuLeftPosition + menuWidth > window.innerWidth - padding) { | ||
| menuLeftPosition = window.innerWidth - menuWidth - padding; | ||
| } | ||
|
|
||
| // Apply the calculated position | ||
| document.documentElement.style.setProperty( | ||
| "--menu-left-position", | ||
| `${menuLeftPosition}px`, | ||
| ); | ||
| }); | ||
| } | ||
|
|
||
| return ( | ||
| <div> | ||
| <NavigationMenu | ||
| onValueChange={onNavChange} | ||
| className="w-full max-w-full py-2" | ||
| > | ||
| <NavigationMenuList> | ||
| <NavigationMenuItem> | ||
| <NavigationMenuTrigger className="submenu-trigger"> | ||
| Getting started | ||
| </NavigationMenuTrigger> | ||
| <NavigationMenuContent> | ||
| <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]"> | ||
| <li className="row-span-3"> | ||
| <NavigationMenuLink asChild> | ||
| <a | ||
| className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md" | ||
| href="/" | ||
| > | ||
| <div className="mb-2 mt-4 text-lg font-medium"> | ||
| shadcn/ui | ||
| </div> | ||
| <p className="text-sm leading-tight text-muted-foreground"> | ||
| Beautifully designed components built with Radix UI and | ||
| Tailwind CSS. | ||
| </p> | ||
| </a> | ||
| </NavigationMenuLink> | ||
| </li> | ||
| <ListItem href="/docs" title="Introduction"> | ||
| Re-usable components built using Radix UI and Tailwind CSS. | ||
| </ListItem> | ||
| <ListItem href="/docs/installation" title="Installation"> | ||
| How to install dependencies and structure your app. | ||
| </ListItem> | ||
| <ListItem href="/docs/primitives/typography" title="Typography"> | ||
| Styles for headings, paragraphs, lists...etc | ||
| </ListItem> | ||
| </ul> | ||
| </NavigationMenuContent> | ||
| </NavigationMenuItem> | ||
| <NavigationMenuItem> | ||
| <NavigationMenuTrigger className="submenu-trigger"> | ||
| Components | ||
| </NavigationMenuTrigger> | ||
| <NavigationMenuContent> | ||
| <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] "> | ||
| {components.map((component) => ( | ||
| <ListItem | ||
| key={component.title} | ||
| title={component.title} | ||
| href={component.href} | ||
| > | ||
| {component.description} | ||
| </ListItem> | ||
| ))} | ||
| </ul> | ||
| </NavigationMenuContent> | ||
| </NavigationMenuItem> | ||
| <NavigationMenuItem> | ||
| <Link href="/docs" legacyBehavior passHref> | ||
| <NavigationMenuLink className={navigationMenuTriggerStyle()}> | ||
| Documentation | ||
| </NavigationMenuLink> | ||
| </Link> | ||
| </NavigationMenuItem> | ||
| </NavigationMenuList> | ||
| </NavigationMenu> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| const ListItem = React.forwardRef< | ||
| React.ElementRef<"a">, | ||
| React.ComponentPropsWithoutRef<"a"> | ||
| >(({ className, title, children, ...props }, ref) => { | ||
| return ( | ||
| <li> | ||
| <NavigationMenuLink asChild> | ||
| <a | ||
| ref={ref} | ||
| className={cn( | ||
| "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground", | ||
| className, | ||
| )} | ||
| {...props} | ||
| > | ||
| <div className="text-sm font-medium leading-none">{title}</div> | ||
| <p className="line-clamp-2 text-sm leading-snug text-muted-foreground"> | ||
| {children} | ||
| </p> | ||
| </a> | ||
| </NavigationMenuLink> | ||
| </li> | ||
| ); | ||
| }); | ||
| ListItem.displayName = "ListItem"; |
Oops, something went wrong.