83fdebf64d
- Add jscodeshift-based codemod to convert arrow function components to function declarations - Support React.FC, observer-wrapped, and forwardRef components - Include comprehensive test suite covering edge cases - Add npm script to run transformer across codebase - Target only .tsx files in source directories, excluding node_modules and declaration files * [WEB-5459] chore: updates after running codemod --------- Co-authored-by: sriramveeraghanta <veeraghanta.sriram@gmail.com>
57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
import * as React from "react";
|
|
import { cn } from "../utils";
|
|
import { OAuthButton } from "./oauth-button";
|
|
|
|
export type TOAuthOption = {
|
|
id: string;
|
|
text: string;
|
|
icon: React.ReactNode;
|
|
onClick: () => void;
|
|
enabled?: boolean;
|
|
};
|
|
|
|
type OAuthOptionsProps = {
|
|
options: TOAuthOption[];
|
|
compact?: boolean;
|
|
|
|
className?: string;
|
|
containerClassName?: string;
|
|
};
|
|
|
|
export function OAuthOptions(props: OAuthOptionsProps) {
|
|
const { options, compact = false, className = "", containerClassName = "" } = props;
|
|
|
|
// Filter enabled options
|
|
const enabledOptions = options.filter((option) => option.enabled !== false);
|
|
|
|
if (enabledOptions.length === 0) return null;
|
|
|
|
return (
|
|
<div className={cn("w-full", containerClassName)}>
|
|
<div
|
|
className={cn(
|
|
"flex gap-4 overflow-hidden transition-all duration-500 ease-in-out",
|
|
compact ? "flex-row" : "flex-col",
|
|
className
|
|
)}
|
|
>
|
|
{enabledOptions.map((option) => (
|
|
<OAuthButton
|
|
key={option.id}
|
|
text={option.text}
|
|
icon={option.icon}
|
|
onClick={option.onClick}
|
|
compact={compact}
|
|
className="transition-all duration-300 ease-in-out"
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-4 flex items-center transition-all duration-300">
|
|
<hr className="w-full border-custom-border-300 transition-colors duration-300" />
|
|
<p className="mx-3 flex-shrink-0 text-center text-sm text-custom-text-400 transition-colors duration-300">or</p>
|
|
<hr className="w-full border-custom-border-300 transition-colors duration-300" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|