Skip to content

Commit

Permalink
feat: add support button (#4)
Browse files Browse the repository at this point in the history
feat: add support button
  • Loading branch information
Clement-Muth committed Feb 28, 2024
1 parent 1b47c8d commit 7ad4b1c
Show file tree
Hide file tree
Showing 5 changed files with 227 additions and 147 deletions.
183 changes: 37 additions & 146 deletions src/app/views/Header/HeaderContent.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
"use client";

import { Button } from "@nextui-org/button";
import { Dropdown, DropdownItem, DropdownMenu, DropdownTrigger } from "@nextui-org/dropdown";
import { Link } from "@nextui-org/link";
import { Navbar, NavbarBrand, NavbarContent, NavbarItem } from "@nextui-org/navbar";
import HeaderMenu from "~/app/views/Header/HeaderMenu";
import DeleteClient from "~/core/DeleteClient";
import NextLink from "next/link";

export interface HeaderContentProps {
clientId?: string;
Expand All @@ -32,157 +31,49 @@ const HeaderContent = ({ clientId }: HeaderContentProps) => {
}}
>
<NavbarBrand>
<Link href="/" className="font-bold text-inherit">
Nextjs Stripe Example
<Link href="/" className="text-2xl text-inherit">
Nextjs Stripe
</Link>
</NavbarBrand>
<NavbarContent className="hidden sm:flex gap-4" justify="center">
<Dropdown>
<NavbarItem>
<DropdownTrigger>
<Button
disableRipple
className="p-0 bg-transparent data-[hover=true]:bg-transparent"
// endContent={icons.chevron}
radius="sm"
variant="light"
>
Payment methods
</Button>
</DropdownTrigger>
</NavbarItem>
<DropdownMenu
aria-label="Payment methods"
className="w-[340px]"
itemClasses={{
base: "gap-4"
}}
>
<DropdownItem
key="add payment method"
description="Create a new payment method."
href="/add-payment-methods"
as={NextLink}
>
Add Payment Method
</DropdownItem>
<DropdownItem
key="list_payment_methods"
description="List payment methods attached to a customer."
href="/get-payment-methods"
as={NextLink}
>
List Payment Methods
</DropdownItem>
<DropdownItem
key="delete_payment_methods"
description="Delete a payment method."
href="/delete-payment-methods"
// startContent={icons.flash}
>
Delete Payment Methods
</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown>
<NavbarItem>
<DropdownTrigger>
<Button
disableRipple
className="p-0 bg-transparent data-[hover=true]:bg-transparent"
// endContent={icons.chevron}
radius="sm"
variant="light"
>
Customer
</Button>
</DropdownTrigger>
</NavbarItem>
<DropdownMenu
aria-label="Payment methods"
className="w-[340px]"
itemClasses={{
base: "gap-4"
}}
>
<DropdownItem
key="add payment method"
description="Create a new payment method."
href="/add-payment-methods"
as={NextLink}
>
Add Payment Method
</DropdownItem>
<DropdownItem
key="list_payment_methods"
description="List payment methods attached to a customer."
href="/get-payment-methods"
as={NextLink}
>
List Payment Methods
</DropdownItem>
<DropdownItem
key="delete_payment_methods"
description="Delete a payment method."
href="/delete-payment-methods"
// startContent={icons.flash}
>
Delete Payment Methods
</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown>
<NavbarItem>
<DropdownTrigger>
<Button
disableRipple
className="p-0 bg-transparent data-[hover=true]:bg-transparent"
// endContent={icons.chevron}
radius="sm"
variant="light"
>
Invoices
</Button>
</DropdownTrigger>
</NavbarItem>
<DropdownMenu
aria-label="Payment methods"
className="w-[340px]"
itemClasses={{
base: "gap-4"
}}
>
<DropdownItem
key="add payment method"
description="Create a new payment method."
href="/add-payment-methods"
as={NextLink}
>
Add Payment Method
</DropdownItem>
<DropdownItem
key="list_payment_methods"
description="List payment methods attached to a customer."
href="/get-payment-methods"
as={NextLink}
>
List Payment Methods
</DropdownItem>
<DropdownItem
key="delete_payment_methods"
description="Delete a payment method."
href="/delete-payment-methods"
// startContent={icons.flash}
>
Delete Payment Methods
</DropdownItem>
</DropdownMenu>
</Dropdown>
<NavbarContent className="hidden sm:flex gap-4" justify="start">
<HeaderMenu />
</NavbarContent>
<NavbarContent justify="end">
<NavbarItem>
<DeleteClient clientId={clientId} />
</NavbarItem>
<NavbarItem>
<Button
color="default"
variant="solid"
href="https://www.buymeacoffee.com/clementmuth"
target="_blank"
size="md"
as={Link}
startContent={
<svg
aria-hidden="true"
focusable="false"
height="24"
role="presentation"
viewBox="0 0 24 24"
width="24"
className="text-danger group-data-[hover=true]:animate-heartbeat"
tabIndex={-1}
>
<path
d="M12.62 20.81c-.34.12-.9.12-1.24 0C8.48 19.82 2 15.69 2 8.69 2 5.6 4.49 3.1 7.56 3.1c1.82 0 3.43.88 4.44 2.24a5.53 5.53 0 0 1 4.44-2.24C19.51 3.1 22 5.6 22 8.69c0 7-6.48 11.13-9.38 12.12Z"
fill="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
/>
</svg>
}
>
Support
</Button>
</NavbarItem>
</NavbarContent>
</Navbar>
);
Expand Down
153 changes: 153 additions & 0 deletions src/app/views/Header/HeaderMenu.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, NavbarItem } from "@nextui-org/react";
import NextLink from "next/link";
import ChevronDown from "~/components/Icons/chevronDown";

