<Aside title="Amazon Icon" icon="amazon">
  This is an amazon icon example, which can contain any content.
</Aside>
<Aside title="Apple Icon" icon="apple">
  This is an apple icon example, which can contain any content.
</Aside>
<Aside title="Google Icon" icon="google">
  This is a google icon example, which can contain any content.
</Aside>

<Aside title="Default" variant="default">
  This is a default aside example, which can contain any content.
</Aside>
<Aside title="Note" variant="note">
  This is a note aside example, which can contain any content.
</Aside>
<Aside title="Tip" variant="tip">
  This is a tip aside example, which can contain any content.
</Aside>
<Aside title="Important" variant="important">
  This is an important aside example, which can contain any content.
</Aside>
<Aside title="Warning" variant="warning">
  This is a warning aside example, which can contain any content.
</Aside>
<Aside title="Caution" variant="caution">
  This is a caution aside example, which can contain any content.
</Aside>

<div class="flex gap-2">
  <Badge text="Default Badge" />
  <Badge text="Note Badge" variant="note" icon="note" />
  <Badge text="Tip Badge" variant="tip" icon="tip" />
  <Badge text="Important Badge" variant="important" icon="important" />
  <Badge text="Warning Badge" variant="warning" icon="warning" />
  <Badge text="Caution Badge" variant="caution" icon="caution" />
</div>

<div class="flex gap-2">
  <Badge text="Amazon Badge" icon="amazon" />
  <Badge text="Apple Badge" icon="apple" />
  <Badge text="Google Badge" icon="google" />
</div>

<div class="flex gap-2">
  <Badge text="Default Badge" variant="default" />
  <Badge text="Note Badge" variant="note" />
  <Badge text="Tip Badge" variant="tip" />
  <Badge text="Important Badge" variant="important" />
  <Badge text="Warning Badge" variant="warning" />
  <Badge text="Caution Badge" variant="caution" />
</div>

<Card title="Amazon Card" icon="amazon">
  This is an amazon card example, which can contain any content.
</Card>
<Card title="Apple Card" icon="apple">
  This is an apple card example, which can contain any content.
</Card>
<Card title="Google Card" icon="google">
  This is a google card example, which can contain any content.
</Card>

<LinkCard
  href="https://www.amazon.com"
  title="Open Amazon"
  description="Click here to open Amazon"
  icon="amazon"
/>
<LinkCard
  href="https://www.apple.com"
  title="Open Apple"
  description="Click here to open Apple"
  icon="apple"
/>
<LinkCard
  href="https://www.google.com"
  title="Open Google"
  description="Click here to open Google"
  icon="google"
/>

<div class="flex flex-col">
  <LinkCard
    href="/blog/markdown-example"
    title="Default"
    description="Use the default link card"
    variant="default"
  />
  <LinkCard
    href="/blog/markdown-example"
    title="Note"
    description="Use the note link card"
    variant="note"
  />
  <LinkCard
    href="/blog/markdown-example"
    title="Tip"
    description="Use the tip link card"
    variant="tip"
  />
  <LinkCard
    href="/blog/markdown-example"
    title="Important"
    description="Use the important link card"
    variant="important"
  />
  <LinkCard
    href="/blog/markdown-example"
    title="Warning"
    description="Use the warning link card"
    variant="warning"
  />
  <LinkCard
    href="/blog/markdown-example"
    title="Caution"
    description="Use the caution link card"
    variant="caution"
  />
</div>

```ts title=hello.ts
console.log("Hello world!");
```

```ts "console"
console.log("Hello");
console.log("world!");
```

```ts {3, 5-7}
import { MarkdownInstance } from "astro";

export const formatDate = (pubDate: string) => {
  var options: Intl.DateTimeFormatOptions = {
    weekday: 'short',
    year: 'numeric',
    month: 'long',
    day: 'numeric'
};

  return new Date(pubDate).toLocaleDateString('en-US', options);
}

export const sortPostsByDate = (a: MarkdownInstance<any>, b: MarkdownInstance<any>) => {
  const pubDateA = new Date(a.frontmatter.pubDate);
  const pubDateB = new Date(b.frontmatter.pubDate);
  if (pubDateA < pubDateB) {
    return 1;
  }
  if(pubDateA > pubDateB) {
    return -1;
  }
  return 0;
}
```

```ts ins={3, 5-7} del={6-8, 17-22}
import { MarkdownInstance } from "astro";

export const formatDate = (pubDate: string) => {
  var options: Intl.DateTimeFormatOptions = {
    weekday: 'short',
    year: 'numeric',
    month: 'long',
    day: 'numeric'
};

  return new Date(pubDate).toLocaleDateString('en-US', options);
}

export const sortPostsByDate = (a: MarkdownInstance<any>, b: MarkdownInstance<any>) => {
  const pubDateA = new Date(a.frontmatter.pubDate);
  const pubDateB = new Date(b.frontmatter.pubDate);
  if (pubDateA < pubDateB) {
    return 1;
  }
  if(pubDateA > pubDateB) {
    return -1;
  }
  return 0;
}
```

