feat: update trf bca and add mandiri

cypress/integration/pages/render.spec.ts

@@ -37,8 +37,13 @@ describe('All Page', () => {
     cy.get('h1').should('contain', 'Subscribe to theodorusclarence.com');
   });
 
-  it('should display trf page', () => {
-    cy.visit('/trf');
+  it('should display trf bca page', () => {
+    cy.visit('/trf/bca');
     cy.get('h1').should('contain', 'Rekening BCA');
   });
+
+  it('should display trf mandiri page', () => {
+    cy.visit('/trf/mandiri');
+    cy.get('h1').should('contain', 'Rekening Mandiri');
+  });
 });

src/pages/trf.tsx → src/pages/trf/bca.tsx

@@ -3,7 +3,6 @@ import CopyToClipboard from 'react-copy-to-clipboard';
 
 import Accent from '@/components/Accent';
 import Button from '@/components/buttons/Button';
-import CloudinaryImg from '@/components/images/CloudinaryImg';
 import Layout from '@/components/layout/Layout';
 import Seo from '@/components/Seo';
 
@@ -18,30 +17,23 @@ export default function TrfPage() {
   return (
     <Layout>
       <Seo
-        templateTitle='Rekening Clarence'
-        description='Buka untuk melihat QR Code dan Nomor Rekening Clarence'
+        templateTitle='Rekening BCA Clarence'
+        description='Buka untuk melihat Nomor Rekening Clarence'
         robots='noindex,nofollow'
       />
 
       <main>
         <section className=''>
           <div className='layout flex flex-col items-center py-12 text-center'>
             <h1>Rekening BCA</h1>
-            <p className='mt-4 text-sm font-bold uppercase text-gray-500 dark:text-gray-400'>
+            <p className='mt-8 text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400'>
               Atas Nama
             </p>
-            <h3 className='mt-1'>
+            <p className='mt-1 text-lg font-semibold tracking-wide'>
               <Accent>CLARENCE</Accent>
-            </h3>
-            <CloudinaryImg
-              className='mt-4 w-full max-w-sm'
-              publicId='theodorusclarence/qr-bca_rcbkew.jpg'
-              width={992}
-              height={886}
-              alt='QR BCA'
-            />
-            <div className='mt-8 flex flex-col items-center space-y-4'>
-              <code className='px-4 py-2 font-bold'>
+            </p>
+            <div className='mt-2 flex flex-col items-center space-y-4'>
+              <code className='px-4 py-2 text-lg font-semibold'>
                 <Accent>7630055037</Accent>
               </code>
               <CopyToClipboard

src/pages/trf/mandiri.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import CopyToClipboard from 'react-copy-to-clipboard';
+
+import Accent from '@/components/Accent';
+import Button from '@/components/buttons/Button';
+import Layout from '@/components/layout/Layout';
+import Seo from '@/components/Seo';
+
+const copyText = {
+  idle: 'Copy Nomor Rekening',
+  success: 'Copied to clipboard 🥳',
+};
+
+export default function TrfPage() {
+  const [copyStatus, setCopyStatus] = React.useState<string>(copyText.idle);
+
+  return (
+    <Layout>
+      <Seo
+        templateTitle='Rekening Mandiri Clarence'
+        description='Buka untuk melihat Nomor Rekening Clarence'
+        robots='noindex,nofollow'
+      />
+
+      <main>
+        <section className=''>
+          <div className='layout flex flex-col items-center py-12 text-center'>
+            <h1>Rekening Mandiri</h1>
+            <p className='mt-8 text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400'>
+              Atas Nama
+            </p>
+            <p className='mt-1 text-lg font-bold tracking-wide'>
+              <Accent>CLARENCE</Accent>
+            </p>
+            <div className='mt-2 flex flex-col items-center space-y-4'>
+              <code className='px-4 py-2 text-lg font-bold'>
+                <Accent>1420019966695</Accent>
+              </code>
+              <CopyToClipboard
+                text='1420019966695'
+                onCopy={() => {
+                  setCopyStatus(copyText.success);
+                  setTimeout(() => setCopyStatus(copyText.idle), 1500);
+                }}
+              >
+                <Button>{copyStatus}</Button>
+              </CopyToClipboard>
+            </div>
+          </div>
+        </section>
+      </main>
+    </Layout>
+  );
+}