mirror of
https://github.com/yangshun/tech-interview-handbook.git
synced 2025-07-28 12:43:12 +08:00
[ui] standardize naming
This commit is contained in:
@ -8,8 +8,8 @@ const DropdownMenuAlignments: ReadonlyArray<DropdownMenuAlignment> = [
|
||||
'end',
|
||||
];
|
||||
const DropdownMenuSizes: ReadonlyArray<DropdownMenuSize> = [
|
||||
'default',
|
||||
'inherit',
|
||||
'regular',
|
||||
];
|
||||
|
||||
export default {
|
||||
@ -80,7 +80,7 @@ export function Basic({
|
||||
Basic.args = {
|
||||
align: 'start',
|
||||
label: 'More actions',
|
||||
size: 'regular',
|
||||
size: 'default',
|
||||
};
|
||||
|
||||
export function Align() {
|
||||
@ -103,7 +103,7 @@ export function Align() {
|
||||
|
||||
return (
|
||||
<div className="flex justify-between">
|
||||
<DropdownMenu align="start" label="Select an action" size="regular">
|
||||
<DropdownMenu align="start" label="Select an action" size="default">
|
||||
{menuItems.map(({ label, value }) => (
|
||||
<DropdownMenu.Item
|
||||
key={value}
|
||||
@ -115,7 +115,7 @@ export function Align() {
|
||||
/>
|
||||
))}
|
||||
</DropdownMenu>
|
||||
<DropdownMenu align="end" label="Select an action" size="regular">
|
||||
<DropdownMenu align="end" label="Select an action" size="default">
|
||||
{menuItems.map(({ label, value }) => (
|
||||
<DropdownMenu.Item
|
||||
key={value}
|
||||
|
@ -18,7 +18,7 @@ export default function Banner({ children, size = 'md', onHide }: Props) {
|
||||
size === 'sm' && 'text-sm',
|
||||
size === 'xs' && 'text-xs',
|
||||
)}>
|
||||
<div className="mx-auto max-w-7xl py-3 px-3 sm:px-6 lg:px-8">
|
||||
<div className="mx-auto max-w-7xl py-2 px-3 sm:px-6 lg:px-8">
|
||||
<div className="pr-16 sm:px-16 sm:text-center">
|
||||
<p className="font-medium text-white">{children}</p>
|
||||
</div>
|
||||
|
@ -6,7 +6,7 @@ import { ChevronDownIcon } from '@heroicons/react/24/solid';
|
||||
import DropdownMenuItem from './DropdownMenuItem';
|
||||
|
||||
export type DropdownMenuAlignment = 'end' | 'start';
|
||||
export type DropdownMenuSize = 'inherit' | 'regular';
|
||||
export type DropdownMenuSize = 'default' | 'inherit';
|
||||
|
||||
type Props = Readonly<{
|
||||
align?: DropdownMenuAlignment;
|
||||
@ -26,15 +26,15 @@ export default function DropdownMenu({
|
||||
align = 'start',
|
||||
children,
|
||||
label,
|
||||
size = 'regular',
|
||||
size = 'default',
|
||||
}: Props) {
|
||||
return (
|
||||
<Menu as="div" className="relative inline-block">
|
||||
<div className="flex">
|
||||
<Menu.Button
|
||||
className={clsx(
|
||||
'group inline-flex justify-center font-medium text-slate-700 hover:text-slate-900',
|
||||
size === 'regular' && 'text-sm',
|
||||
'group inline-flex items-center justify-center font-medium text-slate-700 hover:text-slate-900',
|
||||
size === 'default' && 'text-sm',
|
||||
)}>
|
||||
<div>{label}</div>
|
||||
<ChevronDownIcon
|
||||
|
Reference in New Issue
Block a user