https://github.com/programming-communities/nav-bar-nextjs

https://github.com/programming-communities/nav-bar-nextjs

Last synced: 11 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/programming-communities/nav-bar-nextjs
• Owner: Programming-Communities
• Created: 2024-11-18T01:55:13.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-11-18T01:58:25.000Z (about 1 year ago)
• Last Synced: 2025-01-05T20:13:35.933Z (about 1 year ago)
• Language: TypeScript
• Size: 528 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
## Nav Bar

![alt text]()

![alt text]()

![alt text]()

```import { HtmlHTMLAttributes } from "react";

import { cva } from "class-variance-authority";

const classes = cva('border h-12 rounded-full px-6 font-medium', {

  variants: {

    variant: {

      primary: 'bg-lime-400 text-neutral-950 border-lime-400',

      secondary: 'border-white text-white bg-transparent',

    },

  },

});

export default function Button(

  props: { 

    variant: "primary" | "secondary";

  } & HtmlHTMLAttributes

) {

  const { variant, className, ...otherProps } = props;

  return (

    

  );

}

```

```import Image from "next/image";

import logoImage from "@/assets/images/logo.svg";

import Button from "@/components/Button";

const navLinks = [

    { label: "Home", href: "#" },

    { label: "Features", href: "#features" },

    { label: "Integrations", href: "#integrations" },

    { label: "FAQs", href: "#faqs" },

];

export default function Navbar() {

    return (

        

            


                


                    


                        

                    

                    


                        

                            {navLinks.map((link) => (

                                

                                    {link.label}

                                

                            ))}

                        

                    

                    


                        

                            

                            

                            

                        

                        Log In

                        Sign Up

                        

                    

                

            

        

    );

}

````