feat: Introduce alwaysShow prop for MobileBackButton to control visibility and apply minor UI refinements to specialization cards and chat header.

This commit is contained in:
pradeepkumar
2026-03-27 06:47:53 +05:30
parent d598637380
commit 317f7e7402
6 changed files with 9 additions and 8 deletions

View File

@@ -5,9 +5,10 @@ import { useRouter } from 'next/navigation';
interface MobileBackButtonProps {
label?: string;
fallbackHref?: string;
alwaysShow?: boolean;
}
export function MobileBackButton({ label, fallbackHref }: MobileBackButtonProps) {
export function MobileBackButton({ label, fallbackHref, alwaysShow = false }: MobileBackButtonProps) {
const router = useRouter();
const handleBack = () => {
@@ -23,7 +24,7 @@ export function MobileBackButton({ label, fallbackHref }: MobileBackButtonProps)
return (
<button
onClick={handleBack}
className="lg:hidden flex items-center gap-2 mb-4 hover:opacity-70 transition-opacity cursor-pointer"
className={`${alwaysShow ? 'flex' : 'lg:hidden flex'} items-center gap-2 mb-4 hover:opacity-70 transition-opacity cursor-pointer`}
>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
<path d="M19 12H5M5 12L12 19M5 12L12 5" stroke="#00293D" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>

View File

@@ -29,7 +29,7 @@ export function SpecializationCard({
};
return (
<div className="bg-white rounded-[20px] p-6 text-center flex flex-col border-[0.7px] border-[#E58625] h-full">
<div className="bg-white rounded-[20px] p-6 text-center flex flex-col border-[0.7px] border-[#E58625]">
<div className="flex justify-center mb-3">{icon}</div>
<h4 className="font-bold text-[#00293D] text-[14px] leading-[17px] mb-4 font-fractul">{title}</h4>
<div className="flex-1">

View File

@@ -29,7 +29,7 @@ export function SpecializationSection({ fieldsData }: SpecializationSectionProps
{/* Top row - up to 3 cards */}
{topRowFields.length > 0 && (
<div className={`flex flex-col lg:grid lg:items-stretch gap-6 mb-6 ${
<div className={`flex flex-col lg:grid lg:items-start gap-6 mb-6 ${
topRowFields.length === 1 ? 'lg:grid-cols-1 lg:max-w-md lg:mx-auto' :
topRowFields.length === 2 ? 'lg:grid-cols-2 lg:max-w-2xl lg:mx-auto' :
'lg:grid-cols-3'
@@ -54,7 +54,7 @@ export function SpecializationSection({ fieldsData }: SpecializationSectionProps
{/* Bottom row - remaining cards */}
{bottomRowFields.length > 0 && (
<div className={`flex flex-col lg:grid lg:items-stretch gap-6 ${
<div className={`flex flex-col lg:grid lg:items-start gap-6 ${
bottomRowFields.length === 1 ? 'lg:grid-cols-1 lg:max-w-md lg:mx-auto' :
bottomRowFields.length === 2 ? 'lg:grid-cols-2 lg:max-w-2xl lg:mx-auto' :
'lg:grid-cols-3'