import React from 'react';
import { View, RichText } from '@ray-js/ray';

export default function Demo() {
  return (
    <View style={{ padding: 20 }}>
      <RichText
        nodes='<div><h2 style="color: #333;">Title</h2><p style="color: #666; line-height: 1.6;">This is a piece of rich text content</p></div>'
      />
    </View>
  );
}

import React from 'react';
import { View, RichText } from '@ray-js/ray';

export default function Demo() {
  const htmlString = `
    <div style="padding: 10px;">
      <h1 style="color: #007aff; margin-bottom: 10px;">Welcome to RichText</h1>
      <p style="color: #333; line-height: 1.8;">
        Life is <i>like</i> a box of <b style="color: red;">chocolates</b>.
      </p>
      <p style="color: #666; margin-top: 10px;">
        You never know what you are gonna get.
      </p>
    </div>
  `;

  return (
    <View style={{ padding: 20 }}>
      <RichText nodes={htmlString} />
    </View>
  );
}

import React from 'react';
import { View, RichText } from '@ray-js/ray';

export default function Demo() {
  const nodes = [
    { type: 'text' as const, text: 'This is the first paragraph.' },
    { type: 'text' as const, text: 'This is the second paragraph, supports HTML entities such as &.' },
  ];

  return (
    <View style={{ padding: 20 }}>
      <RichText nodes={nodes} />
    </View>
  );
}

import React from 'react';
import { View, RichText } from '@ray-js/ray';

export default function Demo() {
  const html = `
    <div style="padding: 10px;">
      <p>Click the link text below to see console output:</p>
      <a style="color: #007aff; text-decoration: underline;">Clickable link</a>
    </div>
  `;

  return (
    <View style={{ padding: 20 }}>
      <RichText
        nodes={html}
        onSelect={(e) => console.log('Tag clicked:', e.detail.name, e.detail.attrs)}
      />
    </View>
  );
}