FAQ — With Contact Sidebar

Installation

Variants

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

interface FaqEntry {
  q: string
  a: string
}

Files installed (2)

• src/app/components/blocks/faq-contact-sidebar/faq-contact-sidebar.component.ts6.2 kB

  Copy

  // Accordion of answers beside a sticky support card offering a named contact,
  // response-time expectation, and a link to the docs. Port of the React block 1:1.
  import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
  import { ArrowRight, BookOpen, LucideAngularModule, MessageSquare } from 'lucide-angular'
  import { cn } from '@/lib/utils'
  import {
    UiAccordionComponent,
    UiAccordionContentComponent,
    UiAccordionItemComponent,
    UiAccordionTriggerComponent,
  } from '@/ui/accordion/accordion.component'
  import { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'
  import { UiBadgeComponent } from '@/ui/badge/badge.component'
  import { UiButtonComponent } from '@/ui/button/button.component'
  import { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'
  import { UiSeparatorComponent } from '@/ui/separator/separator.component'
  
  interface FaqEntry {
    q: string
    a: string
  }
  
  const faqs: FaqEntry[] = [
    {
      q: 'Can we trial it against production data?',
      a: 'Yes, and we recommend it. The connection is read-only, so a trial runs against the real warehouse without a staging copy or a data loading step.',
    },
    {
      q: 'Who owns the definitions after hand-over?',
      a: 'You do. They live in your repository, reviewed by your team. If the contract ends, the definitions and their history stay where they are.',
    },
    {
      q: 'What happens if the warehouse is down?',
      a: 'Materialised aggregates keep serving with a visible freshness stamp. Live queries fail loudly rather than returning a stale number silently.',
    },
    {
      q: 'Do you support on-premise warehouses?',
      a: 'Postgres and SQL Server over a private link, yes. Anything requiring an agent inside your network is on the roadmap but not shipped.',
    },
    {
      q: 'How are restatements handled?',
      a: 'A restatement is a definition change with an effective date. Prior periods are recomputed and the change log records who approved it and when.',
    },
  ]
  
  @Component({
    changeDetection: ChangeDetectionStrategy.Eager,
    selector: 'ui-faq-contact-sidebar, [ui-faq-contact-sidebar]',
    standalone: true,
    // React renders the root <section> itself: the host stays out of layout and `class` goes to the root.
    host: { '[attr.class]': '"contents"' },
    imports: [
      LucideAngularModule,
      UiAccordionComponent,
      UiAccordionContentComponent,
      UiAccordionItemComponent,
      UiAccordionTriggerComponent,
      UiAvatarComponent,
      UiAvatarFallbackComponent,
      UiBadgeComponent,
      UiButtonComponent,
      UiCardComponent,
      UiCardContentComponent,
      UiSeparatorComponent,
    ],
    template: `
      <section data-slot="faq-contact-sidebar" [class]="rootClass">
        <div class="mx-auto max-w-6xl px-6 py-20 lg:py-28">
          <div class="grid gap-12 lg:grid-cols-[1.6fr_1fr] lg:gap-16">
            <div>
              <span ui-badge variant="secondary">FAQ</span>
              <h2 class="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">Before you book a call</h2>
              <p class="text-muted-foreground mt-3 text-lg">
                The five questions that come up most, answered without a form in the way.
              </p>
  
              <ui-accordion type="single" collapsible class="mt-8 w-full">
                @for (faq of faqs; track faq.q) {
                  <ui-accordion-item [value]="faq.q">
                    <button ui-accordion-trigger class="text-left font-medium">{{ faq.q }}</button>
                    <ui-accordion-content class="text-muted-foreground leading-relaxed">{{ faq.a }}</ui-accordion-content>
                  </ui-accordion-item>
                }
              </ui-accordion>
            </div>
  
            <!-- Sticky so it stays beside the list however far the accordion expands. -->
            <aside class="lg:sticky lg:top-24 lg:self-start">
              <div ui-card>
                <div ui-card-content class="p-6">
                  <div class="flex items-center gap-3">
                    <ui-avatar class="size-10">
                      <ui-avatar-fallback class="text-xs">DB</ui-avatar-fallback>
                    </ui-avatar>
                    <div class="min-w-0">
                      <p class="truncate text-sm font-medium">Daniel Brooks</p>
                      <p class="text-muted-foreground truncate text-xs">Solutions engineering</p>
                    </div>
                  </div>
  
                  <p class="text-muted-foreground mt-4 text-sm leading-relaxed">
                    Ask the awkward version of your question. An engineer answers, not a sales inbox.
                  </p>
  
                  <div class="mt-5 grid gap-2">
                    <button ui-button>
                      <lucide-icon [img]="MessageSquare" class="mr-2 size-4" aria-hidden="true" />
                      Ask a question
                    </button>
                    <button ui-button variant="outline">
                      <lucide-icon [img]="BookOpen" class="mr-2 size-4" aria-hidden="true" />
                      Read the docs
                    </button>
                  </div>
  
                  <ui-separator class="my-5" />
  
                  <dl class="space-y-2 text-xs">
                    <div class="flex items-center justify-between gap-3">
                      <dt class="text-muted-foreground">Median first reply</dt>
                      <dd class="font-medium">3 h 40 m</dd>
                    </div>
                    <div class="flex items-center justify-between gap-3">
                      <dt class="text-muted-foreground">Coverage</dt>
                      <dd class="font-medium">Mon–Fri, 08:00–20:00 UTC</dd>
                    </div>
                  </dl>
  
                  <button ui-button variant="link" class="mt-4 h-auto p-0 text-xs">
                    See the full FAQ
                    <lucide-icon [img]="ArrowRight" class="ml-1 size-3" aria-hidden="true" />
                  </button>
                </div>
              </div>
            </aside>
          </div>
        </div>
      </section>
    `,
  })
  export class UiFaqContactSidebarComponent {
    protected readonly ArrowRight = ArrowRight
    protected readonly BookOpen = BookOpen
    protected readonly MessageSquare = MessageSquare
  
    protected readonly faqs = faqs
  
    @Input('class') className?: string
  
    get rootClass(): string {
      return cn('bg-background', this.className)
    }
  }
  

• src/app/components/blocks/faq-contact-sidebar/index.ts0.1 kB

  Copy

Raw manifest:https://uipkge.dev/r/angular/faq-contact-sidebar.json