const HeaderMenu = () => {
return (
<NavbarItem>
<Dropdown>
<NavbarItem>
<DropdownTrigger>
<Button
disableRipple
className="p-0 bg-transparent data-[hover=true]:bg-transparent"
endContent={<ChevronDown fill="currentColor" size={16} />}
radius="sm"
variant="light"
>
Payment methods
</Button>
</DropdownTrigger>
</NavbarItem>
<DropdownMenu
aria-label="Payment methods"
className="w-[340px]"
itemClasses={{
base: "gap-4"
}}
>
<DropdownItem
key="add payment method"
description="Create a new payment method."
href="/add-payment-methods"
as={NextLink}
>
Add Payment Method
</DropdownItem>
<DropdownItem
key="list_payment_methods"
description="List payment methods attached to a customer."
href="/get-payment-methods"
as={NextLink}
>
List Payment Methods
</DropdownItem>
<DropdownItem
key="delete_payment_methods"
description="Delete a payment method."
href="/delete-payment-methods"
// startContent={icons.flash}
>
Delete Payment Methods
</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown>
<NavbarItem>
<DropdownTrigger>
<Button
disableRipple
className="p-0 bg-transparent data-[hover=true]:bg-transparent"
// endContent={icons.chevron}
radius="sm"
variant="light"
>
Customer
</Button>
</DropdownTrigger>
</NavbarItem>
<DropdownMenu
aria-label="Payment methods"
className="w-[340px]"
itemClasses={{
base: "gap-4"
}}
>
<DropdownItem
key="add payment method"
description="Create a new payment method."
href="/add-payment-methods"
as={NextLink}
>
Add Payment Method
</DropdownItem>
<DropdownItem
key="list_payment_methods"
description="List payment methods attached to a customer."
href="/get-payment-methods"
as={NextLink}
>
List Payment Methods
</DropdownItem>
<DropdownItem
key="delete_payment_methods"
description="Delete a payment method."
href="/delete-payment-methods"
// startContent={icons.flash}
>
Delete Payment Methods
</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown>
<NavbarItem>
<DropdownTrigger>
<Button
disableRipple
className="p-0 bg-transparent data-[hover=true]:bg-transparent"
// endContent={icons.chevron}
radius="sm"
variant="light"
>
Invoices
</Button>
</DropdownTrigger>
</NavbarItem>
<DropdownMenu
aria-label="Payment methods"
className="w-[340px]"
itemClasses={{
base: "gap-4"
}}
>
<DropdownItem
key="add payment method"
description="Create a new payment method."
href="/add-payment-methods"
as={NextLink}
>
Add Payment Method
</DropdownItem>
<DropdownItem
key="list_payment_methods"
description="List payment methods attached to a customer."
href="/get-payment-methods"
as={NextLink}
>
List Payment Methods
</DropdownItem>
<DropdownItem
key="delete_payment_methods"
description="Delete a payment method."
href="/delete-payment-methods"
// startContent={icons.flash}
>
Delete Payment Methods
</DropdownItem>
</DropdownMenu>
</Dropdown>
</NavbarItem>
);
};

export default HeaderMenu;
26 changes: 26 additions & 0 deletions src/components/Icons/chevronDown.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import type IconSvgBase from "~/types/svg";

const ChevronDown = ({ fill, size, height, width, ...props }: IconSvgBase) => {
return (
<svg
fill="none"
height={size || height || 24}
width={size || width || 24}
{...props}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<title>Chevron Down</title>
<path
d="m19.92 8.95-6.52 6.52c-.77.77-2.03.77-2.8 0L4.08 8.95"
stroke={fill}
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit={10}
strokeWidth={1.5}
/>
</svg>
);
};

export default ChevronDown;
2 changes: 1 addition & 1 deletion src/core/DeleteClient.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const DeleteClient = ({ clientId }: DeleteClientProps) => {
return (
<Button
color={!clientId ? "default" : "primary"}
size="sm"
size="md"
disabled={!clientId}
isDisabled={!clientId}
onClick={() => {
Expand Down
Loading

0 comments on commit 7ad4b1c

Please sign in to comment.