Track HiveGrid Cloud planning reference
This commit is contained in:
david committed
1 parent
b3d5ea6764
commit
e341c5938a
5784 files changed
+1104929
-3
No files matched your search
@@ -0,0 +1,326 @@
|
||||
"use client";
|
||||
/*
|
||||
* Documentation:
|
||||
* Accordion — https://app.subframe.com/f023064a5ca0/library?component=Accordion_d2e81e20-863a-4027-826a-991d8910efd9
|
||||
* Avatar — https://app.subframe.com/f023064a5ca0/library?component=Avatar_bec25ae6-5010-4485-b46b-cf79e3943ab2
|
||||
* Dropdown Menu — https://app.subframe.com/f023064a5ca0/library?component=Dropdown+Menu_99951515-459b-4286-919e-a89e7549b43b
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import { FeatherCheck } from "@subframe/core";
|
||||
import { FeatherLayers } from "@subframe/core";
|
||||
import * as SubframeCore from "@subframe/core";
|
||||
import * as SubframeUtils from "../../utils";
|
||||
import { Accordion } from "../Accordion";
|
||||
import { Avatar } from "../Avatar";
|
||||
|
||||
export interface DropdownDividerProps
|
||||
extends React.HTMLAttributes<HTMLDivElement> {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const DropdownDivider = React.forwardRef<HTMLDivElement, DropdownDividerProps>(
|
||||
function DropdownDivider(
|
||||
{ className, ...otherProps }: DropdownDividerProps,
|
||||
ref
|
||||
) {
|
||||
return (
|
||||
<div
|
||||
className={SubframeUtils.twClassNames(
|
||||
"flex w-full items-start gap-2 px-1 py-1",
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...otherProps}
|
||||
>
|
||||
<div className="flex h-px grow shrink-0 basis-0 flex-col items-center gap-2 bg-border-default" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export interface DropdownItemProps
|
||||
extends React.ComponentProps<typeof SubframeCore.DropdownMenu.Item> {
|
||||
children?: React.ReactNode;
|
||||
icon?: React.ReactNode;
|
||||
iconRight?: React.ReactNode;
|
||||
image?: string;
|
||||
selected?: boolean;
|
||||
showCheckbox?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const DropdownItem = React.forwardRef<HTMLDivElement, DropdownItemProps>(
|
||||
function DropdownItem(
|
||||
{
|
||||
children,
|
||||
icon = null,
|
||||
iconRight = null,
|
||||
image,
|
||||
selected = false,
|
||||
showCheckbox = false,
|
||||
className,
|
||||
...otherProps
|
||||
}: DropdownItemProps,
|
||||
ref
|
||||
) {
|
||||
return (
|
||||
<SubframeCore.DropdownMenu.Item asChild={true} {...otherProps}>
|
||||
<div
|
||||
className={SubframeUtils.twClassNames(
|
||||
"group/adcae8d6 flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-2 group/dropdown-item hover:bg-surface-neutral-tertiary active:bg-surface-neutral-secondary",
|
||||
{
|
||||
"bg-surface-ui-subtle-blue-default hover:bg-surface-ui-subtle-blue-hover active:bg-surface-ui-subtle-blue-active":
|
||||
selected,
|
||||
},
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
>
|
||||
<div
|
||||
className={SubframeUtils.twClassNames(
|
||||
"hidden h-4 w-4 flex-none flex-col items-center justify-center rounded-sm border-2 border-solid border-border-strong bg-surface-neutral-secondary",
|
||||
{
|
||||
flex: showCheckbox,
|
||||
"border-2 border-solid border-brand-brand-border-solid-default bg-brand-brand-surface-solid-default":
|
||||
selected,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<FeatherCheck
|
||||
className={SubframeUtils.twClassNames(
|
||||
"hidden text-body-extra-small-semibold-150 font-body-extra-small-semibold-150 text-icon-neutral-on-solid",
|
||||
{ "inline-flex": selected }
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
{image ? (
|
||||
<img
|
||||
className="h-6 w-6 flex-none rounded-round object-cover"
|
||||
src={image}
|
||||
/>
|
||||
) : null}
|
||||
{icon ? (
|
||||
<SubframeCore.IconWrapper
|
||||
className={SubframeUtils.twClassNames(
|
||||
"text-body-small-regular-150 font-body-small-regular-150 text-icon-neutral-tertiary",
|
||||
{ "text-icon-neutral-primary": selected }
|
||||
)}
|
||||
>
|
||||
{icon}
|
||||
</SubframeCore.IconWrapper>
|
||||
) : null}
|
||||
{children ? (
|
||||
<span
|
||||
className={SubframeUtils.twClassNames(
|
||||
"line-clamp-1 grow shrink-0 basis-0 text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-tertiary",
|
||||
{ "text-text-neutral-primary": selected }
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
) : null}
|
||||
{iconRight ? (
|
||||
<SubframeCore.IconWrapper
|
||||
className={SubframeUtils.twClassNames(
|
||||
"text-body-small-regular-150 font-body-small-regular-150 text-icon-neutral-tertiary",
|
||||
{ "text-icon-neutral-primary": selected }
|
||||
)}
|
||||
>
|
||||
{iconRight}
|
||||
</SubframeCore.IconWrapper>
|
||||
) : null}
|
||||
</div>
|
||||
</SubframeCore.DropdownMenu.Item>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export interface DropdownUserItemProps
|
||||
extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
|
||||
title?: React.ReactNode;
|
||||
subtitle?: React.ReactNode;
|
||||
image?: string;
|
||||
selected?: boolean;
|
||||
showCheckbox?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const DropdownUserItem = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
DropdownUserItemProps
|
||||
>(function DropdownUserItem(
|
||||
{
|
||||
title,
|
||||
subtitle,
|
||||
image,
|
||||
selected = false,
|
||||
showCheckbox = false,
|
||||
className,
|
||||
...otherProps
|
||||
}: DropdownUserItemProps,
|
||||
ref
|
||||
) {
|
||||
return (
|
||||
<div
|
||||
className={SubframeUtils.twClassNames(
|
||||
"group/0d3c57ad flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-2 group/user-item hover:bg-surface-neutral-tertiary active:bg-surface-neutral-secondary",
|
||||
{
|
||||
"bg-surface-ui-subtle-blue-default hover:bg-surface-ui-subtle-blue-hover active:bg-surface-ui-subtle-blue-active":
|
||||
selected,
|
||||
},
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...otherProps}
|
||||
>
|
||||
<div
|
||||
className={SubframeUtils.twClassNames(
|
||||
"hidden h-4 w-4 flex-none flex-col items-center justify-center rounded-sm border-2 border-solid border-border-strong bg-surface-neutral-secondary",
|
||||
{
|
||||
flex: showCheckbox,
|
||||
"border-2 border-solid border-brand-brand-border-solid-default bg-brand-brand-surface-solid-default":
|
||||
selected,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<FeatherCheck
|
||||
className={SubframeUtils.twClassNames(
|
||||
"hidden text-body-extra-small-semibold-150 font-body-extra-small-semibold-150 text-icon-neutral-on-solid",
|
||||
{ "inline-flex": selected }
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<Avatar size="small" image={image}>
|
||||
OR
|
||||
</Avatar>
|
||||
<div className="flex grow shrink-0 basis-0 flex-col items-start">
|
||||
{title ? (
|
||||
<span className="line-clamp-1 w-full text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-primary">
|
||||
{title}
|
||||
</span>
|
||||
) : null}
|
||||
{subtitle ? (
|
||||
<span className="line-clamp-1 w-full text-body-extra-small-regular-150 font-body-extra-small-regular-150 text-text-neutral-tertiary">
|
||||
{subtitle}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export interface DropdownCustomItemProps
|
||||
extends React.HTMLAttributes<HTMLDivElement> {
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const DropdownCustomItem = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
DropdownCustomItemProps
|
||||
>(function DropdownCustomItem(
|
||||
{ children, className, ...otherProps }: DropdownCustomItemProps,
|
||||
ref
|
||||
) {
|
||||
return children ? (
|
||||
<div
|
||||
className={SubframeUtils.twClassNames(
|
||||
"flex w-full flex-col items-start gap-2 rounded-md px-3 py-2",
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...otherProps}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
) : null;
|
||||
});
|
||||
|
||||
export interface DropdownNestedItemProps
|
||||
extends React.ComponentProps<typeof Accordion> {
|
||||
children?: React.ReactNode;
|
||||
label?: React.ReactNode;
|
||||
icon?: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const DropdownNestedItem = React.forwardRef<
|
||||
React.ElementRef<typeof Accordion>,
|
||||
DropdownNestedItemProps
|
||||
>(function DropdownNestedItem(
|
||||
{
|
||||
children,
|
||||
label,
|
||||
icon = <FeatherLayers />,
|
||||
className,
|
||||
...otherProps
|
||||
}: DropdownNestedItemProps,
|
||||
ref
|
||||
) {
|
||||
return (
|
||||
<Accordion
|
||||
className={SubframeUtils.twClassNames(
|
||||
"group/ca3b20a3 cursor-pointer group/nested-item",
|
||||
className
|
||||
)}
|
||||
variant="ghost"
|
||||
trigger={
|
||||
<div className="flex h-8 w-full flex-none items-center gap-2 rounded-md px-3 group-hover/ca3b20a3:bg-surface-neutral-tertiary">
|
||||
{icon ? (
|
||||
<SubframeCore.IconWrapper className="text-body-small-regular-150 font-body-small-regular-150 text-icon-neutral-primary">
|
||||
{icon}
|
||||
</SubframeCore.IconWrapper>
|
||||
) : null}
|
||||
{label ? (
|
||||
<span className="line-clamp-1 grow shrink-0 basis-0 text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-primary">
|
||||
{label}
|
||||
</span>
|
||||
) : null}
|
||||
<Accordion.Chevron />
|
||||
</div>
|
||||
}
|
||||
ref={ref}
|
||||
{...otherProps}
|
||||
>
|
||||
{children ? (
|
||||
<div className="flex w-full flex-col items-start gap-1">{children}</div>
|
||||
) : null}
|
||||
</Accordion>
|
||||
);
|
||||
});
|
||||
|
||||
export interface DropdownMenuRootProps
|
||||
extends React.HTMLAttributes<HTMLDivElement> {
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const DropdownMenuRoot = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
DropdownMenuRootProps
|
||||
>(function DropdownMenuRoot(
|
||||
{ children, className, ...otherProps }: DropdownMenuRootProps,
|
||||
ref
|
||||
) {
|
||||
return children ? (
|
||||
<div
|
||||
className={SubframeUtils.twClassNames(
|
||||
"flex min-w-[192px] flex-col items-start rounded-md border border-solid border-border-default bg-surface-neutral-secondary px-1 py-1 shadow-lg",
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...otherProps}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
) : null;
|
||||
});
|
||||
|
||||
export const DropdownMenu = Object.assign(DropdownMenuRoot, {
|
||||
DropdownDivider,
|
||||
DropdownItem,
|
||||
DropdownUserItem,
|
||||
DropdownCustomItem,
|
||||
DropdownNestedItem,
|
||||
});
|
||||
@@ -0,0 +1,10 @@
|
||||
"use client";
|
||||
import { DropdownMenu as DropdownMenuComponent } from "./DropdownMenu";
|
||||
|
||||
/**
|
||||
* Add wrapper components and business logic here.
|
||||
* If you modify this file, disable Subframe sync for it to prevent overwrites.
|
||||
* Learn more: https://docs.subframe.com/concepts/syncing-components#wrapping-components
|
||||
*/
|
||||
|
||||
export const DropdownMenu = DropdownMenuComponent;
|
||||
Reference in new issue
Block a user