React native card pages

How the CKash Wallet Interface Adapts to Mobile Devices

The CKash Wallet web application is built with a mobile-first approach, ensuring a seamless experience across all device sizes. Here's a detailed explanation of how the interface adapts to mobile devices:

Responsive Layout System

Breakpoint Strategy

The application uses Tailwind CSS's responsive breakpoints to adapt the layout:

// Tailwind breakpoints used in the application
// sm: 640px and up
// md: 768px and up
// lg: 1024px and up
// xl: 1280px and up
// 2xl: 1400px and up

For example, in the main layout component, we use these breakpoints to control visibility:

{/* Desktop Sidebar */}
<Sidebar className="hidden md:flex" />

This code hides the sidebar by default (hidden) but displays it as a flex container on medium screens and up (md:flex).

Navigation Transformation

Desktop vs. Mobile Navigation

One of the most significant adaptations is the navigation system:

Desktop View: Full sidebar navigation with all options visible
- Positioned on the left side of the screen
- Always visible on screens 768px and wider
- Contains all navigation options with labels and icons
Mobile View: Bottom tab bar with essential navigation
- Fixed to the bottom of the screen
- Contains only the most important navigation items
- Uses icons with small labels to save space

{/* Mobile Navigation Bar */}
<div className="fixed bottom-0 left-0 right-0 bg-background border-t z-50 md:hidden">
  <div className="flex justify-between items-center">
    {routes.map((route) => (
      <Link
        key={route.href}
        href={route.href}
        className="flex flex-1 flex-col items-center gap-1 p-3 text-xs"
      >
        <route.icon className="h-5 w-5" />
        {route.label}
      </Link>
    ))}
  </div>
</div>

This component is only visible on mobile (md:hidden) and provides a touch-friendly navigation bar at the bottom of the screen.

Content Adaptation

Card and Grid Layouts

Content layouts adjust based on screen size:

Quick Actions Section:
- Desktop: 4 cards in a row
- Mobile: 2 cards in a row

<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
  <QuickActionCard title="Send Money" icon={<Send className="h-5 w-5" />} href="/send-money" />
  {/* Other quick action cards */}
</div>

The grid starts with 2 columns (grid-cols-2) on mobile and expands to 4 columns (md:grid-cols-4) on medium screens and up.

Spacing and Typography

Spacing and font sizes also adapt:

<h1 className="text-xl md:text-2xl font-bold mb-4 md:mb-6">Dashboard</h1>

This heading uses a smaller font size (text-xl) and margin (mb-4) on mobile, increasing to larger values (text-2xl, mb-6) on medium screens.

Touch-Optimized Components

Form Elements

Form inputs and buttons are sized appropriately for touch interaction:

<Button className="w-full py-3 md:py-2">Continue</Button>

This button has more vertical padding on mobile (py-3) for easier touch targets, reducing to a more compact size (py-2) on desktop.

Interactive Elements

Interactive elements have appropriate spacing for touch:

<div className="flex flex-wrap gap-3 md:gap-2">
  {/* Currency selection badges */}
  <Badge className="px-4 py-2 md:py-1">BTC</Badge>
</div>

The badges have more padding on mobile for easier touch targets.

Header Adaptation

The header component also transforms between mobile and desktop:

{/* Mobile header */}
<div className="flex items-center gap-4 md:hidden">
  <Button variant="ghost" size="icon" className="md:hidden">
    <Menu className="h-5 w-5" />
  </Button>
  <Link href="/" className="flex items-center gap-2">
    <div className="w-8 h-8 rounded-full bg-primary flex items-center justify-center">
      <span className="text-primary-foreground font-bold">C</span>
    </div>
    <span className="font-bold text-lg hidden sm:inline-block">CKash</span>
  </Link>
</div>

{/* Desktop header */}
<div className="hidden md:block">
  <h1 className="text-xl font-bold">{title || "Dashboard"}</h1>
</div>

On mobile, the header shows a menu button and logo, while on desktop it displays the page title.

Performance Optimizations for Mobile

Reduced Animations

The application uses simpler animations on mobile to improve performance:

<div className={cn(
  "transition-all",
  isMobileNavOpen ? "duration-300" : "duration-200"
)}>
  {/* Content */}
</div>

Conditional Rendering

Some complex components are conditionally rendered based on screen size:

{/* Only show search on desktop */}
<div className="hidden md:flex items-center gap-3 flex-1 max-w-md mx-4">
  <div className="relative w-full">
    <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
    <Input type="search" placeholder="Search..." className="w-full pl-9 bg-muted/30" />
  </div>
</div>

Specific Component Examples

Transaction Items

Transaction items in the activity list adapt their layout:

<div className="flex items-center justify-between p-4">
  <div className="flex items-center">
    {/* Transaction icon */}
    <div className="w-10 h-10 rounded-full flex items-center justify-center mr-3">
      {/* Icon */}
    </div>
    <div>
      <p className="font-medium">{name}</p>
      {/* On mobile: stack date and status */}
      <div className="flex flex-col sm:flex-row sm:items-center text-sm text-muted-foreground">
        <span>{date}</span>
        <span className="hidden sm:inline mx-1">•</span>
        <span>{time}</span>
      </div>
    </div>
  </div>
  {/* Transaction amount */}
</div>

On mobile, the date and time stack vertically, while on larger screens they display horizontally with a separator.

Login and Registration Forms

The authentication forms are centered and have appropriate width constraints:

<div className="min-h-screen flex items-center justify-center p-4 bg-muted/30">
  <div className="w-full max-w-md">
    {/* Form content */}
  </div>
</div>

This ensures the forms are usable on mobile devices while not stretching too wide on desktop.

Testing and Validation

The responsive design is tested across multiple breakpoints:

Small mobile (320px - 375px)
Large mobile (376px - 639px)
Tablet (640px - 1023px)
Desktop (1024px and up)

This ensures the interface remains functional and visually appealing across all device sizes.

By implementing these responsive design techniques, the CKash Wallet provides a consistent and optimized experience whether users access it from a desktop computer, tablet, or smartphone.