437 lines
27 KiB
JavaScript
437 lines
27 KiB
JavaScript
import React, { useState } from 'react';
|
|
|
|
import Sidebar from '../../partials/Sidebar';
|
|
import Header from '../../partials/Header';
|
|
|
|
function CreditCards() {
|
|
|
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
|
|
|
return (
|
|
<div className="flex h-screen overflow-hidden">
|
|
{/* Sidebar */}
|
|
<Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
|
|
|
{/* Content area */}
|
|
<div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden bg-white">
|
|
|
|
{/* Site header */}
|
|
<Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
|
|
|
<main>
|
|
|
|
<div className="lg:relative lg:flex">
|
|
|
|
{/* Content */}
|
|
<div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
|
|
|
|
{/* Page header */}
|
|
<div className="sm:flex sm:justify-between sm:items-center mb-5">
|
|
|
|
{/* Left: Title */}
|
|
<div className="mb-4 sm:mb-0">
|
|
<h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Cards ✨</h1>
|
|
</div>
|
|
|
|
{/* Add card button */}
|
|
<button className="btn bg-indigo-500 hover:bg-indigo-600 text-white">
|
|
<svg className="w-4 h-4 fill-current opacity-50 shrink-0" viewBox="0 0 16 16">
|
|
<path d="M15 7H9V1c0-.6-.4-1-1-1S7 .4 7 1v6H1c-.6 0-1 .4-1 1s.4 1 1 1h6v6c0 .6.4 1 1 1s1-.4 1-1V9h6c.6 0 1-.4 1-1s-.4-1-1-1z" />
|
|
</svg>
|
|
<span className="hidden xs:block ml-2">Add Card</span>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Filters */}
|
|
<div className="mb-5">
|
|
<ul className="flex flex-wrap -m-1">
|
|
<li className="m-1">
|
|
<button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-transparent shadow-sm bg-indigo-500 text-white duration-150 ease-in-out">
|
|
View All
|
|
</button>
|
|
</li>
|
|
<li className="m-1">
|
|
<button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
|
|
Physical Cards
|
|
</button>
|
|
</li>
|
|
<li className="m-1">
|
|
<button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
|
|
Virtual Cards
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Credit cards */}
|
|
<div className="space-y-2">
|
|
|
|
{/* Card 1 */}
|
|
<label className="relative block cursor-pointer text-left w-full">
|
|
<input type="radio" name="radio-buttons" className="peer sr-only" defaultChecked />
|
|
<div className="p-4 rounded border border-slate-200 hover:border-slate-300 shadow-sm duration-150 ease-in-out">
|
|
<div className="grid grid-cols-12 items-center gap-x-2">
|
|
{/* Card */}
|
|
<div className="col-span-6 order-1 sm:order-none sm:col-span-3 flex items-center space-x-4 lg:sidebar-expanded:col-span-6 xl:sidebar-expanded:col-span-3">
|
|
<svg className="shrink-0" width="32" height="24" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<linearGradient x1="1.829%" y1="100%" x2="100%" y2="2.925%" id="c1-a">
|
|
<stop stopColor="#475569" offset="0%" />
|
|
<stop stopColor="#1E293B" offset="100%" />
|
|
<stop stopColor="#9FA1FF" offset="100%" />
|
|
</linearGradient>
|
|
</defs>
|
|
<g fill="none" fillRule="evenodd">
|
|
<rect fill="url(#c1-a)" width="32" height="24" rx="3" />
|
|
<ellipse fill="#E61C24" fillRule="nonzero" cx="12.522" cy="12" rx="5.565" ry="5.647" />
|
|
<ellipse fill="#F99F1B" fillRule="nonzero" cx="19.432" cy="12" rx="5.565" ry="5.647" />
|
|
<path
|
|
d="M15.977 7.578A5.667 5.667 0 0 0 13.867 12c0 1.724.777 3.353 2.11 4.422A5.667 5.667 0 0 0 18.087 12a5.667 5.667 0 0 0-2.11-4.422Z"
|
|
fill="#F26622"
|
|
fillRule="nonzero"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
<div>
|
|
<div className="text-sm font-medium text-slate-800">_Metal</div>
|
|
<div className="text-xs">**7328</div>
|
|
</div>
|
|
</div>
|
|
{/* Name */}
|
|
<div className="col-span-6 order-2 sm:order-none sm:col-span-3 text-left sm:text-center lg:sidebar-expanded:hidden xl:sidebar-expanded:block">
|
|
<div className="text-sm font-medium text-slate-800 truncate">Dominik Lamakani</div>
|
|
</div>
|
|
{/* Card limits */}
|
|
<div className="col-span-6 order-1 sm:order-none sm:col-span-4 text-right sm:text-center lg:sidebar-expanded:col-span-6 xl:sidebar-expanded:col-span-4">
|
|
<div className="text-sm">$780,00 / $20,000</div>
|
|
</div>
|
|
{/* Card status */}
|
|
<div className="col-span-6 order-2 sm:order-none sm:col-span-2 text-right lg:sidebar-expanded:hidden xl:sidebar-expanded:block">
|
|
<div className="text-xs inline-flex font-medium bg-emerald-100 text-emerald-600 rounded-full text-center px-2.5 py-1">
|
|
Active
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="absolute inset-0 border-2 border-transparent peer-checked:border-indigo-400 rounded pointer-events-none"
|
|
aria-hidden="true"
|
|
/>
|
|
</label>
|
|
|
|
{/* Card 2 */}
|
|
<label className="relative block cursor-pointer text-left w-full">
|
|
<input type="radio" name="radio-buttons" className="peer sr-only" />
|
|
<div className="p-4 rounded border border-slate-200 hover:border-slate-300 shadow-sm duration-150 ease-in-out">
|
|
<div className="grid grid-cols-12 items-center gap-x-2">
|
|
{/* Card */}
|
|
<div className="col-span-6 order-1 sm:order-none sm:col-span-3 flex items-center space-x-4 lg:sidebar-expanded:col-span-6 xl:sidebar-expanded:col-span-3">
|
|
<svg className="shrink-0" width="32" height="24" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<linearGradient x1="1.829%" y1="100%" x2="100%" y2="2.925%" id="c2a">
|
|
<stop stopColor="#6366F1" offset="0%" />
|
|
<stop stopColor="#9FA1FF" offset="100%" />
|
|
<stop stopColor="#9FA1FF" offset="100%" />
|
|
</linearGradient>
|
|
</defs>
|
|
<g fill="none" fillRule="evenodd">
|
|
<rect fill="url(#c2a)" width="32" height="24" rx="3" />
|
|
<ellipse fill="#E61C24" fillRule="nonzero" cx="12.522" cy="12" rx="5.565" ry="5.647" />
|
|
<ellipse fill="#F99F1B" fillRule="nonzero" cx="19.432" cy="12" rx="5.565" ry="5.647" />
|
|
<path
|
|
d="M15.977 7.578A5.667 5.667 0 0 0 13.867 12c0 1.724.777 3.353 2.11 4.422A5.667 5.667 0 0 0 18.087 12a5.667 5.667 0 0 0-2.11-4.422Z"
|
|
fill="#F26622"
|
|
fillRule="nonzero"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
<div>
|
|
<div className="text-sm font-medium text-slate-800">_Virtual</div>
|
|
<div className="text-xs">**7377</div>
|
|
</div>
|
|
</div>
|
|
{/* Name */}
|
|
<div className="col-span-6 order-2 sm:order-none sm:col-span-3 text-left sm:text-center lg:sidebar-expanded:hidden xl:sidebar-expanded:block">
|
|
<div className="text-sm font-medium text-slate-800 truncate">Dominik Lamakani</div>
|
|
</div>
|
|
{/* Card limits */}
|
|
<div className="col-span-6 order-1 sm:order-none sm:col-span-4 text-right sm:text-center lg:sidebar-expanded:col-span-6 xl:sidebar-expanded:col-span-4">
|
|
<div className="text-sm">$0 / $20,000</div>
|
|
</div>
|
|
{/* Card status */}
|
|
<div className="col-span-6 order-2 sm:order-none sm:col-span-2 text-right lg:sidebar-expanded:hidden xl:sidebar-expanded:block">
|
|
<div className="text-xs inline-flex font-medium bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-1">
|
|
Blocked
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="absolute inset-0 border-2 border-transparent peer-checked:border-indigo-400 rounded pointer-events-none"
|
|
aria-hidden="true"
|
|
/>
|
|
</label>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* Sidebar */}
|
|
<div>
|
|
<div className="lg:sticky lg:top-16 bg-slate-50 lg:overflow-x-hidden lg:overflow-y-auto no-scrollbar lg:shrink-0 border-t lg:border-t-0 lg:border-l border-slate-200 lg:w-[390px] lg:h-[calc(100vh-64px)]">
|
|
<div className="py-8 px-4 lg:px-8">
|
|
<div className="max-w-sm mx-auto lg:max-w-none">
|
|
|
|
<div className="text-slate-800 font-semibold text-center mb-6">Physical Metal Card Summary</div>
|
|
|
|
{/* Credit Card */}
|
|
<div className="relative aspect-[7/4] bg-gradient-to-tr from-slate-600 to-slate-800 p-5 rounded-xl shadow-lg overflow-hidden">
|
|
{/* Illustration on card */}
|
|
<div className="absolute inset-0 w-full h-full" aria-hidden="true">
|
|
<svg className="w-full h-full" width="326" height="190" viewBox="0 0 326 190" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<filter x="-59.5%" y="-73.1%" width="219%" height="246.3%" filterUnits="objectBoundingBox" id="ccill-a">
|
|
<feGaussianBlur stdDeviation="7" in="SourceGraphic" />
|
|
</filter>
|
|
<filter x="-34.5%" y="-62.5%" width="169%" height="225.1%" filterUnits="objectBoundingBox" id="ccill-b">
|
|
<feGaussianBlur stdDeviation="7" in="SourceGraphic" />
|
|
</filter>
|
|
<filter x="-23.3%" y="-43.5%" width="146.7%" height="186.9%" filterUnits="objectBoundingBox" id="ccill-c">
|
|
<feGaussianBlur stdDeviation="7" in="SourceGraphic" />
|
|
</filter>
|
|
<filter x="-15.9%" y="-46.1%" width="131.7%" height="192.1%" filterUnits="objectBoundingBox" id="ccill-d">
|
|
<feGaussianBlur stdDeviation="7" in="SourceGraphic" />
|
|
</filter>
|
|
<filter x="-21.8%" y="-58.4%" width="143.6%" height="216.8%" filterUnits="objectBoundingBox" id="ccill-e">
|
|
<feGaussianBlur stdDeviation="7" in="SourceGraphic" />
|
|
</filter>
|
|
<filter x="-21.1%" y="-77.5%" width="142.1%" height="254.9%" filterUnits="objectBoundingBox" id="ccill-f">
|
|
<feGaussianBlur stdDeviation="7" in="SourceGraphic" />
|
|
</filter>
|
|
<filter x="-19.1%" y="-66%" width="138.3%" height="232.1%" filterUnits="objectBoundingBox" id="ccill-g">
|
|
<feGaussianBlur stdDeviation="7" in="SourceGraphic" />
|
|
</filter>
|
|
<filter x="-20%" y="-75.6%" width="140%" height="251.3%" filterUnits="objectBoundingBox" id="ccill-h">
|
|
<feGaussianBlur stdDeviation="7" in="SourceGraphic" />
|
|
</filter>
|
|
<filter x="-32.1%" y="-78.2%" width="164.1%" height="256.5%" filterUnits="objectBoundingBox" id="ccill-i">
|
|
<feGaussianBlur stdDeviation="7" in="SourceGraphic" />
|
|
</filter>
|
|
<filter x="-24.3%" y="-48.7%" width="148.6%" height="197.4%" filterUnits="objectBoundingBox" id="ccill-j">
|
|
<feGaussianBlur stdDeviation="7" in="SourceGraphic" />
|
|
</filter>
|
|
<filter x="-29.7%" y="-67.7%" width="159.4%" height="235.4%" filterUnits="objectBoundingBox" id="ccill-k">
|
|
<feGaussianBlur stdDeviation="7" in="SourceGraphic" />
|
|
</filter>
|
|
<filter x="-22.9%" y="-39.7%" width="145.9%" height="179.3%" filterUnits="objectBoundingBox" id="ccill-l">
|
|
<feGaussianBlur stdDeviation="7" in="SourceGraphic" />
|
|
</filter>
|
|
<filter x="-27.4%" y="-72%" width="154.8%" height="243.9%" filterUnits="objectBoundingBox" id="ccill-m">
|
|
<feGaussianBlur stdDeviation="7" in="SourceGraphic" />
|
|
</filter>
|
|
<filter x="-20.4%" y="-66.7%" width="140.9%" height="233.3%" filterUnits="objectBoundingBox" id="ccill-n">
|
|
<feGaussianBlur stdDeviation="7" in="SourceGraphic" />
|
|
</filter>
|
|
<filter x="-70.1%" y="-93.6%" width="240.1%" height="287.2%" filterUnits="objectBoundingBox" id="ccill-o">
|
|
<feGaussianBlur stdDeviation="7" in="SourceGraphic" />
|
|
</filter>
|
|
<filter x="-52.4%" y="-122.3%" width="204.7%" height="344.6%" filterUnits="objectBoundingBox" id="ccill-p">
|
|
<feGaussianBlur stdDeviation="7" in="SourceGraphic" />
|
|
</filter>
|
|
<filter x="-38.5%" y="-87.5%" width="177%" height="275%" filterUnits="objectBoundingBox" id="ccill-q">
|
|
<feGaussianBlur stdDeviation="7" in="SourceGraphic" />
|
|
</filter>
|
|
<filter x="-46.2%" y="-46.4%" width="192.4%" height="192.8%" filterUnits="objectBoundingBox" id="ccill-r">
|
|
<feGaussianBlur stdDeviation="48" in="SourceGraphic" />
|
|
</filter>
|
|
</defs>
|
|
<g fill="none" fillRule="evenodd">
|
|
<g stroke="#FFF">
|
|
<path d="m74.649 51.429 35.813-29.245" filter="url(#ccill-a)" transform="translate(23.168 10.2)" />
|
|
<path
|
|
d="m95.001 48.454 61.614-34.273"
|
|
style={{ mixBlendMode: 'overlay' }}
|
|
filter="url(#ccill-b)"
|
|
transform="translate(23.168 10.2)"
|
|
/>
|
|
<path d="m102.738 59.711 90.966-49.333" filter="url(#ccill-c)" transform="translate(23.168 10.2)" />
|
|
<path
|
|
d="M132.402 56.164c51.89-27.442 9.677-6.22 133.867-46.582"
|
|
style={{ mixBlendMode: 'overlay' }}
|
|
filter="url(#ccill-d)"
|
|
transform="translate(23.168 10.2)"
|
|
/>
|
|
<path
|
|
d="M192.973 49.441c63.823-28.1 31.403-15.88 97.219-36.765"
|
|
filter="url(#ccill-e)"
|
|
transform="translate(23.168 10.2)"
|
|
/>
|
|
<path d="M174.906 63.986 275.21 36.252" filter="url(#ccill-f)" transform="translate(23.168 10.2)" />
|
|
<path
|
|
d="M78.484 90.425 188.905 57.9"
|
|
style={{ mixBlendMode: 'overlay' }}
|
|
filter="url(#ccill-g)"
|
|
transform="translate(23.168 10.2)"
|
|
/>
|
|
<path d="M107.59 120.722 213.167 92.32" filter="url(#ccill-h)" transform="translate(23.168 10.2)" />
|
|
<path d="m44.001 139.184 66.091-27.432" filter="url(#ccill-i)" transform="translate(23.168 10.2)" />
|
|
<path d="m25.233 108.035 87.289-44.052" filter="url(#ccill-j)" transform="translate(23.168 10.2)" />
|
|
<path d="m0 78.862 71.407-31.693" filter="url(#ccill-k)" transform="translate(23.168 10.2)" />
|
|
<path d="M41.3 54.036 133.926 0" filter="url(#ccill-l)" transform="translate(23.168 10.2)" />
|
|
<path
|
|
d="M177.385 128.372c38.41-17.811 13.059-6.784 77.387-29.83"
|
|
style={{ mixBlendMode: 'overlay' }}
|
|
filter="url(#ccill-m)"
|
|
transform="translate(23.168 10.2)"
|
|
/>
|
|
<path d="m190.745 154.661 103.507-32.222" filter="url(#ccill-n)" transform="translate(23.168 10.2)" />
|
|
<path d="m235.764 74.579 30.397-22.87" filter="url(#ccill-o)" transform="translate(23.168 10.2)" />
|
|
<path
|
|
d="M29.686 21.19 70.172 3.645"
|
|
style={{ mixBlendMode: 'overlay' }}
|
|
filter="url(#ccill-p)"
|
|
transform="translate(23.168 10.2)"
|
|
/>
|
|
<path d="M17.977 79.61 73.04 55.091" filter="url(#ccill-q)" transform="translate(23.168 10.2)" />
|
|
</g>
|
|
<path
|
|
fillOpacity=".24"
|
|
fill="#FFF"
|
|
style={{ mixBlendMode: 'overlay' }}
|
|
filter="url(#ccill-r)"
|
|
d="M156 .573 331.59 311H75L20 .573z"
|
|
transform="translate(0 -40)"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div className="relative h-full flex flex-col justify-between">
|
|
{/* Logo on card */}
|
|
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
|
|
<defs>
|
|
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="icon1-b">
|
|
<stop stopColor="#E2E8F0" offset="0%" />
|
|
<stop stopColor="#94A3B8" offset="100%" />
|
|
</linearGradient>
|
|
<linearGradient x1="50%" y1="24.537%" x2="50%" y2="99.142%" id="icon1-c">
|
|
<stop stopColor="#334155" offset="0%" />
|
|
<stop stopColor="#334155" stopOpacity="0" offset="100%" />
|
|
</linearGradient>
|
|
<path id="icon1-a" d="M16 0l16 32-16-5-16 5z" />
|
|
</defs>
|
|
<g transform="rotate(90 16 16)" fill="none" fillRule="evenodd">
|
|
<mask id="icon1-d" fill="#fff">
|
|
<use xlinkHref="#icon1-a" />
|
|
</mask>
|
|
<use fill="url(#icon1-b)" xlinkHref="#icon1-a" />
|
|
<path fill="url(#icon1-c)" mask="url(#icon1-d)" d="M16-6h20v38H16z" />
|
|
</g>
|
|
</svg>
|
|
{/* Card number */}
|
|
<div className="flex justify-between text-lg font-bold text-slate-200 tracking-widest drop-shadow-sm">
|
|
<span>****</span>
|
|
<span>****</span>
|
|
<span>****</span>
|
|
<span>7328</span>
|
|
</div>
|
|
{/* Card footer */}
|
|
<div className="relative flex justify-between items-center z-10 mb-0.5">
|
|
{/* Card expiration */}
|
|
<div className="text-sm font-bold text-slate-200 tracking-widest drop-shadow-sm space-x-3">
|
|
<span>EXP 12/24</span>
|
|
<span>CVC ***</span>
|
|
</div>
|
|
</div>
|
|
{/* Mastercard logo */}
|
|
<svg className="absolute bottom-0 right-0" width="48" height="28" viewBox="0 0 48 28">
|
|
<circle fill="#F59E0B" cx="34" cy="14" r="14" fillOpacity=".8" />
|
|
<circle fill="#F43F5E" cx="14" cy="14" r="14" fillOpacity=".8" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Details */}
|
|
<div className="mt-6">
|
|
<div className="text-sm font-semibold text-slate-800 mb-1">Details</div>
|
|
<ul>
|
|
<li className="flex items-center justify-between py-3 border-b border-slate-200">
|
|
<div className="text-sm">Card Name</div>
|
|
<div className="text-sm font-medium text-slate-800 ml-2">Physical Metal Card</div>
|
|
</li>
|
|
<li className="flex items-center justify-between py-3 border-b border-slate-200">
|
|
<div className="text-sm">Status</div>
|
|
<div className="flex items-center whitespace-nowrap">
|
|
<div className="w-2 h-2 rounded-full bg-emerald-500 mr-2" />
|
|
<div className="text-sm font-medium text-slate-800">Active</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Payment Limits */}
|
|
<div className="mt-6">
|
|
<div className="text-sm font-semibold text-slate-800 mb-4">Payment Limits</div>
|
|
<div className="pb-4 border-b border-slate-200">
|
|
<div className="flex justify-between text-sm mb-2">
|
|
<div>Spent This Month</div>
|
|
<div className="italic">
|
|
$750,00 <span className="text-slate-400">/</span> $1,500.00
|
|
</div>
|
|
</div>
|
|
<div className="relative w-full h-2 bg-slate-300">
|
|
<div className="absolute inset-0 bg-emerald-500" aria-hidden="true" style={{ width: '50%' }} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Withdrawal Limits */}
|
|
<div className="mt-6">
|
|
<div className="text-sm font-semibold text-slate-800 mb-4">Withdrawal Limits</div>
|
|
<div className="pb-4 border-b border-slate-200">
|
|
<div className="flex justify-between text-sm mb-2">
|
|
<div>Withdrawn This Month</div>
|
|
<div className="italic">
|
|
$100,00 <span className="text-slate-400">/</span> $1,500.00
|
|
</div>
|
|
</div>
|
|
<div className="relative w-full h-2 bg-slate-300">
|
|
<div className="absolute inset-0 bg-emerald-500" aria-hidden="true" style={{ width: '7.5%' }} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Edit / Delete */}
|
|
<div className="flex items-center space-x-3 mt-6">
|
|
<div className="w-1/2">
|
|
<button className="btn w-full border-slate-200 hover:border-slate-300 text-slate-600">
|
|
<svg className="w-4 h-4 fill-current text-slate-500 shrink-0" viewBox="0 0 16 16">
|
|
<path d="M11.7.3c-.4-.4-1-.4-1.4 0l-10 10c-.2.2-.3.4-.3.7v4c0 .6.4 1 1 1h4c.3 0 .5-.1.7-.3l10-10c.4-.4.4-1 0-1.4l-4-4zM4.6 14H2v-2.6l6-6L10.6 8l-6 6zM12 6.6L9.4 4 11 2.4 13.6 5 12 6.6z" />
|
|
</svg>
|
|
<span className="ml-2">Edit Card</span>
|
|
</button>
|
|
</div>
|
|
<div className="w-1/2">
|
|
<button className="btn w-full border-slate-200 hover:border-slate-300 text-rose-500">
|
|
<svg className="w-4 h-4 fill-current shrink-0" viewBox="0 0 16 16">
|
|
<path d="M14.574 5.67a13.292 13.292 0 0 1 1.298 1.842 1 1 0 0 1 0 .98C15.743 8.716 12.706 14 8 14a6.391 6.391 0 0 1-1.557-.2l1.815-1.815C10.97 11.82 13.06 9.13 13.82 8c-.163-.243-.39-.56-.669-.907l1.424-1.424ZM.294 15.706a.999.999 0 0 1-.002-1.413l2.53-2.529C1.171 10.291.197 8.615.127 8.49a.998.998 0 0 1-.002-.975C.251 7.29 3.246 2 8 2c1.331 0 2.515.431 3.548 1.038L14.293.293a.999.999 0 1 1 1.414 1.414l-14 14a.997.997 0 0 1-1.414 0ZM2.18 8a12.603 12.603 0 0 0 2.06 2.347l1.833-1.834A1.925 1.925 0 0 1 6 8a2 2 0 0 1 2-2c.178 0 .348.03.512.074l1.566-1.566C9.438 4.201 8.742 4 8 4 5.146 4 2.958 6.835 2.181 8Z" />
|
|
</svg>
|
|
<span className="ml-2">Block Card</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</main>
|
|
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default CreditCards; |