//We define the Git Repository contract metadata const contractData = "000200010000000000010500000001090000000000000000010c000000b11554000850646563656e7472616c697a65645f6769745f696f3c496e69745265706f50726f6772616d00000801146f776e657204011c4163746f7249640001106e616d65100118537472696e67000004082c677072696d6974697665731c4163746f724964000004000801205b75383b2033325d000008000003200000000c000c0000050300100000050200140850646563656e7472616c697a65645f6769745f696f485265706f416374696f6e526571756573747300011c1852656e616d650400100118537472696e67000000304372656174654272616e63680400100118537472696e670001003052656e616d654272616e6368040018014452656e616d654272616e6368496e7075740002003044656c6574654272616e636804001c014444656c6574654272616e6368496e7075740003001050757368040020012450757368496e7075740004003c416464436f6c6c61626f7261746f72040004011c4163746f7249640005004844656c657465436f6c6c61626f7261746f72040004011c4163746f72496400060000180850646563656e7472616c697a65645f6769745f696f4452656e616d654272616e6368496e70757400000801086964100118537472696e670001106e616d65100118537472696e6700001c0850646563656e7472616c697a65645f6769745f696f4444656c6574654272616e6368496e70757400000401246272616e63685f6964100118537472696e670000200850646563656e7472616c697a65645f6769745f696f2450757368496e70757400000801246272616e63685f6964100118537472696e6700011068617368100118537472696e670000240850646563656e7472616c697a65645f6769745f696f4c5265706f416374696f6e526573706f6e73657300011c1852656e616d6504010c6d7367100118537472696e67000000304372656174654272616e636804010c6d7367100118537472696e670001003052656e616d654272616e636804010c6d7367100118537472696e670002003044656c6574654272616e636804010c6d7367100118537472696e67000300105075736804010c6d7367280118436f6d6d69740004003c416464436f6c6c61626f7261746f7204010c6d7367100118537472696e670005004844656c657465436f6c6c61626f7261746f7204010c6d7367100118537472696e6700060000280850646563656e7472616c697a65645f6769745f696f18436f6d6d697400001001086964100118537472696e670001146f776e657204011c4163746f72496400011068617368100118537472696e67000128637265617465645f61742c010c75363400002c0000050600300850646563656e7472616c697a65645f6769745f696f1c50726f6772616d00001401146f776e657204011c4163746f7249640001106e616d65100118537472696e6700013c757365725f70726f6772616d5f696404011c4163746f724964000130636f6c6c61626f7261746f7234016842547265654d61703c4163746f7249642c204163746f7249643e0001206272616e6368657340016042547265654d61703c537472696e672c204272616e63683e000034042042547265654d617008044b01040456010400040038000000380000023c003c0000040804040040042042547265654d617008044b0110045601440004004c000000440850646563656e7472616c697a65645f6769745f696f184272616e636800001801086964100118537472696e670001146f776e657204011c4163746f7249640001106e616d65100118537472696e6700011c636f6d6d69747348012c5665633c436f6d6d69743e000128637265617465645f61742c010c753634000128757064617465645f61742c010c75363400004800000228004c00000250005000000408104400"; //The HTML elements with styles that will be used in the component are declared const App = styled.div` --margin-app: clamp(16px, 4vw, 24px); --h-footer: 60px; --bg-card: rgb(25, 25, 25, .9); --primary: #0fffc7; --gradient: linear-gradient(to right, #22463d, #00f0b8); display: grid; place-items: center; place-content: center; min-height: calc(100dvh - var(--h-footer)); background: linear-gradient(to top right, #fff, #f5f5f7); .wrapper { background: var(--bg-card); border-radius: .3rem; padding: 40px 30px; display: flex; flex-direction: column; max-width: 500px; span { color: #fff } } ::-moz-selection { /* Code for Firefox */ background: #ccf0e7; } ::selection { background: #ccf0e7; } .space-between { display: flex; justify-content: space-between; align-items: center; } `, Input = styled.div` display: flex; gap: 10px; border-radius: .75rem; padding: 5px; background: #fff; box-shadow: 0 0 10px -5px rgb(0,0,0,.4); input { background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; border: none; height: 40px; font-size: 24px; font-weight: 500; padding-right: 0; margin: 5px; &::placeholder { font-size: 24px; } &:focus { box-shadow: none; } } `, Btn = styled.button` display: inlin-block; background: var(--primary); border: none; border-radius: .7rem; font-weight: 600; padding-inline: 10px; min-height: 45px; :hover { opacity: .9; filter: grayscale(0.5); } `, Footer = styled.div` position: absolute; bottom: -30px; left: 0; right: 0; width: 100%; display: flex; align-items: center; justify-content: center; height: var(--h-footer); background: var(--primary); a { color: #000; background: #fff; padding: 10px 30px; border-radius: .75rem; translate: 0 -20px; box-shadow: 0 0 10px -5px rgb(0,0,0,.4); } #vara-icon { width: 50px; height: 50px; } `; const collapseContent = styled.div` { transition-property: height; transition-duration: 200ms; overflow: hidden; background-color: #f2f2f2; } `; const collapseHeader = styled.div` { background-color: #424242; } `; return { contractData, App, Input, Btn, Footer, collapseContent, collapseHeader, };