<AuthorsList
  post={{
    authors: ['andre-lademann', 'dominik-fries'],
    title: 'Beispiel-Artikel',
    excerpt: 'Ein Beispiel-Artikel'
  }}
  variant="default"
/>

<BlogCard
  post={{
    id: 'example-post',
    data: {
      title: 'Beispiel-Artikel',
      excerpt: 'Dies ist ein Beispiel-Artikel',
      image: '~/assets/images/blog/2024/default.png',
      publishDate: new Date('2024-01-15')
    }
  }}
/>

<BlogFilter
tags={[
  { slug: 'cloud', title: 'Cloud' },
  { slug: 'kafka', title: 'Kafka' },
  { slug: 'data', title: 'Data' },
]}
/>

<PageGrid
  pages={[
    {
      id: 'example-1',
      data: { title: 'Seite 1', excerpt: 'Beschreibung 1' }
    },
    {
      id: 'example-2',
      data: { title: 'Seite 2', excerpt: 'Beschreibung 2' }
    }
  ]}
  icon="tabler:file"
/>

<PageGridItem
page={{
  id: 'example',
  data: { title: 'Beispiel', excerpt: 'Beschreibung' }
}}
icon="tabler:file"
/>

<PostContent
  post={{
    Content: () => <div>Post-Inhalt hier...</div>,
    title: 'Beispiel-Post',
    excerpt: 'Beschreibung'
  }}
/>

<PostFooter
  post={{
    id: 'example-post',
    title: 'Beispiel-Post',
    tags: ['cloud', 'aws']
  }}
/>

<PostHeader
  post={{
    title: 'Beispiel-Post',
    excerpt: 'Beschreibung',
    image: '/images/example.jpg',
    authors: ['max-mustermann'],
    publishDate: new Date('2024-01-15'),
    tags: [{ slug: 'cloud', title: 'Cloud' }]
  }}
/>

<SeriesNav
items={[
  { step: '1', slug: 'serie-teil-1', title: 'Teil 1' },
  { step: '2', slug: 'serie-teil-2', title: 'Teil 2' },
  { step: '3', slug: 'serie-teil-3', title: 'Teil 3' }
]}
currentHref="/blog/serie-teil-2"
title="Meine Serie"
/>

<Analytics />

<ApplyColorMode />

<AstroIcon name="mail" size={24} />
<AstroIcon name="brand-linkedin" size={32} />
<AstroIcon name="arrow-right" size={20} class="text-primary" />

<AstroIcon name="mail" size={16} />
<AstroIcon name="mail" size={24} />
<AstroIcon name="mail" size={32} />
<AstroIcon name="mail" size={48} />
<AstroIcon name="mail" size={64} />

<AstroIcon name="mail" size={32} class="text-primary" />
<AstroIcon name="mail" size={32} class="text-red-500" />
<AstroIcon name="mail" size={32} class="text-blue-600" />
<AstroIcon name="mail" size={32} class="text-green-500" />
<AstroIcon name="mail" size={32} class="text-gray-400" />

<AstroIcon name="mail" size={32} />
<AstroIcon name="brand-linkedin" size={32} />
<AstroIcon name="arrow-right" size={32} />

<button class="flex items-center gap-2 px-4 py-2 bg-primary text-white rounded">
<AstroIcon name="mail" size={20} />
E-Mail senden
</button>

<a href="#" class="flex items-center gap-2 text-primary hover:underline">
LinkedIn Profil
<AstroIcon name="brand-linkedin" size={18} />
</a>

<a href="#" class="flex items-center gap-2 text-gray-700 hover:text-primary">
Weiterlesen
<AstroIcon name="arrow-right" size={16} class="text-primary" />
</a>

<BasicScripts />

<CommonMeta />

<Debug
data={{ name: "Test", value: 123 }}
label="example"
title="Debug Output"
renderUI={true}
logInServer={true}
logInBrowser={false}
stringifySpaces={2}
language="json"
isCopyEnabled={true}
/>

<FeedbackButtonCompact />

<Image src="~/assets/images/default.png"
  alt="Lorem ipsum"
  width={800}
  height={600} />

<Image
  src="~/assets/images/default.png"
  alt="Lorem ipsum"
  imageType="hero"
  imageSize="full"
/>

<Image
  src="~/assets/images/default.png"
  fallbackSrc="~/assets/images/default.png"
  alt="Lorem ipsum"
  progressive
  sizes="(max-width: 768px) 100vw, 600px"
  widths={[400, 600, 900]}
/>

import LegalNoticeModal from '~/components/common/LegalNoticeModal.astro';

<LegalNoticeModal />

{/* Trigger irgendwo auf der Seite: */}
<button type="button" data-open-legal-notice-modal>
Datenschutzerklärung
</button>

