Skip to main content

Component Inventory

Drop Frontend — Component Inventory

Auto-generated from source code analysis. All file paths relative to src/drop-app/src/.

Custom Components

BottomNav

  • File: components/bottom-nav.tsx
  • Props: None
  • Description: Fixed bottom navigation bar with 5 tabs. Uses usePathname() for active state detection. Active tab: text-[#0B6E35], inactive: text-[#9CA3AF].
  • Navigation Items:
    Label Route Icon
    Hjem /dashboard Home (lucide)
    Aktivitet /history Clock (lucide)
    Skann /scan IconQrScan (custom)
    Kontoer /accounts Landmark (lucide)
    Profil /profile User (lucide)
  • Used in: dashboard, accounts, history, profile, scan pages
  • File: components/drop-logo.tsx:5
  • Props: { size?: number; className?: string } (LogoProps)
  • Description: Forward D SVG mark — letter "d" with stem sweeping into gold arrow. Default size 40. Colors: #0B6E35 (green body), #D4A017 (gold arrow).

DropWordmark

  • File: components/drop-logo.tsx:30
  • Props: { size?: number; className?: string } (LogoProps)
  • Description: Text "drop" rendered in Fraunces font, bold, color #1A1A1A. Default size 24 (font-size).

DropLogoFull

  • File: components/drop-logo.tsx:44
  • Props: { size?: number; className?: string } (LogoProps)
  • Description: Combines DropLogo mark + DropWordmark side by side. Default size 40. Used on marketing/landing pages.

DropAppIcon

  • File: components/drop-logo.tsx:57
  • Props: { size?: number; className?: string } (LogoProps)
  • Description: App icon — rounded green square with dollar sign and circular arrows. Default size 64. Used as favicon/app launcher icon.

CookieConsent

  • File: components/cookie-consent.tsx
  • Props: None
  • Description: GDPR cookie consent banner and modal. Manages localStorage consent preferences (necessary, analytics, marketing). Shows banner on first visit. "Tilpass" button opens modal for granular control. Saves consent to /api/consents endpoint.
  • State: visible, showModal, preferences (CookiePreferences)
  • Components used: X (lucide), Dialog components
  • Used in: Root layout

PrePaymentDisclosure

  • File: components/pre-payment-disclosure.tsx
  • Props: { amount, fee, exchangeRate, receiveAmount, receiveCurrency, estimatedDelivery, onConfirm, onCancel }
  • Description: PSD2-compliant pre-payment disclosure modal for remittance. Shows full breakdown: amount, fee (with %), exchange rate, recipient gets, total cost, estimated delivery. Explicit confirm/cancel buttons. Norwegian language.
  • Components used: Info (lucide)
  • Used in: /send page (remittance flow)

PWARegister

  • File: components/pwa-register.tsx
  • Props: None
  • Description: Service Worker registration component. Registers /sw.js on mount. Silent registration (console logs only). Returns null (no UI).
  • Used in: Root layout

Custom Icons (drop-icons.tsx)

File: components/drop-icons.tsx Shared Props Interface: IconProps { size?: number; className?: string } Style: Outlined, 2px stroke, round linecap/linejoin, currentColor fill for theming.

Export Description Default Size Notes
IconSendMoney Arrow going up-right from horizontal line 24
IconQrScan QR code frame with scan corners 24
IconVirtualCard Credit card outline 24
IconShield Shield with checkmark 24
IconFastTransfer Lightning bolt 24
IconCorridors Globe with meridians 24
IconWallet Wallet outline 24 Unused — no wallet in pass-through model
IconHistory Clock with arrow 24
IconTopUp Plus inside circle 24 Unused — no top-up in pass-through model

shadcn/ui Components

Directory: components/ui/

All are standard shadcn/ui primitives built on Radix UI. Styled via Tailwind + CSS variables defined in globals.css.

Component File Radix Primitive
Alert ui/alert.tsx — (div-based)
Avatar ui/avatar.tsx @radix-ui/react-avatar
Badge ui/badge.tsx — (span-based, cva variants)
Button ui/button.tsx @radix-ui/react-slot
Card ui/card.tsx — (div-based)
Dialog ui/dialog.tsx @radix-ui/react-dialog
Input ui/input.tsx — (input element)
ScrollArea ui/scroll-area.tsx @radix-ui/react-scroll-area
Select ui/select.tsx @radix-ui/react-select
Separator ui/separator.tsx @radix-ui/react-separator
Sheet ui/sheet.tsx @radix-ui/react-dialog (side panel)
Skeleton ui/skeleton.tsx — (div with pulse animation)
Sonner ui/sonner.tsx sonner (toast library)
Tabs ui/tabs.tsx @radix-ui/react-tabs

External Dependencies (UI-related)

Package Usage
lucide-react Icon library (Mail, Lock, Eye, EyeOff, ArrowRight, Home, Clock, User, Landmark, Bell, LogOut, ChevronRight, Shield, Settings, HelpCircle, CreditCard, Plus, X, Check, ArrowLeft, ChevronDown, Copy, RefreshCw, Smartphone, Globe, Zap, Store, QrCode, TrendingUp, DollarSign, BarChart3, Download, Camera)
next/image Image optimization
next/link Client-side navigation
next/navigation useRouter, usePathname
class-variance-authority Component variant system (cva)
clsx + tailwind-merge Class name merging via cn() utility
Back to top