gistfile1.txt

'use client'

import { useState } from 'react'
import { ChevronDown, ArrowLeftRight } from 'lucide-react'
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

const tokens = [
  { symbol: 'ETH', name: 'Ethereum', icon: '🔷' },
  { symbol: 'BTC', name: 'Bitcoin', icon: '🟠' },
  { symbol: 'USDT', name: 'Tether', icon: '💵' },
  { symbol: 'XRP', name: 'Ripple', icon: '💧' },
]

export default function TokenSwap() {
  const [fromToken, setFromToken] = useState(tokens[0])
  const [toToken, setToToken] = useState(tokens[1])
  const [amount, setAmount] = useState('')
  const [exchangeRate, setExchangeRate] = useState(1.5) // Placeholder exchange rate

  const handleSwap = () => {
    setFromToken(toToken)
    setToToken(fromToken)
  }

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // Here you would typically call an API to perform the actual swap
    console.log(`Swapping ${amount} ${fromToken.symbol} to ${toToken.symbol}`)
  }

  return (
    <div className="w-full max-w-md mx-auto p-6 bg-white rounded-xl shadow-md">
      <h2 className="text-2xl font-bold mb-6 text-center">Token Swap</h2>
      <form onSubmit={handleSubmit}>
        <div className="space-y-4">
          <div className="flex items-center space-x-4">
            <Select
              value={fromToken.symbol}
              onValueChange={(value) => setFromToken(tokens.find(t => t.symbol === value) || tokens[0])}
            >
              <SelectTrigger className="w-[180px]">
                <SelectValue placeholder="From" />
              </SelectTrigger>
              <SelectContent>
                {tokens.map((token) => (
                  <SelectItem key={token.symbol} value={token.symbol}>
                    <div className="flex items-center">
                      <span className="mr-2">{token.icon}</span>
                      <span>{token.name}</span>
                    </div>
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <Input
              type="number"
              placeholder="0.00"
              value={amount}
              onChange={(e) => setAmount(e.target.value)}
              className="flex-grow"
            />
          </div>
          <div className="flex justify-center">
            <Button type="button" variant="outline" size="icon" onClick={handleSwap}>
              <ArrowLeftRight className="h-4 w-4" />
            </Button>
          </div>
          <div className="flex items-center space-x-4">
            <Select
              value={toToken.symbol}
              onValueChange={(value) => setToToken(tokens.find(t => t.symbol === value) || tokens[1])}
            >
              <SelectTrigger className="w-[180px]">
                <SelectValue placeholder="To" />
              </SelectTrigger>
              <SelectContent>
                {tokens.map((token) => (
                  <SelectItem key={token.symbol} value={token.symbol}>
                    <div className="flex items-center">
                      <span className="mr-2">{token.icon}</span>
                      <span>{token.name}</span>
                    </div>
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <Input
              type="number"
              placeholder="0.00"
              value={amount ? (parseFloat(amount) * exchangeRate).toFixed(2) : ''}
              readOnly
              className="flex-grow"
            />
          </div>
          <div className="text-sm text-gray-500 text-center">
            Exchange Rate: 1 {fromToken.symbol} = {exchangeRate} {toToken.symbol}
          </div>
          <Button type="submit" className="w-full">
            Swap Tokens
          </Button>
        </div>
      </form>
    </div>
  )
}