# Parts: CompanyInfo (/themes/sdk/reference/content/parts-2)

```ts
import { … } from '@poltura/theme-sdk/content';
```

## `CompanyInfo` [#companyinfo]

The company's registered details and bank account side by side, labelled in the page language.

```ts
CompanyInfo(props: CompanyInfoProps): ReactElement | null
```

**Props:** [`CompanyInfoProps`](/themes/sdk/reference/content/types-3#companyinfoprops)

<Tab value='Example'>

```tsx
import { CompanyInfo } from '@poltura/theme-sdk/content';
import { useStore } from '@poltura/theme-sdk/store';

export function LegalFooter() {
  const store = useStore();
  return <CompanyInfo company={store.company} bankAccount={store.bankAccount} />;
}
```

</Tab>
<Tab value='Source'>

```tsx title="source/company-info.tsx"
import type { ReactElement, ReactNode } from 'react';
import { Building2, FileText, Landmark, MapPin } from 'lucide-react';
import type { CompanyInfoProps } from '@poltura/theme-sdk/content';
import { useTranslations } from '@poltura/theme-sdk/i18n';
import type { BankAccount, CompanyRegistration, StoreCompany } from '@poltura/theme-sdk/store';

const FIELD_LABEL = 'block text-sm font-semibold uppercase tracking-wider text-foreground/70 mb-1';

function ColumnHeading({ icon, children }: { icon: ReactNode; children: ReactNode }) {
  return (
    <div className='flex items-center gap-3 mb-6'>
      <div className='p-2 bg-primary/10 rounded-lg'>{icon}</div>
      <h3 className='text-xl font-bold'>{children}</h3>
    </div>
  );
}

function filled(value: string | null | undefined): value is string {
  return (value ?? '').trim() !== '';
}

function RegistrationEntry({ entry }: { entry: CompanyRegistration }) {
  return (
    <div>
      <span className={FIELD_LABEL}>{entry.label}</span>
      <p className='font-mono text-sm'>{entry.value}</p>
    </div>
  );
}

function filledRegistrations(company: StoreCompany): CompanyRegistration[] {
  return company.registrations.filter((entry) => filled(entry.value));
}

function hasCompanyDetails(company: StoreCompany): boolean {
  return filled(company.name) || filled(company.address) || filledRegistrations(company).length > 0;
}

function hasBankDetails(bankAccount: BankAccount): boolean {
  return [bankAccount.bankName, bankAccount.number, bankAccount.iban, bankAccount.bic].some(filled);
}

function CompanyColumn({ company }: { company: StoreCompany }) {
  const t = useTranslations('contactPage.companyInfo');
  const registrations = filledRegistrations(company);
  const numbered = registrations.filter((entry) => entry.kind !== 'registryCourt');
  const courts = registrations.filter((entry) => entry.kind === 'registryCourt');

  return (
    <div className='space-y-6'>
      <ColumnHeading icon={<Building2 className='w-5 h-5 text-primary' />}>
        {t('company')}
      </ColumnHeading>
      <div className='space-y-4'>
        {filled(company.name) ? (
          <div>
            <span className={FIELD_LABEL}>{t('companyName')}</span>
            <p className='font-medium'>{company.name}</p>
          </div>
        ) : null}
        {filled(company.address) ? (
          <div>
            <span className={FIELD_LABEL}>{t('address')}</span>
            <div className='flex items-center gap-2'>
              <MapPin className='w-4 h-4 text-foreground/50' />
              <p className='font-medium'>{company.address}</p>
            </div>
          </div>
        ) : null}
        {numbered.length > 0 ? (
          <div className='grid grid-cols-2 gap-4'>
            {numbered.map((entry) => (
              <RegistrationEntry key={entry.kind} entry={entry} />
            ))}
          </div>
        ) : null}
        {courts.map((entry) => (
          <div key={entry.kind}>
            <span className={FIELD_LABEL}>{entry.label}</span>
            <div className='flex items-center gap-2'>
              <FileText className='w-4 h-4 text-foreground/50' />
              <p className='font-medium'>{entry.value}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function BankColumn({ bankAccount }: { bankAccount: BankAccount }) {
  const t = useTranslations('contactPage.companyInfo');
  return (
    <div className='space-y-6'>
      <ColumnHeading icon={<Landmark className='w-5 h-5 text-primary' />}>
        {t('bank')}
      </ColumnHeading>
      <div className='bg-muted p-6 rounded-lg space-y-4'>
        {filled(bankAccount.bankName) ? (
          <div className='flex justify-between items-center pb-2 border-b border-border/50'>
            <span className='text-foreground/80 text-sm font-medium'>{t('bankName')}</span>
            <span className='font-bold'>{bankAccount.bankName}</span>
          </div>
        ) : null}
        {filled(bankAccount.number) ? (
          <div className='space-y-1'>
            <span className='text-sm font-semibold uppercase tracking-wider text-foreground/70'>
              {t('accountNumber')}
            </span>
            <p className='font-mono font-medium text-lg tracking-wide'>{bankAccount.number}</p>
          </div>
        ) : null}
        {filled(bankAccount.iban) ? (
          <div className='space-y-1'>
            <span className='text-sm font-semibold uppercase tracking-wider text-foreground/70'>
              {t('iban')}
            </span>
            <p className='font-mono text-sm text-foreground/80 tracking-tight'>
              {bankAccount.iban}
            </p>
          </div>
        ) : null}
        {filled(bankAccount.bic) ? (
          <div className='flex justify-between items-center pt-2'>
            <span className='text-sm font-semibold uppercase tracking-wider text-foreground/70'>
              {t('bic')}
            </span>
            <span className='font-mono font-medium'>{bankAccount.bic}</span>
          </div>
        ) : null}
      </div>
    </div>
  );
}

export function CompanyInfo({ company, bankAccount }: CompanyInfoProps): ReactElement | null {
  const showCompany = company !== null && hasCompanyDetails(company);
  const showBank = bankAccount !== null && hasBankDetails(bankAccount);
  if (!showCompany && !showBank) return null;

  return (
    <div className='grid md:grid-cols-2 gap-12'>
      {showCompany ? <CompanyColumn company={company} /> : null}
      {showBank ? <BankColumn bankAccount={bankAccount} /> : null}
    </div>
  );
}
```

</Tab>