<Metadata
  title="Lorem ipsum"
  description="Dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat."
  openGraph={{ images: [{ url: '~/assets/images/default.png', alt: 'Lorem ipsum' }] }}
  twitter={{ site: '@lorem', creator: '@ipsum' }}
/>

<SiteVerification />

<SocialShare />

<TextGrid
title="Mehrspaltiger Text"
subtitle="Beispiel für TextGrid"
tagline="Layout"
count={2}
isDark={false}
>
<p>Dies ist ein Beispiel für mehrspaltigen Text. Die TextGrid-Komponente verwendet CSS Columns, um Text automatisch in mehrere Spalten aufzuteilen.</p>
<p>Der Text wird automatisch über die Spalten verteilt, ähnlich wie in einer Zeitung oder einem Magazin.</p>
</TextGrid>

<ToggleMenu />

<ToggleTheme />

import UsercentricsCmp from '~/components/common/UsercentricsCmp.astro';

<head>
<UsercentricsCmp />
</head>

<VideoEmbed
url="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
title="Lorem ipsum"
subtitle="Dolor sit amet, consetetur sadipscing elitr"
thumbnailPosition="right"
classes={{
  container: 'my-custom-container',
  content: 'my-custom-content',
  video: 'my-custom-video'
}}
/>

<VideoEmbed
url="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
title="Consetetur sadipscing"
subtitle="Elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat."
thumbnailPosition="right"
/>

<VideoEmbed
url="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
sectionTitle="Lorem ipsum"
sectionSubtitle="Dolor sit amet, consetetur sadipscing elitr"
title="Sed diam nonumy eirmod"
subtitle="Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
thumbnailPosition="left"
/>

<VideoGallery
title="Lorem ipsum"
subtitle="Dolor sit amet, consetetur sadipscing elitr"
videos={[
  {
    url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
    title: "Lorem ipsum",
    subtitle: "Dolor sit amet"
  },
  {
    url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
    title: "Consetetur sadipscing",
    subtitle: "Elitr, sed diam"
  }
]}
columns={2}
classes={{
  container: 'my-custom-container',
  grid: 'my-custom-grid',
  item: 'my-custom-item'
}}
/>

<VideoGallery
title="Lorem ipsum"
subtitle="Dolor sit amet, consetetur sadipscing elitr"
videos={videos}
columns={1}
/>

<VideoGallery
title="Lorem ipsum"
subtitle="Dolor sit amet, consetetur sadipscing elitr"
videos={videos}
columns={3}
/>

<Form
  formName="contact-default"
  inputs={[
    { type: 'text', name: 'name', label: 'Name', placeholder: 'Lorem ipsum' },
    { type: 'email', name: 'email', label: 'E-Mail', placeholder: 'Dolor sit amet' },
    { type: 'tel', name: 'phone', label: 'Telefon', placeholder: '+49 123 456789', required: true },
    { type: 'hidden', name: 'context', value: 'docs-demo' }
  ]}
  textarea={{ label: 'Nachricht', name: 'message', placeholder: 'Consetetur sadipscing elitr...', rows: 4 }}
  disclaimer={{ useStandardPrivacy: true, required: true }}
  button="Lorem ipsum"
  description="Sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."
/>

<TrainingRegistrationForm
training={{
  id: '1',
  slug: 'example-training',
  title: 'Cloud-Architektur Best Practices',
  description: 'Ein Training über moderne Cloud-Architekturen',
  duration: '2 Tage',
  level: 'Intermediate',
  format: ['Remote', 'Vor Ort'],
  price: '1.500 €',
  learningOutcomes: ['Outcome 1', 'Outcome 2']
}}
allTrainings={[
  { id: '1', slug: 'training-1', title: 'Training 1', ... },
  { id: '2', slug: 'training-2', title: 'Training 2', ... }
]}
/>

<FormWebinarRegistration
webinar={{
  id: '1',
  slug: 'example-webinar',
  title: 'Cloud-Architektur Best Practices',
  duration: '60 Minuten',
  liveDate: '2024-01-15',
  liveTime: '14:00',
  attachments: [{ type: 'url', downloadUrl: 'https://example.com/recording', name: 'Aufzeichnung ansehen' }],
  keyTakeaways: ['Takeaway 1', 'Takeaway 2']
}}
/>

<Person
person={{
  id: 'max-mustermann',
  name: 'Max Mustermann',
  slug: 'max-mustermann',
  image: '/images/people/max-mustermann.jpg',
  jobTitle: 'Cloud Architect',
  location: 'Hamburg',
  worksFor: 'thinkport',
  cite: 'Cloud ist die Zukunft',
  skills: ['AWS', 'Azure', 'Kubernetes'],
  tags: ['Architecture', 'Cloud'],
  sameAs: ['https://linkedin.com/in/max-mustermann']
}}
companies={[
  { id: 'thinkport', name: 'Thinkport GmbH' }
]}
isShowSkills={true}
isShowTags={true}
maxSkills={12}
maxTags={12}
/>