You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
55 lines
2.5 KiB
JavaScript
55 lines
2.5 KiB
JavaScript
import React from 'react'
|
|
import { HiOutlineCash, HiOutlineBell } from 'react-icons/hi'
|
|
|
|
export default function UserBanner({ user }) {
|
|
return (
|
|
<div>
|
|
{/* user */}
|
|
<div className="flex flex-row justify-between items-center px-5 py-6 text-lg bg-blue-600">
|
|
<div className="flex flex-col text-white">
|
|
<div className="font-bold">{user.name}</div>
|
|
<div className="flex flex-row items-center space-x-1">
|
|
<div>+62{user.phone}</div>
|
|
<div className="text-xs font-semibold px-2 py-1 bg-white text-black rounded-xl">
|
|
Gold
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-row">
|
|
<HiOutlineBell className="text-white w-7 h-7" />
|
|
<div>
|
|
<div className="bg-white text-blue-700 rounded-lg px-1 text-xs -ml-2.5">
|
|
1
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* saldo */}
|
|
<div className="flex flex-row px-5 pb-3 text-base bg-blue-600">
|
|
<div className="flex flex-row w-full shadow py-2 px-2 rounded bg-white items-center justify-between">
|
|
<div className="flex flex-col">
|
|
<div className="text-xs flex flex-row items-center space-x-1 text-gray-400">
|
|
<HiOutlineCash />
|
|
<div>Saldo</div>
|
|
</div>
|
|
<div className="font-bold">Rp 10.000</div>
|
|
<div className="text-xs flex flex-row items-center space-x-1 text-gray-400">
|
|
<div>Coin 10.000</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col border-l-2 pl-5 pr-5">
|
|
<div className="text-xs flex flex-row items-center space-x-1 text-gray-400">
|
|
{/* <HiOutlineAwa /> */}
|
|
<div>Rewards</div>
|
|
</div>
|
|
<div className="font-bold">Gold Member</div>
|
|
<div className="text-xs flex flex-row items-center space-x-1 text-gray-400">
|
|
<div>Limit 100.000</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|