Using Blog Components

This post demonstrates how to use the custom MDX components to create rich, interactive blog posts.

Introduction

The blog platform includes a variety of custom components that make it easy to create engaging content. Let's explore how to use them.

Code Examples

Here's a simple React component:

import React from "react";

interface ButtonProps {
  label: string;
  onClick: () => void;
  variant?: "primary" | "secondary";
}

export function Button({ label, onClick, variant = "primary" }: ButtonProps) {
  const baseClasses = "px-4 py-2 rounded-md font-medium";
  const variantClasses = {
    primary: "bg-blue-600 text-white hover:bg-blue-700",
    secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300",
  };

  return (
    <button
      className={`${baseClasses} ${variantClasses[variant]}`}
      onClick={onClick}
    >
      {label}
    </button>
  );
}

Project Structure

This is how a typical Next.js project might be structured:

Keyboard Shortcuts

Here are some useful keyboard shortcuts for VS Code:

Color System

Our design system uses the following color palette:

Interactive Elements

Tabs

Accordion

Project Timeline

Here's how the blog platform evolved over time:

Quotes and Callouts

Conclusion

These components make it easy to create rich, interactive blog posts without having to write complex HTML or CSS. For more information on how to use these components, check out the component documentation.