add README

Author: tyrelchambers

src/components/TryItOut/README.md

@@ -0,0 +1,47 @@
+# TryItOut Component
+
+A component that displays an interactive accordion of features alongside a code sample preview.
+
+## Usage
+
+```astro
+<TryItOut
+  codeSampleSrc="/samples/YourCodeFile.sol"
+  accordionTabs={[
+    {
+      title: "Your Feature Title",
+      text: "A brief description of what this feature does.",
+    },
+  ]}
+/>
+```
+
+## Props
+
+### `codeSampleSrc` (required)
+
+The file path to the code sample you want to display. This should point to a file in the `/samples/` folder.
+
+**Example:** `"/samples/ChainlinkFunctions/AutomatedFunctionsConsumerExample.sol"`
+
+### `accordionTabs` (required)
+
+A list of expandable sections that describe different features. Each tab needs:
+
+- **title**: The heading text for the accordion item
+- **text**: The description that appears when the accordion is expanded
+
+**Example:**
+
+```js
+;[
+  {
+    title: "Transfer Tokens",
+    text: "Move tokens between different blockchains easily.",
+  },
+  {
+    title: "Fetch Data",
+    text: "Get real-time information from external sources.",
+  },
+]
+```

src/components/TryItOut/TryItOut.astro

@@ -3,6 +3,13 @@ import { Button, Typography } from "@chainlink/blocks"
 import styles from "./styles.module.css"
 import CodeSample from "../CodeSample/CodeSample.astro"
 import { TryItOutAccordion } from "./TryItOutAccordion"
+
+interface Props {
+  codeSampleSrc: string
+  accordionTabs: Array<{ title: string; text: string }>
+}
+
+const { codeSampleSrc, accordionTabs } = Astro.props
 ---
 
 <div class={styles.container}>
@@ -11,7 +18,7 @@ import { TryItOutAccordion } from "./TryItOutAccordion"
 
     <section class={styles.content}>
       <div class={styles.contentLeft}>
-        <TryItOutAccordion client:only="react" />
+        <TryItOutAccordion client:only="react" tabs={accordionTabs} />
 
         <footer class={styles.contentFooter}>
           <Button>Create CRE account</Button>
@@ -20,7 +27,7 @@ import { TryItOutAccordion } from "./TryItOutAccordion"
       </div>
 
       <section class={styles.image}>
-        <CodeSample showButtons={false} src="/samples/ChainlinkFunctions/AutomatedFunctionsConsumerExample.sol" />
+        <CodeSample showButtons={false} src={codeSampleSrc} />
       </section>
 
       <footer class={styles.contentFooterMobile}>

src/components/TryItOut/TryItOutAccordion.tsx

@@ -1,25 +1,16 @@
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Typography } from "@chainlink/blocks"
 import styles from "./styles.module.css"
 
-export const TryItOutAccordion = () => {
-  const tabs = [
-    {
-      title: "Transfer Tokens Between Chains",
-      text: "Use Chainlink CCIP to transfer tokens from a smart contract to an account on a different blockchain.",
-    },
-    {
-      title: "Leverage MVR feeds",
-      text: "Use Multiple-Variable Response (MVR) feeds data in your consumer contracts on EVM chains using Solidity.",
-    },
-    {
-      title: "Fetch and Decode Real World Asset Streams",
-      text: "Use the Data Streams SDK for Go/Rust to fetch and decode reports from the Data Streams Aggregation Network.",
-    },
-    {
-      title: "Automate your Functions",
-      text: "Use Chainlink Automation to trigger the same functions regularly, such as fetching weather data daily or fetching an asset price on every block.",
-    },
-  ]
+interface AccordionTab {
+  title: string
+  text: string
+}
+
+interface TryItOutAccordionProps {
+  tabs: AccordionTab[]
+}
+
+export const TryItOutAccordion = ({ tabs }: TryItOutAccordionProps) => {
 
   return (
     <Accordion collapsible type="single">

src/pages/index.astro

@@ -20,7 +20,27 @@ const formattedContentTitle = `${CONFIG.PAGE.titleFallback} | ${CONFIG.SITE.titl
       <JourneyCards />
     </div>
 
-    <TryItOut />
+    <TryItOut
+      codeSampleSrc="/samples/ChainlinkFunctions/AutomatedFunctionsConsumerExample.sol"
+      accordionTabs={[
+        {
+          title: "Transfer Tokens Between Chains",
+          text: "Use Chainlink CCIP to transfer tokens from a smart contract to an account on a different blockchain.",
+        },
+        {
+          title: "Leverage MVR feeds",
+          text: "Use Multiple-Variable Response (MVR) feeds data in your consumer contracts on EVM chains using Solidity.",
+        },
+        {
+          title: "Fetch and Decode Real World Asset Streams",
+          text: "Use the Data Streams SDK for Go/Rust to fetch and decode reports from the Data Streams Aggregation Network.",
+        },
+        {
+          title: "Automate your Functions",
+          text: "Use Chainlink Automation to trigger the same functions regularly, such as fetching weather data daily or fetching an asset price on every block.",
+        },
+      ]}
+    />
 
     <div class="wrapper">
       <Demos />