wrap up tryit

Author: tyrelchambers

src/components/CodeSample/CodeSample.astro

@@ -10,8 +10,9 @@ export type Props = {
   showButtonOnly?: boolean
   optimize?: boolean
   runs?: number
+  showButtons?: boolean
 }
-const { src, lang, showButtonOnly, optimize, runs } = Astro.props as Props
+const { src, lang, showButtonOnly, optimize, runs, showButtons = true } = Astro.props as Props
 
 const data = (await fs.readFile(path.join(process.cwd(), "public", src), "utf-8")).toString()
 
@@ -31,7 +32,7 @@ const remixUrl = `https://remix.ethereum.org/#url=https://docs.chain.link/${clea
 
 {!showButtonOnly && <Prism code={data} lang={lang ?? "solidity"} />}
 {
-  isSample && (
+  isSample && showButtons && (
     <div class="remix-callout">
       <a href={remixUrl} target="_blank">
         Open in Remix

src/components/TryItOut/TryItOut.astro

@@ -10,7 +10,7 @@ import { TryItOutAccordion } from "./TryItOutAccordion"
     <Typography variant="h2" className={styles.title}> Try it out </Typography>
 
     <section class={styles.content}>
-      <div>
+      <div class={styles.contentLeft}>
         <TryItOutAccordion client:only="react" />
 
         <footer class={styles.contentFooter}>
@@ -19,7 +19,14 @@ import { TryItOutAccordion } from "./TryItOutAccordion"
         </footer>
       </div>
 
-      <!-- <CodeSample src="/samples/ChainlinkFunctions/AutomatedFunctionsConsumerExample.sol" /> -->
+      <section class={styles.image}>
+        <CodeSample showButtons={false} src="/samples/ChainlinkFunctions/AutomatedFunctionsConsumerExample.sol" />
+      </section>
+
+      <footer class={styles.contentFooterMobile}>
+        <Button>Create CRE account</Button>
+        <Button variant="tertiary" className={styles.secondaryBtn}> Get the SDK </Button>
+      </footer>
     </section>
   </section>
 </div>

src/components/TryItOut/styles.module.css

@@ -21,7 +21,7 @@
 
 .content {
   display: grid;
-  grid-template-columns: 492px 735px;
+  grid-template-columns: 1fr 1fr;
   justify-content: space-between;
   gap: var(--space-24x);
 }
@@ -37,6 +37,12 @@
   }
 }
 
+.contentLeft {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
 .text {
   color: var(--muted-more-foreground);
 }
@@ -57,11 +63,18 @@
   & svg {
     display: none;
   }
+
+  & span {
+    word-wrap: normal;
+  }
 }
 
 .image {
   width: 100%;
-  object-fit: cover;
+  max-height: 412px;
+  overflow: hidden;
+  border-bottom: 1.5px solid var(--stepper-counter-pending-foreground);
+  border-radius: 6.317px;
 }
 
 .accordionItem[data-state="open"] {
@@ -81,9 +94,31 @@
   margin: 0 auto;
 }
 
+.contentFooterMobile {
+  display: none;
+  gap: var(--space-6x);
+}
+
+@media screen and (max-width: 425px) {
+  .contentFooterMobile {
+    flex-direction: column;
+  }
+}
+
 @media screen and (max-width: 768px) {
   .content {
     grid-template-columns: 1fr;
-    padding: 0 var(--space-8x);
+    gap: var(--space-8x);
+  }
+
+  .title {
+    font-size: 28px;
+  }
+  .contentFooter {
+    display: none;
+  }
+
+  .contentFooterMobile {
+    display: flex;
   }
 }