olivegroup-gamified1
Version:
sample des
902 lines (873 loc) • 33.4 kB
JavaScript
import React, { useState } from 'react';
import {
Form,
FloatingLabel,
Tabs,
Tab,
Button,
Card,
ListGroup,
Row,
Col,
} from 'react-bootstrap';
import { MultiSelect } from 'react-multi-select-component';
// Require Editor JS files.
import 'froala-editor/js/froala_editor.pkgd.min.js';
// Require Editor CSS files.
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';
// Include font-awesome css if required.
import 'font-awesome/css/font-awesome.css';
import 'froala-editor/js/third_party/font_awesome.min.js';
import 'froala-editor/js/plugins/char_counter.min.js';
import FroalaEditor from 'react-froala-wysiwyg';
const chkOptions = [
{ label: 'C1 - Cyber & Data Protection', value: 'C1 - Cyber & Data Protection' },
{ label: 'E1 - Soft Skills & Continuous Professional Development (CPD)', value: 'E1 - Soft Skills & Continuous Professional Development (CPD)' },
{ label: 'J1 - InternShip Program On Front End Developer', value: 'J1 - InternShip Program On Front End Developer'},
{ label: 'CT1 - Course Training materials', value: 'CT1 - Course Training materials'},
{ label: 'D1 - Course Document', value: 'D1 - Course Document'},
{ label: 'Q1 - Technical Evaluation', value: 'Q1 - Technical Evaluation'},
{ label: 'E2 - Advance Security Workshop', value: 'E2 - Advance Security Workshop'},
{ label: 'D2 - Course Completion Document', value: 'D2 - Course Completion Document'},
];
function getConfig() {
return {
theme: 'custom',
charCounterCount: true,
charCounterMax: 300,
fileAllowedTypes: ['image/png', 'image/gif', 'image/jpeg'],
fileInsertButtons: [],
fileUpload: false,
fontFamilySelection: false,
fontSize: [
'6',
'8',
'9',
'10',
'11',
'12',
'14',
'18',
'21',
'24',
'30',
'36',
'48',
'60',
'72',
'96',
],
fontSizeDefaultSelection: '14',
fontSizeSelection: true,
imagePaste: true,
editorClass: 'froala-wrapper',
fullPage: false,
htmlAllowComments: false,
htmlAllowedAttrs: [
'accept',
'accept-charset',
'accesskey',
'action',
'align',
'allowfullscreen',
'allowtransparency',
'alt',
'async',
'autocomplete',
'autofocus',
'background',
'bgcolor',
'border',
'charset',
'cellpadding',
'cellspacing',
'checked',
'cite',
'class',
'color',
'cols',
'colspan',
'content',
'contextmenu',
'controls',
'coords',
'data',
'data-.*',
'datetime',
'default',
'defer',
'dir',
'dirname',
'disabled',
'download',
'enctype',
'for',
'form',
'formaction',
'frameborder',
'headers',
'height',
'hidden',
'high',
'href',
'hreflang',
'icon',
'ismap',
'itemprop',
'keytype',
'kind',
'label',
'lang',
'language',
'list',
'loop',
'low',
'max',
'maxlength',
'media',
'method',
'min',
'mozallowfullscreen',
'multiple',
'muted',
'name',
'novalidate',
'open',
'optimum',
'pattern',
'ping',
'placeholder',
'playsinline',
'poster',
'preload',
'pubdate',
'radiogroup',
'readonly',
'rel',
'required',
'reversed',
'rows',
'rowspan',
'sandbox',
'scope',
'scoped',
'scrolling',
'seamless',
'selected',
'shape',
'size',
'sizes',
'span',
'start',
'src',
'step',
'summary',
'spellcheck',
'style',
'tabindex',
'target',
'title',
'type',
'translate',
'usemap',
'value',
'valign',
'webkitallowfullscreen',
'width',
'wrap',
],
htmlAllowedTags: [
'a',
'abbr',
'address',
'area',
'article',
'aside',
'b',
'base',
'bdi',
'bdo',
'blockquote',
'br',
'caption',
'cite',
'code',
'col',
'colgroup',
'datalist',
'dd',
'del',
'details',
'dfn',
'div',
'dl',
'dt',
'em',
'fieldset',
'footer',
'h1',
'h2',
'h3',
'h4',
'h5',
'h6',
'header',
'hgroup',
'hr',
'i',
'ins',
'kbd',
'label',
'legend',
'li',
'main',
'map',
'mark',
'menu',
'menuitem',
'meter',
'nav',
'ol',
'output',
'p',
'param',
'pre',
'progress',
'queue',
'rp',
'rt',
's',
'samp',
'section',
'small',
'span',
'strike',
'strong',
'sub',
'summary',
'sup',
'table',
'tbody',
'td',
'tfoot',
'th',
'thead',
'time',
'title',
'tr',
'track',
'u',
'ul',
'var',
'wbr',
'img',
],
htmlExecuteScripts: false,
placeholderText: 'Write something here…',
shortcutsEnabled: [
'show',
'bold',
'italic',
'underline',
'strikeThrough',
'indent',
'outdent',
'undo',
'redo',
'createLink',
],
linkAttributes: {},
linkList: [],
linkEditButtons: ['linkOpen', 'linkEdit', 'linkRemove'],
linkInsertButtons: [],
linkStyles: {},
linkMultipleStyles: false,
linkText: true,
tableCellMultipleStyles: false,
tableCellStyles: null,
tableColors: [],
tableEditButtons: [
'tableHeader',
'tableRemove',
'|',
'tableRows',
'tableColumns',
'-',
'tableCells',
'tableCellVerticalAlign',
'tableCellHorizontalAlign',
],
paragraphFormat: {
N: 'Normal',
H1: 'Heading 1',
H2: 'Heading 2',
H3: 'Heading 3',
H4: 'Heading 4',
PRE: 'Preformatted',
},
listAdvancedTypes: false,
attribution: false,
pluginsEnabled: [
'align',
'fontSize',
'link',
'lists',
'image',
'paragraphFormat',
'quote',
'table',
'url',
'fullscreen',
'colors',
'charCounter',
],
toolbarButtons: {
moreText: {
buttons: [
'paragraphFormat',
'bold',
'italic',
'underline',
'fontSize',
'clearFormatting',
'strikeThrough',
'subscript',
'superscript',
'textColor',
'backgroundColor',
],
buttonsVisible: 6,
},
moreParagraph: {
buttons: [
'alignLeft',
'alignCenter',
'alignRight',
'alignJustify',
'formatOL',
'formatUL',
'indent',
'outdent',
'quote',
],
buttonsVisible: 11,
},
moreRich: { buttons: ['insertLink', 'insertImage', 'insertTable'] },
moreMisc: { buttons: ['undo', 'redo', 'fullscreen'] },
showMoreButtons: true,
},
height: 200,
key: 'uXD2lB6D5B4B4iAa1Tb1YZNYAh1CUKUEQOHFVANUqD1G1F4I4B1C8C7D2C4B4==',
};
}
const RightContents = () => {
const [selected, setSelected] = useState([]);
return (
<>
<section className="sub_header right-content-padding d-flex justify-content-between align-items-center">
<span>Untitled (Content)</span>
<div>
<Button variant="outline-dark">Edit</Button>{' '}
<Button variant="dark">Add Section</Button>{' '}
<Button variant="secondary" disabled>
Save
</Button>
</div>
</section>
<section className="right-content-padding pt-4">
<Tabs
defaultActiveKey="information"
id="uncontrolled-tab-example"
className="mb-4"
>
<Tab eventKey="information" title="Information">
<FloatingLabel
controlId="floatingSelect"
// label="Select Parent"
className="mb-3"
>
<MultiSelect
options={chkOptions}
value={selected}
onChange={setSelected}
labelledBy="Select"
className="border-radius-lg"
/>
</FloatingLabel>
<FloatingLabel
controlId="floatingSelect"
label="Select Parent"
className="mb-3"
>
<Form.Select
aria-label="SelectParent"
className="border-radius-lg"
>
<option selected>
J1 - InternShip Program On Front End Developer
</option>
<option value={1}>Developer</option>
<option value={2}>Writer</option>
<option value={3}>Other</option>
</Form.Select>
</FloatingLabel>
<FloatingLabel
controlId="floatingInput"
label="Content Name"
className="mb-3"
>
<Form.Control
type="text"
placeholder="Enter your text"
value="Course Training Materials"
className="border-radius-lg"
/>
</FloatingLabel>
<div className="mb-3">
<FroalaEditor
model={`<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Diam venenatis, nullam urna, aliquet nibh nulla nibh quam convallis. Fermentum, amet porttitor tristique nibh. Faucibus eget vivamus a sodales id netus. Consectetur id ac tellus sit. Massa ut commodo pellentesque purus tellus </p><p data-f-id="pbf" style="text-align: center; font-size: 14px; margin-top: 30px; opacity: 0.65; font-family: sans-serif;">Powered by <a href="https://www.froala.com/wysiwyg-editor?pb=1" title="Froala Editor">Froala Editor</a></p>`}
onModelChange={console.warn}
config={getConfig()}
/>
</div>
<div className="d-flex align-items-center justify-content-between border border-color-gray-400 p-2 border-radius-lg mb-3 bg-white">
<div className="d-flex align-items-center">
<div className="flex-shrink-0">
<svg
xmlns="http://www.w3.org/2000/svg"
width="31.6"
height="39.5"
fill="currentColor"
class="bi bi-filetype-pdf"
viewBox="0 0 16 16"
>
<path
fill-rule="evenodd"
d="M14 4.5V14a2 2 0 0 1-2 2h-1v-1h1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5ZM1.6 11.85H0v3.999h.791v-1.342h.803c.287 0 .531-.057.732-.173.203-.117.358-.275.463-.474a1.42 1.42 0 0 0 .161-.677c0-.25-.053-.476-.158-.677a1.176 1.176 0 0 0-.46-.477c-.2-.12-.443-.179-.732-.179Zm.545 1.333a.795.795 0 0 1-.085.38.574.574 0 0 1-.238.241.794.794 0 0 1-.375.082H.788V12.48h.66c.218 0 .389.06.512.181.123.122.185.296.185.522Zm1.217-1.333v3.999h1.46c.401 0 .734-.08.998-.237a1.45 1.45 0 0 0 .595-.689c.13-.3.196-.662.196-1.084 0-.42-.065-.778-.196-1.075a1.426 1.426 0 0 0-.589-.68c-.264-.156-.599-.234-1.005-.234H3.362Zm.791.645h.563c.248 0 .45.05.609.152a.89.89 0 0 1 .354.454c.079.201.118.452.118.753a2.3 2.3 0 0 1-.068.592 1.14 1.14 0 0 1-.196.422.8.8 0 0 1-.334.252 1.298 1.298 0 0 1-.483.082h-.563v-2.707Zm3.743 1.763v1.591h-.79V11.85h2.548v.653H7.896v1.117h1.606v.638H7.896Z"
/>
</svg>
</div>
<div className="flex-grow-1 ms-3">
<h6 className="m-0">
Judiciary Foundation Batch - May, 2021 <br />{' '}
<span className="text-black-50">28.8 MB</span>
</h6>
</div>
</div>
<Button variant="link" className="text-decoration-none">
<svg
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="me-2"
>
<path
d="m11 1-9.998 9.998M10.998 11 1 1.001"
stroke="#F46582"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<span className="text-theme-color">Remove</span>
</Button>
</div>
<div className="d-flex align-items-center justify-content-between border border-color-gray-400 p-2 border-radius-lg mb-3 bg-white">
<div className="d-flex align-items-center">
<div className="flex-shrink-0">
<svg
xmlns="http://www.w3.org/2000/svg"
width="31.6"
height="39.5"
fill="currentColor"
class="bi bi-filetype-mp4"
viewBox="0 0 16 16"
>
<path
fill-rule="evenodd"
d="M14 4.5V14a2 2 0 0 1-2 2v-1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5ZM.706 15.849v-2.66h.038l.952 2.16h.516l.946-2.16h.038v2.66h.715V11.85h-.8l-1.14 2.596h-.026L.805 11.85H0v3.999h.706Zm5.278-3.999h-1.6v3.999h.792v-1.342h.803c.287 0 .53-.057.732-.173.203-.117.357-.275.463-.474a1.42 1.42 0 0 0 .161-.677c0-.25-.053-.476-.158-.677a1.176 1.176 0 0 0-.46-.477 1.4 1.4 0 0 0-.733-.179Zm.545 1.333a.795.795 0 0 1-.085.38.574.574 0 0 1-.237.241.794.794 0 0 1-.375.082h-.66V12.48h.66c.219 0 .39.06.513.181.123.122.184.296.184.522Zm1.505-.032c.266-.434.53-.867.791-1.301h1.14v2.62h.49v.638h-.49v.741h-.741v-.741H7.287v-.648c.235-.44.484-.876.747-1.31Zm-.029 1.298v.02h1.219v-2.021h-.041c-.201.318-.404.646-.607.984-.2.338-.391.677-.571 1.017Z"
/>
</svg>
</div>
<div className="flex-grow-1 ms-3">
<h6 className="m-0">
Basic Course Training <br />{' '}
<span className="text-black-50">122 MB</span>
</h6>
</div>
</div>
<Button variant="link" className="text-decoration-none m-0">
<svg
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="me-2"
>
<path
d="m11 1-9.998 9.998M10.998 11 1 1.001"
stroke="#F46582"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<span className="text-theme-color">Remove</span>
</Button>
</div>
<div className="d-flex align-items-center justify-content-between border border-color-gray-400 p-2 border-radius-lg mb-3 bg-white">
<div className="d-flex align-items-center">
<div className="flex-shrink-0">
<svg
xmlns="http://www.w3.org/2000/svg"
width="31.6"
height="39.5"
fill="currentColor"
class="bi bi-link-45deg"
viewBox="0 0 16 16"
>
<path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z" />
<path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z" />
</svg>
</div>
<div className="flex-grow-1 ms-3">
<h6 className="m-0">
<a href="#" className="text-truncate">
https://www.youtube.com/watch?v=QuMWSrJyt3onne..
</a>
{/* <span className="text-black-50">122 MB</span> */}
</h6>
</div>
</div>
<Button variant="link" className="text-decoration-none m-0">
<svg
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="me-2"
>
<path
d="m11 1-9.998 9.998M10.998 11 1 1.001"
stroke="#F46582"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<span className="text-theme-color">Remove</span>
</Button>
</div>
<Card className="border-radius-lg mt-2 q-a-list">
<Card.Body className="p-3">
<Card.Title>Question Title|</Card.Title>
{/* <Card.Subtitle className="mb-2 text-muted">
Verification
</Card.Subtitle> */}
<Card.Text>
<ListGroup variant="flush">
<Form>
{['radio'].map(type => (
<div key={type} className="mb-3">
<ListGroup.Item className="d-flex justify-content-start align-items-center border-0 ps-0">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.778 6.668a1.111 1.111 0 1 0 0-2.223 1.111 1.111 0 0 0 0 2.223zM7.778 15.558a1.111 1.111 0 1 0 0-2.222 1.111 1.111 0 0 0 0 2.222zM12.222 6.668a1.111 1.111 0 1 0 0-2.223 1.111 1.111 0 0 0 0 2.223zM12.222 15.558a1.111 1.111 0 1 0 0-2.222 1.111 1.111 0 0 0 0 2.222zM12.222 11.113a1.111 1.111 0 1 0 0-2.222 1.111 1.111 0 0 0 0 2.222zM7.778 11.113a1.111 1.111 0 1 0 0-2.222 1.111 1.111 0 0 0 0 2.222z"
fill="#D0D2D5"
/>
</svg>
<Form.Check type={type} id={`check-api-${type}`}>
<Form.Check.Input type={type} />
<Form.Check.Label className="text-theme-color text-muted">
Option 1
</Form.Check.Label>
</Form.Check>
</ListGroup.Item>
<ListGroup.Item className="d-flex justify-content-start align-items-center border-0 ps-0">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.778 6.668a1.111 1.111 0 1 0 0-2.223 1.111 1.111 0 0 0 0 2.223zM7.778 15.558a1.111 1.111 0 1 0 0-2.222 1.111 1.111 0 0 0 0 2.222zM12.222 6.668a1.111 1.111 0 1 0 0-2.223 1.111 1.111 0 0 0 0 2.223zM12.222 15.558a1.111 1.111 0 1 0 0-2.222 1.111 1.111 0 0 0 0 2.222zM12.222 11.113a1.111 1.111 0 1 0 0-2.222 1.111 1.111 0 0 0 0 2.222zM7.778 11.113a1.111 1.111 0 1 0 0-2.222 1.111 1.111 0 0 0 0 2.222z"
fill="#D0D2D5"
/>
</svg>
<Form.Check type={type} id={`check-api-${type}`}>
<Form.Check.Input type={type} />
<Form.Check.Label className="text-theme-color text-muted">
Option 2
</Form.Check.Label>
</Form.Check>
</ListGroup.Item>
<ListGroup.Item className="d-flex justify-content-start align-items-center border-0 ps-0">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.778 6.668a1.111 1.111 0 1 0 0-2.223 1.111 1.111 0 0 0 0 2.223zM7.778 15.558a1.111 1.111 0 1 0 0-2.222 1.111 1.111 0 0 0 0 2.222zM12.222 6.668a1.111 1.111 0 1 0 0-2.223 1.111 1.111 0 0 0 0 2.223zM12.222 15.558a1.111 1.111 0 1 0 0-2.222 1.111 1.111 0 0 0 0 2.222zM12.222 11.113a1.111 1.111 0 1 0 0-2.222 1.111 1.111 0 0 0 0 2.222zM7.778 11.113a1.111 1.111 0 1 0 0-2.222 1.111 1.111 0 0 0 0 2.222z"
fill="#D0D2D5"
/>
</svg>
<Form.Check type={type} id={`check-api-${type}`}>
<Form.Check.Input type={type} />
<Form.Check.Label className="text-theme-color text-muted">
Option 3
</Form.Check.Label>
</Form.Check>
</ListGroup.Item>
<ListGroup.Item className="d-flex justify-content-start align-items-center border-0 ps-0">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.778 6.668a1.111 1.111 0 1 0 0-2.223 1.111 1.111 0 0 0 0 2.223zM7.778 15.558a1.111 1.111 0 1 0 0-2.222 1.111 1.111 0 0 0 0 2.222zM12.222 6.668a1.111 1.111 0 1 0 0-2.223 1.111 1.111 0 0 0 0 2.223zM12.222 15.558a1.111 1.111 0 1 0 0-2.222 1.111 1.111 0 0 0 0 2.222zM12.222 11.113a1.111 1.111 0 1 0 0-2.222 1.111 1.111 0 0 0 0 2.222zM7.778 11.113a1.111 1.111 0 1 0 0-2.222 1.111 1.111 0 0 0 0 2.222z"
fill="#D0D2D5"
/>
</svg>
<Form.Check type={type} id={`check-api-${type}`}>
<Form.Check.Input type={type} />
<Form.Check.Label className="text-theme-color text-muted">
Option 4
</Form.Check.Label>
</Form.Check>
</ListGroup.Item>
<ListGroup.Item className="d-flex justify-content-start align-items-center border-0 ps-0">
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.473 2.672h1.054c.094 0 .141.047.141.14v12.376c0 .093-.047.14-.14.14H8.472c-.094 0-.141-.047-.141-.14V2.812c0-.093.047-.14.14-.14z"
fill="#D2D2D2"
/>
<path
d="M3.094 8.328h11.812c.094 0 .14.047.14.14v1.055c0 .094-.046.141-.14.141H3.094c-.094 0-.14-.047-.14-.14V8.468c0-.094.046-.14.14-.14z"
fill="#D2D2D2"
/>
</svg>
{/* <Form.Check type={type} id={`check-api-${type}`}> */}
{/* <Form.Check.Input type={type} /> */}
<Form.Check.Label className="text-theme-color text-muted">
Add Options
</Form.Check.Label>
{/* </Form.Check> */}
</ListGroup.Item>
</div>
))}
</Form>
</ListGroup>
</Card.Text>
</Card.Body>
</Card>
<div class="d-flex justify-content-between align-items-center mt-2 mb-3">
<span className="text-muted">
Your Selected Answer is Option 2
</span>
<div className="d-flex justify-content-between align-items-center">
<Button variant="link" className="text-decoration-none m-0">
<span className="text-danger">Remove</span>
</Button>
<span className="line-1"></span>
<Button variant="link" className="text-decoration-none m-0">
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.473 2.672h1.054c.094 0 .141.047.141.14v12.376c0 .093-.047.14-.14.14H8.472c-.094 0-.141-.047-.141-.14V2.812c0-.093.047-.14.14-.14z"
fill="#13171f"
/>
<path
d="M3.094 8.328h11.812c.094 0 .14.047.14.14v1.055c0 .094-.046.141-.14.141H3.094c-.094 0-.14-.047-.14-.14V8.468c0-.094.046-.14.14-.14z"
fill="#13171f"
/>
</svg>
<Form.Check.Label className="text-theme-color">
Add Options
</Form.Check.Label>
</Button>
</div>
</div>
<Row className="g-2 mb-3">
<Col md>
<FloatingLabel
controlId="floatingInputGrid"
label="Choose Date"
>
<Form.Control
type="date"
placeholder="Choose Date"
className="border-radius-lg"
/>
</FloatingLabel>
</Col>
<Col md>
<FloatingLabel
controlId="floatingInputGrid"
label="Choose Time"
>
<Form.Control
type="time"
placeholder="Choose Time"
className="border-radius-lg"
/>
</FloatingLabel>
</Col>
</Row>
</Tab>
{/* // =================================================================
// RULES TABS
// ================================================================= */}
<Tab eventKey="rules" title="Rules">
<h4 className="mb-3">Rules</h4>
<p className="text-muted">
Nullam posuere purus commodo est egestas dignissim. Vivamus
rutrum, mi ac rerit auctor, neque purus ultricies justo, in
bibendum lorem sapien eu nibh.
</p>
{/* // ===============================================================
// RULES SECTION START
// =============================================================== */}
<Card className="border-0 bg-transparent">
<Card.Title className="d-flex align-items-center justify-content-between m-0">
<h6>Rule 1</h6>
<Button variant="link" className="text-decoration-none m-0">
<span className="text-danger">Remove</span>
</Button>
</Card.Title>
<Card.Body className="d-flex align-items-center justify-content-between p-0">
<FloatingLabel
controlId="floatingSelect"
label="Choose Reward"
className="w-100 me-2"
>
<Form.Select
aria-label="Floating label select example"
className="border-radius-lg"
>
<option>Badge</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
</FloatingLabel>
<FloatingLabel
controlId="floatingSelect"
label="Choose Type"
className="w-100 me-2"
>
<Form.Select
aria-label="Floating label select example"
className="border-radius-lg"
>
<option>Silver</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
</FloatingLabel>
<FloatingLabel
controlId="floatingSelect"
label="Status"
className="w-100"
>
<Form.Select
aria-label="Floating label select example"
className="border-radius-lg"
>
<option>Completed</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
</FloatingLabel>
</Card.Body>
</Card>
{/* // ===============================================================
// CLOSE RULE
// =============================================================== */}
<Button variant="link" className="text-decoration-none mt-3 m-0">
<svg
width="19"
height="18"
viewBox="0 0 19 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="me-3"
>
<path
d="M8.973 2.672h1.054c.094 0 .141.047.141.14v12.376c0 .093-.047.14-.14.14H8.972c-.094 0-.141-.047-.141-.14V2.812c0-.093.047-.14.14-.14z"
fill="#13171F"
/>
<path
d="M3.594 8.328h11.812c.094 0 .14.047.14.14v1.055c0 .094-.046.141-.14.141H3.594c-.094 0-.14-.047-.14-.14V8.468c0-.094.046-.14.14-.14z"
fill="#13171F"
/>
</svg>
<span className="text-theme-color">Add Next Rule</span>
</Button>
{/* // ===============================================================
// VERIFICATION
// =============================================================== */}
<Card className="border-radius-lg mt-2">
<Card.Body className="p-3">
<Card.Title>Verification</Card.Title>
{/* <Card.Subtitle className="mb-2 text-muted">
Verification
</Card.Subtitle> */}
<Card.Text>
<Form>
{['checkbox'].map(type => (
<div key={type} className="mb-3">
<Form.Check type={type} id={`check-api-${type}`}>
<Form.Check.Input type={type} />
<Form.Check.Label className="text-theme-color">
Verifing Uploaded document
</Form.Check.Label>
<Form.Control.Feedback type="" className="text-muted">
Users can continue the journey only after verify the
document
</Form.Control.Feedback>
</Form.Check>
</div>
))}
</Form>
</Card.Text>
</Card.Body>
</Card>
</Tab>
</Tabs>
</section>
</>
);
};
export default RightContents;