```ts showLineNumbers
console.log("Hello");
console.log("world!");
```

```ts collapse={4-6}
export const sortPostsByDate = (a: MarkdownInstance<any>, b: MarkdownInstance<any>) => {
  const pubDateA = new Date(a.frontmatter.pubDate);
  const pubDateB = new Date(b.frontmatter.pubDate);
  if (pubDateA < pubDateB) {
    return 1;
  }
  if(pubDateA > pubDateB) {
    return -1;
  }
  return 0;
}
```

```tsx title=file.tsx "return" "React" showLineNumbers collapse={2-6} ins={15-20, 27-32} del={35-40, 47-52}
const binaryStringToArray = (binaryString: string | undefined) => {
  if (!binaryString) {
    return [];
  }

  return binaryString.split("").map((char) => parseInt(char, 10));
};


const IChingIcon = ({ base, value }: IconProps) => {
  const valueArray = binaryStringToArray(value);

  return (
    <svg
      key={value}
      fill="none"
      height={base ? "24" : "48"}
      viewBox={base ? "0 0 24 24" : "0 0 24 48"}
      width="24"
      xmlns="http://www.w3.org/2000/svg"
    >
      {valueArray.map((value, index) => {
        if (value === 0) {
          return (
            <React.Fragment key={index}>
              <rect
                key={`left-${index}`}
                fill="currentColor"
                height="4"
                width="10"
                x="0"
                y={8 * index + 2}
              />
              <rect
                key={`right-${index}`}
                fill="currentColor"
                height="4"
                width="10"
                x="14"
                y={8 * index + 2}
              />
            </React.Fragment>
          );
        } else {
          return (
            <rect
              key={index}
              fill="#FF0000"
              height="4"
              width="24"
              x="0"
              y={8 * index + 2}
            />
          );
        }
      })}
    </svg>
  );
};
```

<Collapse title="Q: Amazon related questions" icon="amazon">
  A: This is an example of a collapse component using the Amazon icon.
</Collapse>
<Collapse title="Q: Apple related questions" icon="apple">
  A: This is an example of a collapse component using the Apple icon.
</Collapse>
<Collapse title="Q: Google related questions" icon="google">
  A: This is an example of a collapse component using the Google icon.
</Collapse>

<Collapse title="Q: How is the default style?" variant="default">
  A: This is a default-style collapse component example, suitable for most scenarios.
</Collapse>
<Collapse title="Q: How is the note style?" variant="note">
  A: This is a note-style collapse component example, suitable for displaying learning notes.
</Collapse>
<Collapse title="Q: How is the tip style?" variant="tip">
  A: This is a tip-style collapse component example, suitable for displaying useful tips.
</Collapse>
<Collapse title="Q: How is the important style?" variant="important">
  A: This is an important-style collapse component example, used to highlight key information.
</Collapse>
<Collapse title="Q: How is the warning style?" variant="warning">
  A: This is a warning-style collapse component example, used to remind of important considerations.
</Collapse>
<Collapse title="Q: How is the caution style?" variant="caution">
  A: This is a caution-style collapse component example, used to display dangerous warnings.
</Collapse>

<Collapse title="Q: How to start learning React?" variant="tip">
  **A:** Follow these steps to learn:

  1. Master JavaScript fundamentals
  2. Learn JSX syntax
  3. Understand component concepts
  4. Practice state management
  5. Learn React Hooks

  <Card title="Learning Resources" variant="tip">
    Here are some recommended resources:
    - Official React documentation
    - FreeCodeCamp React course
    - React patterns and best practices
  </Card>
</Collapse>

<Collapse title="Q: What's the difference between React and Vue?" variant="note">
  **A:** Main differences include:

  | Feature | React | Vue |
  |---------|-------|-----|
  | **Learning curve** | Steeper | Easier |
  | **Template syntax** | JSX | Templates |
  | **State management** | Redux/Context | Vuex/Pinia |
  | **Ecosystem** | Larger | Streamlined |

  <Card title="Code Example" variant="note">
    React component:
    ```jsx
    function Hello({ name }) {
      return <h1>Hello, {name}!</h1>;
    }
    ```

    Vue component:
    ```vue
    <template>
      <h1>Hello, {{ name }}!</h1>
    </template>
    ```
  </Card>
</Collapse>

<Collapse title="Q: How to optimize React application performance?" variant="important" defaultExpanded={true}>
  **A:** Performance optimization strategies include:

  - Use React.memo for component memoization
  - Properly use useMemo and useCallback
  - Implement code splitting and lazy loading
  - Avoid unnecessary re-renders
  - Optimize bundle size and loading times

  <Card title="Performance Tips" variant="important">
    ### Quick optimization checklist:

    ✅ Use React.memo for expensive components

    ✅ Implement virtual scrolling for large lists

    ✅ Use lazy loading for routes and components

    ✅ Optimize images and static assets

    ```javascript
    // Example: Memoized component
    const ExpensiveComponent = React.memo(({ data }) => {
      return <div>{/* expensive rendering */}</div>;
    });
    ```
  </Card>
</Collapse>