# Regula React UI components

This package contains React UI components for Regula products.

## Document-reader processing result tabs

Here is an example of using components to display the results of document-reader processing.

```typescript jsx
import { FC } from 'react'
import { createRoot } from 'react-dom/client'
import {
  DocReaderContainer,
  Status,
  Info,
  Graphics,
  Rfid,
  ResponseViewer,
  RequestViewer,
  Logs,
  PortraitsComparison,
  Tabs,
} from '@regulaforensics/ui-components'


interface ProcessingResultsProps {
  response: unknown
  request: any
  language: string
}

const ResultsTab = () => (
  <>
    <Status />
    <Info />
    <Graphics />
    <Rfid />
    <PortraitsComparison />
  </>
)

const ProcessingResultTabs: FC<ProcessingResultsProps> = ({ response, request, language }) => (
  <DocReaderContainer response={ response } request={ request } language={ language }>
    <Tabs
      type={ 'card' }
      items={[
        { id: 'Results', label: 'Results', children: <ResultsTab /> },
        { id: 'Request', label: 'Request', children: <RequestViewer /> },
        { id: 'Response', label: 'Response', children: <ResponseViewer /> },
        { id: 'Logs', label: 'Logs', children: <Logs /> }
      ]}
    />
  </DocReaderContainer>
)

const RESPONSE = YOUR_RESPONSE_DATA
const REQUEST = YOUR_REQUEST_DATA

const Results = () => (
  <ProcessingResultTabs 
    response={ RESPONSE } 
    request={ REQUEST } 
    language={ 'en' } 
  />
)

const root = createRoot(document.getElementById('root'));
root.render(<Results />);
```

## Document-reader processing result tabs

By default, styles are automatically imported into the package build and there is no need to make additional style imports. But there are times when you need to control the style import process yourself:

```typescript
import '@regulaforensics/ui-components/styles' // connect styles where you need to

import { Collapse } from '@regulaforensics/ui-components/core' // use the components
```
