Inline Citation

'use client';

import * as React from 'react';
import {
  InlineCitation,
  InlineCitationCard,
  InlineCitationCardTrigger,
  InlineCitationCardBody,
  InlineCitationCarousel,
  InlineCitationCarouselContent,
  InlineCitationCarouselItem,
  InlineCitationCarouselPrev,
  InlineCitationCarouselNext,
  InlineCitationCarouselIndex,
  InlineCitationSource,
  InlineCitationQuote,
  InlineCitationCarouselHeader, 
} from '@/components/ui/inline-citation';

export default function DemoInlineCitation() {
  const sources = [
    {
      title: 'OpenAI',
      url: 'https://openai.com',
      description: 'OpenAI is an AI research and deployment company. Our mission is to ensure that artificial general intelligence benefits all of humanity.',
    },
    {
      title: 'React',
      url: 'https://react.dev',
      description: 'A JavaScript library for building user interfaces, enabling developers to create large web applications that can change data without reloading the page.',
    },
    {
      title: 'Tailwind CSS',
      url: 'https://tailwindcss.com',
      description: 'A utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup.',
    },
    {
      title: 'Next.js',
      url: 'https://nextjs.org',
      description: 'The React Framework for Production. Next.js gives you the best developer experience with all the features you need for production.',
    },
    {
      title: 'Vercel',
      url: 'https://vercel.com',
      description: 'Vercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration.',
    },
  ];

  return (
    <div className="p-8 space-y-4">
      <p>
        Here is an inline citation example{' '}
        <InlineCitation>
          <InlineCitationCard>
            <InlineCitationCardTrigger sources={sources.map(s => s.url)} />
            <InlineCitationCardBody>
              <InlineCitationCarousel>
                <div className="absolute top-0 left-0 right-0 z-10">
                  <InlineCitationCarouselHeader>
                    <InlineCitationCarouselPrev />
                    <InlineCitationCarouselIndex />
                    <InlineCitationCarouselNext />
                  </InlineCitationCarouselHeader>
                </div>
                <InlineCitationCarouselContent className="pt-12">
                  {sources.map((source, idx) => (
                    <InlineCitationCarouselItem key={idx}>
                      <InlineCitationSource
                        title={source.title}
                        url={source.url}
                        description={source.description}
                      />
                      <InlineCitationQuote>
                        Example quote from {source.title}.
                      </InlineCitationQuote>
                    </InlineCitationCarouselItem>
                  ))}
                </InlineCitationCarouselContent>
              </InlineCitationCarousel>
            </InlineCitationCardBody>
          </InlineCitationCard>
        </InlineCitation>
        . You can hover to view more sources.
      </p>
    </div>
  );
}