responsive

This commit is contained in:
hamid zarghami
2026-07-21 15:16:47 +03:30
parent 14d1422970
commit 112aee1cdf
10 changed files with 46 additions and 44 deletions
@@ -10,18 +10,18 @@ type ProductOrderActionsProps = {
const ProductOrderActions = ({ selectedTier }: ProductOrderActionsProps) => {
return (
<div className="mt-5 flex w-full flex-col gap-3 self-end rounded-t-2xl bg-white px-4 py-4 shadow-[0px_-4px_34px_0px_#1A456C14] sm:flex-row sm:items-center sm:justify-between sm:gap-5 sm:px-5 sm:py-4">
<div className="fixed inset-x-0 bottom-0 z-40 flex w-full flex-col gap-3 rounded-t-2xl bg-white px-4 py-3 shadow-[0px_-4px_34px_0px_#1A456C14] sm:flex-row sm:items-center sm:justify-between sm:gap-4 sm:px-8 sm:py-4 lg:relative lg:inset-auto lg:mt-5 lg:gap-5 lg:rounded-t-2xl lg:px-5 lg:shadow-[0px_-4px_34px_0px_#1A456C14]">
<div className="space-y-1 text-right">
<p className="text-base font-bold text-[#0A1B2C] sm:text-lg">{formatPrice(selectedTier.totalPrice)}</p>
<div className="flex items-center justify-end gap-2">
<div className="flex flex-wrap items-center justify-end gap-2">
<span className="text-xs text-[#0A1B2C] sm:text-sm">{formatPrice(selectedTier.unitPrice)} به ازای هر عدد</span>
<span className="rounded-lg bg-[#00893E] px-2 py-0.5 text-[10px] font-medium text-white sm:text-xs">{PRODUCT_PROFIT_PERCENT}٪ سود</span>
</div>
</div>
<div className="hidden h-16 w-0 shrink-0 border-s-2 border-primary sm:block" />
<div className="hidden h-16 w-0 shrink-0 border-s-2 border-primary lg:block" />
<div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:gap-5">
<div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:gap-4 lg:gap-5">
<div className="w-full space-y-1 sm:w-32">
<span className="block text-right text-xs font-medium text-[#0A1B2C]">تعداد</span>
<Select options={[...STICKY_QUANTITY_OPTIONS]} defaultValue="1000" className="h-10 rounded-xl border-[#E9EEF2] text-sm" />