mirror/formbricks-formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-05-08 06:41:45 -05:00
Code Issues Packages Projects Releases 100 Wiki Activity

chore: onboarding cleanup (#4479)

Browse Source 
Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com>
This commit is contained in:
Dhruwang Jariwala
2024-12-18 13:36:45 +05:30
committed by GitHub
parent a0d02a843e
commit 5d1224e438
27 changed files with 193 additions and 563 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/modules/ui/components/option-card/index.tsx
+26 -23
View File
@@ -12,9 +12,9 @@ interface PathwayOptionProps {
}
const sizeClasses = {
sm: "rounded-lg max-w-xs min-w-40 border border-slate-200 shadow-card-sm transition-all duration-150",
md: "rounded-xl max-w-xs min-w-40 border border-slate-200 shadow-card-md transition-all duration-300",
lg: "rounded-2xl max-w-sm min-w-40 border border-slate-200 shadow-card-lg transition-all duration-500",
sm: "p-4 rounded-lg w-60 shadow-md",
md: "p-6 rounded-xl w-80 shadow-lg",
lg: "p-8 rounded-2xl w-100 shadow-xl",
};
export const OptionCard: React.FC<PathwayOptionProps> = ({
@@ -25,26 +25,29 @@ export const OptionCard: React.FC<PathwayOptionProps> = ({
onSelect,
loading,
cssId,
}) => (
<div className="relative h-full">
<div
id={cssId}
className={`flex h-full cursor-pointer flex-col items-center justify-center bg-white p-6 hover:scale-105 hover:border-slate-300 ${sizeClasses[size]}`}
onClick={onSelect}
role="button"
tabIndex={0}>
<div className="space-y-4">
{children}
<div className="space-y-2 text-center">
<p className="text-xl font-medium text-slate-800">{title}</p>
<p className="text-balance text-sm text-slate-500">{description}</p>
}) => {
return (
<div className="relative h-full w-full">
<div
id={cssId}
className={`flex cursor-pointer flex-col items-center justify-center border border-slate-200 bg-white transition-transform duration-200 hover:scale-[1.03] hover:border-slate-300 ${sizeClasses[size]}`}
onClick={onSelect}
role="button"
tabIndex={0}>
<div className="flex flex-col items-center space-y-4">
{children}
<div className="text-center">
<p className="text-lg font-medium text-slate-800">{title}</p>
<p className="text-sm text-slate-500">{description}</p>
</div>
</div>
</div>
{loading && (
<div className="absolute inset-0 flex items-center justify-center bg-slate-100/70">
<LoadingSpinner />
</div>
)}
</div>
{loading && (
<div className="absolute inset-0 flex h-full w-full items-center justify-center bg-slate-100 opacity-50">
<LoadingSpinner />
</div>
)}
</div>
);
);
};