2bf5486112
* feat: Data mocking for studies * feat: Data Mocking for Study List * fix empty study position * rename variables for numOfStudies * fix studies query * remove alert :| * minor refactor * split utils and refactoring * refactoring -- format, clean up icons, mdx mock
49 lines
1.1 KiB
Plaintext
49 lines
1.1 KiB
Plaintext
---
|
|
name: Study List
|
|
menu: Views
|
|
route: views/studyList
|
|
---
|
|
|
|
import { useState } from 'react'
|
|
import { Playground, Props } from 'docz';
|
|
import StudyList from './';
|
|
import Button from '../../components/Button';
|
|
import { getMockedStudies } from '../../utils/'
|
|
|
|
# StudyList
|
|
|
|
Description...
|
|
|
|
## Import
|
|
|
|
```javascript
|
|
import { StudyList } from '@ohfi/ui';
|
|
```
|
|
|
|
## StudyList
|
|
|
|
<Playground>
|
|
{() => {
|
|
const [studies, setStudies] = useState([])
|
|
const handleStudyList = (number) => {
|
|
const studies = getMockedStudies(number)
|
|
setStudies(studies)
|
|
}
|
|
return (
|
|
<div>
|
|
<div className="bg-white p-4">
|
|
<Button className="mr-2" onClick={() => handleStudyList(0)}>0 Studies</Button>
|
|
<Button className="mr-2" onClick={() => handleStudyList(50)}>50 Studies</Button>
|
|
<Button className="mr-2" onClick={() => handleStudyList(100)}>100 Studies</Button>
|
|
<Button className="mr-2" onClick={() => handleStudyList(1000)}>1000 Studies</Button>
|
|
</div>
|
|
<StudyList studies={studies} />
|
|
</div>
|
|
);
|
|
}}
|
|
</Playground>
|
|
|
|
## Properties
|
|
|
|
<Props of={StudyList} />
|