Paragraph

'use client';
import { Paragraph } from '@/ui/Paragraph';

export function ParagraphDemo() {
  return (
    <Paragraph
      className="w-full max-w-780"
      description="<p>Nestled between the Mediterranean Sea and the mountains, our resort offers an unforgettable all-inclusive experience. Enjoy world-class cuisine, daily activities, and breathtaking views every morning.</p><p>Our dedicated G.Os are here to ensure every moment of your stay is filled with joy and discovery. From water sports to evening shows, there is something for every member of the family.</p>"
      image={{
        alt: 'Mountains above the clouds',
        src: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=960&q=70',
      }}
      labels={{ expand: 'See more', reduce: 'See less' }}
      subtitle="French Alps"
      title="Grand Massif Samoëns Morillon"
    />
  );
}

'use client';
import { Paragraph } from '@/ui/Paragraph';

const description =
  '<p>A day packed with activities, from sunrise yoga to the evening show. Join our G.Os for a unique experience shared with the whole family.</p>';
const labels = { expand: 'See more', reduce: 'See less' };

export function ParagraphThemesDemo() {
  return (
    <div className="w-full max-w-780 space-y-40">
      <Paragraph
        description={description}
        image={{
          alt: 'Portrait of the resort chef',
          src: 'https://images.unsplash.com/photo-1577219491135-ce391730fb2c?w=480&q=70',
        }}
        labels={labels}
        subtitle="Executive chef"
        theme="circle"
        title="Meet Julien"
      />
      <Paragraph
        description={description}
        image={{
          alt: 'Evening show on stage',
          src: 'https://images.unsplash.com/photo-1514525253161-7a46d19cd819?w=480&q=70',
        }}
        labels={labels}
        reversed
        subtitle="Every Friday, 9 pm"
        theme="event"
        title="Evening show"
      />
    </div>
  );
}

'use client';
import { Paragraph } from '@/ui/Paragraph';

export function ParagraphButtonDemo() {
  return (
    <Paragraph
      as="article"
      button={{ href: '#all-inclusive', label: 'Discover our all-inclusive offer' }}
      className="w-full max-w-780"
      description="<p>Meals, drinks, activities and kids clubs: everything is included so that you only have to enjoy your holidays. We're adding more text here to reaaaally pad out the length of the description for demonstration purposes. Does that feel long enough for you? Surely it is now? Okay just a bit more text to make it even longer. There. Perfect.</p>"
      labels={{ expand: 'See more', reduce: 'See less' }}
      title="All-inclusive, the Club Med way"
    />
  );
}