sprint-asia-custom-component 0.1.25 → 0.1.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/index.js +49385 -46793
  2. package/package.json +1 -1
  3. package/src/components/alert/index.js +9 -2
  4. package/src/components/description/index.js +12 -0
  5. package/src/components/filter/filterDropdown/index.js +2 -2
  6. package/src/components/footer/index.js +2 -2
  7. package/src/components/searchdropdown/index.js +20 -14
  8. package/src/components/table/listTable/cellmodelone/index.js +16 -16
  9. package/src/index.js +64 -64
  10. package/src/templates/index.js +38 -10
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "sprint-asia-custom-component",
3
3
  "main": "dist/index.js",
4
- "version": "0.1.25",
4
+ "version": "0.1.27",
5
5
  "private": false,
6
6
  "dependencies": {
7
7
  "@headlessui/react": "^1.7.18",
package/src/components/alert/index.js CHANGED
@@ -5,19 +5,26 @@ import OutlineButton from '../button/outlinebutton'
5
5
  const Alert = ({
6
6
  title = "Title",
7
7
  subtitle = "Subtitle",
8
+ type = "primary",
8
9
  titleLeftButton,
9
10
  titleRightButton,
10
11
  onClickLeftButton,
11
12
  onClickRightButton,
12
13
  }) => {
13
14
  return (
14
- <div className='w-full flex justify-between p-3 bg-primary50 border border-primary600 rounded-md'>
15
+ <div className={`
16
+ ${type === "primary" && "bg-primary50 border-primary600"}
17
+ ${type === "warning" && "bg-warning50 border-warning800"}
18
+ ${type === "danger" && "bg-danger50 border-danger500"} w-full flex justify-between p-3 border rounded-md`}>
15
19
  <div className='w-full flex'>
16
20
  <div>
17
21
  <PiInfoFill
18
22
  size="24"
19
23
  variant="Bold"
20
- className="text-primary600 mr-2"
24
+ className={`
25
+ ${type === "primary" && "text-primary600"}
26
+ ${type === "warning" && "text-warning800"}
27
+ ${type === "danger" && "text-danger500"} mr-2`}
21
28
  />
22
29
  </div>
23
30
  <div>
package/src/components/description/index.js CHANGED
@@ -4,6 +4,9 @@ const Description = ({
4
4
  title = "Title",
5
5
  value = "Description",
6
6
  textColor = "default",
7
+ subtitle,
8
+ linkSubtitle,
9
+ onClickSubtitle
7
10
  }) => {
8
11
  return (
9
12
  <div className='w-full'>
@@ -14,6 +17,15 @@ const Description = ({
14
17
  ${textColor == "success" && "text-success500 font-semibold text-base"}
15
18
  `}>{value}</p>
16
19
  </div>
20
+ {subtitle &&
21
+ <div className='flex items-center mt-1'>
22
+ <p className="text-sm font-normal text-black mr-1">{subtitle}</p>
23
+ {
24
+ linkSubtitle &&
25
+ <p className='m-0 text-sm font-semibold text-primary500 cursor-pointer' onClick={onClickSubtitle}>{linkSubtitle}</p>
26
+ }
27
+ </div>
28
+ }
17
29
  </div>
18
30
  );
19
31
  };
package/src/components/filter/filterDropdown/index.js CHANGED
@@ -88,13 +88,13 @@ const FilterDropdown = ({
88
88
  <div className='flex'>
89
89
  <button
90
90
  type='button'
91
- className="flex items-center w-60 text-left px-4 bg-white border-neutral50 font-normal text-sm text-neutral300 rounded-md border focus:outline-none"
91
+ className={`${dataFilterCheckbox.length + dataFilterStatus.length > 0 ? "border-black text-black" : "border-neutral50 text-neutral300"} flex items-center w-60 text-left px-4 bg-white font-normal text-sm rounded-md border focus:outline-none`}
92
92
  >
93
93
  <span className='flex-grow py-2.5' onClick={() => setShowFilterMenu(!showFilterMenu)}>{buttonText}</span>
94
94
  {
95
95
  dataFilterCheckbox.length + dataFilterStatus.length > 0 ?
96
96
  <span className='ml-2' onClick={handleResetFilter}>
97
- <PiX size={16} className='text-neutral300' />
97
+ <PiX size={16} className='text-black' />
98
98
  </span>
99
99
  :
100
100
  <span className='ml-2'>
package/src/components/footer/index.js CHANGED
@@ -11,8 +11,8 @@ const Footer = ({
11
11
  onClickRightButton
12
12
  }) => {
13
13
  return (
14
- <div className='sticky bottom-0 flex w-full justify-end items-center py-1 px-6 bg-white'>
15
- <div className='flex items-center'>
14
+ <div className='fixed bottom-0 flex justify-end w-full items-center py-1 px-6 bg-white'>
15
+ <div className='flex items-center mr-48'>
16
16
  <div className='m-1'>
17
17
  <OutlineButton
18
18
  title={titleLeftButton}
package/src/components/searchdropdown/index.js CHANGED
@@ -2,14 +2,21 @@ import React, { useState, useRef } from 'react';
2
2
  import { PiMagnifyingGlass, PiCaretDown, PiCaretUp } from 'react-icons/pi';
3
3
 
4
4
  const SearchDropdown = ({
5
- options = ["Loading..."],
6
- valueOptions = ["Loading..."],
5
+ options = [
6
+ {
7
+ name : "Name 1",
8
+ value : "Value 1"
9
+ },
10
+ {
11
+ name : "Name 2",
12
+ value : "Value 2"
13
+ },
14
+ ],
7
15
  placeholderSearch = "Search Here",
8
16
  filterDropdown = "Filter",
9
17
  setFilterDropdown,
10
- setValueFilterDropdown,
11
18
  filterSearch,
12
- setValueFilterSearch,
19
+ setFilterSearch,
13
20
  onEnterPress,
14
21
  }) => {
15
22
  const [isOpen, setIsOpen] = useState(false);
@@ -21,22 +28,21 @@ const SearchDropdown = ({
21
28
  }
22
29
  };
23
30
 
24
- const handleClickOption = (data, value) => {
31
+ const handleClickOption = (data) => {
25
32
  setIsOpen(false)
26
33
  setFilterDropdown(data)
27
- setValueFilterDropdown(value)
28
34
  }
29
35
 
30
36
  return (
31
37
  <div className='relative inline-block text-left w-full' ref={dropdownRef}>
32
38
  <div className='flex items-center h-full'>
33
- <div className="relative cursor-pointer border-neutral50 border-t border-b border-l rounded-tl-md rounded-bl-md" onClick={() => setIsOpen(!isOpen)}>
39
+ <div className={`${filterSearch ? "border-black" : "border-neutral50"} relative cursor-pointer border-t border-b border-l rounded-tl-md rounded-bl-md`} onClick={() => setIsOpen(!isOpen)}>
34
40
  <div className='flex items-center bg-white rounded-tl-md rounded-bl-md'>
35
- <p className="flex items-center w-full py-2.5 text-left pl-4 pr-4 bg-white rounded-md font-bold text-sm text-neutral300">{filterDropdown}</p>
41
+ <p className="flex items-center w-full py-2.5 text-left pl-4 pr-4 bg-white rounded-md font-bold text-sm text-neutral300">{filterDropdown.name}</p>
36
42
  {
37
43
  isOpen ? <PiCaretUp /> : <PiCaretDown />
38
44
  }
39
- <p className='text-neutral50 ml-3'>|</p>
45
+ <p className={`${filterSearch ? "text-black" : "text-neutral50"} ml-3`}>|</p>
40
46
  </div>
41
47
  {isOpen && (
42
48
  <div
@@ -52,10 +58,10 @@ const SearchDropdown = ({
52
58
  <div
53
59
  key={index}
54
60
  className='hover:bg-neutral20 bg-white py-2.5 px-4 my-0.5 rounded-md cursor-pointer'
55
- onClick={() => handleClickOption(option, valueOptions[index])}
61
+ onClick={() => handleClickOption(option)}
56
62
  >
57
63
  <div className='flex justify-between'>
58
- <p className='text-sm text-black'>{option}</p>
64
+ <p className='text-sm text-black'>{option.name}</p>
59
65
  </div>
60
66
  </div>
61
67
  ))
@@ -68,13 +74,13 @@ const SearchDropdown = ({
68
74
  </div>
69
75
  )}
70
76
  </div>
71
- <div className="relative border-neutral50 border-t border-b border-r rounded-tr-md rounded-br-md">
77
+ <div className={`${filterSearch ? "border-black" : "border-neutral50"} relative border-t border-b border-r rounded-tr-md rounded-br-md`}>
72
78
  <div className='flex items-center bg-white rounded-tr-md rounded-br-md focus:outline-none'>
73
- <PiMagnifyingGlass className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral50 w-4 h-4" />
79
+ <PiMagnifyingGlass className={`${filterSearch ? "text-black" : "text-neutral50"} absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4`} />
74
80
  <input
75
81
  type='text'
76
82
  value={filterSearch}
77
- onChange={(e) => setValueFilterSearch(e.target.value)}
83
+ onChange={(e) => setFilterSearch(e.target.value)}
78
84
  onKeyDown={handleKeyDown}
79
85
  className="flex items-center w-full py-2.5 text-left pl-8 pr-4 bg-white rounded-md font-normal text-sm text-black focus:outline-none"
80
86
  placeholder={placeholderSearch}
package/src/components/table/listTable/cellmodelone/index.js CHANGED
@@ -3,14 +3,14 @@ import Chip from '../../../chip'
3
3
  import { PiTrash, PiNotePencil } from 'react-icons/pi'
4
4
 
5
5
  const CellModelOne = ({
6
- Column_One_A = "Loading...",
7
- Column_One_B = "Loading...",
8
- Column_One_C = "Loading...",
9
- Column_One_D = "Loading...",
10
- Column_Two_A = "Loading...",
11
- Column_Two_B = "Loading...",
12
- Column_Three_A = "Loading...",
13
- Column_Four_A = "Loading...",
6
+ Column_One_A,
7
+ Column_One_B,
8
+ Column_One_C,
9
+ Column_One_D,
10
+ Column_Two_A,
11
+ Column_Two_B,
12
+ Column_Three_A,
13
+ Column_Four_A,
14
14
  Column_Five_A = "Active",
15
15
  onClickEdit,
16
16
  onClickDelete,
@@ -47,10 +47,10 @@ const CellModelOne = ({
47
47
  }
48
48
  }>
49
49
  <div className= "py-3.5 px-4">
50
- <p className='font-semibold text-black text-sm'>{Column_One_A}</p>
51
- <p className='font-normal text-neutral300 text-sm'>{Column_One_B}</p>
52
- <p className='font-normal text-neutral300 text-sm'>{Column_One_C}</p>
53
- <p className='font-normal text-neutral300 text-sm'>{Column_One_D}</p>
50
+ <p className='font-semibold text-black text-sm'>{Column_One_A ? Column_One_A : "-"}</p>
51
+ <p className='font-normal text-neutral300 text-sm'>{Column_One_B ? Column_One_B : "-"}</p>
52
+ <p className='font-normal text-neutral300 text-sm'>{Column_One_C ? Column_One_C : "-"}</p>
53
+ <p className='font-normal text-neutral300 text-sm'>{Column_One_D ? Column_One_D : "-"}</p>
54
54
  </div>
55
55
  </div>
56
56
  </td>
@@ -64,8 +64,8 @@ const CellModelOne = ({
64
64
  }
65
65
  }>
66
66
  <div className= "py-3.5 px-4">
67
- <p className='font-semibold text-black text-sm'>{Column_Two_A}</p>
68
- <p className='font-normal text-neutral300 text-sm'>{Column_Two_B}</p>
67
+ <p className='font-semibold text-black text-sm'>{Column_Two_A ? Column_Two_A : "-"}</p>
68
+ <p className='font-normal text-neutral300 text-sm'>{Column_Two_B ? Column_Two_B : "-"}</p>
69
69
  <div className='flex items-center pt-1'>
70
70
  <p className='font-normal text-neutral500 text-sm'>&nbsp;</p>
71
71
  </div>
@@ -85,7 +85,7 @@ const CellModelOne = ({
85
85
  }
86
86
  }>
87
87
  <div className= "py-3.5 px-4">
88
- <p className='font-normal text-black text-sm'>{Column_Three_A}</p>
88
+ <p className='font-normal text-black text-sm'>{Column_Three_A ? Column_Three_A : "-"}</p>
89
89
  <div className='flex items-center pt-1'>
90
90
  <p className='font-normal text-neutral500 text-sm'>&nbsp;</p>
91
91
  </div>
@@ -108,7 +108,7 @@ const CellModelOne = ({
108
108
  }
109
109
  }>
110
110
  <div className= "py-3.5 px-4">
111
- <p className='font-normal text-black text-sm'>{Column_Four_A}</p>
111
+ <p className='font-normal text-black text-sm'>{Column_Four_A ? Column_Four_A : "-"}</p>
112
112
  <div className='flex items-center pt-1'>
113
113
  <p className='font-normal text-neutral500 text-sm'>&nbsp;</p>
114
114
  </div>
package/src/index.js CHANGED
@@ -1,71 +1,71 @@
1
- // import './index.css';
1
+ import './index.css';
2
2
 
3
- // import { BrowserRouter as Router } from 'react-router-dom';
3
+ import { BrowserRouter as Router } from 'react-router-dom';
4
4
 
5
- // import React from 'react';
6
- // import ReactDOM from 'react-dom/client';
7
- // import App from './App';
5
+ import React from 'react';
6
+ import ReactDOM from 'react-dom/client';
7
+ import App from './App';
8
8
 
9
- // const root = ReactDOM.createRoot(document.getElementById('root'));
10
- // root.render(
11
- // <React.StrictMode>
12
- // <Router> {/* Wrap your App component with Router */}
13
- // <App />
14
- // </Router>
15
- // </React.StrictMode>
16
- // );
9
+ const root = ReactDOM.createRoot(document.getElementById('root'));
10
+ root.render(
11
+ <React.StrictMode>
12
+ <Router> {/* Wrap your App component with Router */}
13
+ <App />
14
+ </Router>
15
+ </React.StrictMode>
16
+ );
17
17
 
18
18
 
19
- import './index.css';
20
- import Alert from './components/alert'
21
- import DangerButton from './components/button/dangerbutton'
22
- import OutlineButton from './components/button/outlinebutton'
23
- import PrimaryButton from './components/button/primarybutton'
24
- import CardInternalProduct from './components/card';
25
- import Chip from './components/chip'
26
- import CustomDatePicker from './components/datepicker';
27
- import Description from './components/description';
28
- import DropdownCard from './components/dropdown/dropdownCard';
29
- import DropdownChip from './components/dropdown/dropdownChip';
30
- import DropdownText from './components/dropdown/dropdownText';
31
- import DropzoneUploadFile from './components/dropzone/uploadfile';
32
- import DropzoneUploadPhoto from './components/dropzone/uploadphoto';
33
- import EmptyData from './components/emptystate/table/emptydata';
34
- import NotFound from './components/emptystate/table/notfound';
35
- import ExportToExcel from './components/export/excel';
36
- import FilterCheckbox from './components/filter/filterCheckbox';
37
- import FilterText from './components/filter/filterText';
38
- import Menu from './components/menu';
39
- import ModalLoading from './components/modal/modalLoading';
40
- import ModalResult from './components/modal/modalResult';
41
- import ModalState from './components/modal/modalState';
42
- import Notification from './components/notification';
43
- import SearchInput from './components/searchinput';
44
- import Stepper from './components/stepper';
45
- import Switch from './components/switch';
46
- import ChipBar from './components/tabLayout/chipBar';
47
- import TabBar from './components/tabLayout/tabBar';
48
- import BillerList from './components/table/listTable/biller';
49
- import BillerProductList from './components/table/listTable/product/billerproduct';
50
- import InternalProductList from './components/table/listTable/product/internalproduct';
51
- import ReportList from './components/table/listTable/report/businessadmin';
52
- import ReportListClient from './components/table/listTable/report/clientadmin';
53
- import Pagination from './components/table/pagination';
54
- import TextInput from './components/textinput';
55
- import HeaderTable from './components/table/headerTable';
56
- import BillingList from './components/table/listTable/billing';
57
- import ModalBilling from './components/modal/modalBilling';
58
- import LimitList from './components/table/listTable/limit';
59
- import ModalLimit from './components/modal/modalLimit';
60
- import VerticalStepBar from './components/verticalstepbar';
61
- import DepositList from './components/table/listTable/deposit';
62
- import ModalDeposit from './components/modal/modalDeposit';
63
- import CellModelOne from './components/table/listTable/cellmodelone';
64
- import SearchDropdown from './components/searchdropdown';
65
- import FilterDropdown from './components/filter/filterDropdown';
66
- import Footer from './components/footer';
19
+ // import './index.css';
20
+ // import Alert from './components/alert'
21
+ // import DangerButton from './components/button/dangerbutton'
22
+ // import OutlineButton from './components/button/outlinebutton'
23
+ // import PrimaryButton from './components/button/primarybutton'
24
+ // import CardInternalProduct from './components/card';
25
+ // import Chip from './components/chip'
26
+ // import CustomDatePicker from './components/datepicker';
27
+ // import Description from './components/description';
28
+ // import DropdownCard from './components/dropdown/dropdownCard';
29
+ // import DropdownChip from './components/dropdown/dropdownChip';
30
+ // import DropdownText from './components/dropdown/dropdownText';
31
+ // import DropzoneUploadFile from './components/dropzone/uploadfile';
32
+ // import DropzoneUploadPhoto from './components/dropzone/uploadphoto';
33
+ // import EmptyData from './components/emptystate/table/emptydata';
34
+ // import NotFound from './components/emptystate/table/notfound';
35
+ // import ExportToExcel from './components/export/excel';
36
+ // import FilterCheckbox from './components/filter/filterCheckbox';
37
+ // import FilterText from './components/filter/filterText';
38
+ // import Menu from './components/menu';
39
+ // import ModalLoading from './components/modal/modalLoading';
40
+ // import ModalResult from './components/modal/modalResult';
41
+ // import ModalState from './components/modal/modalState';
42
+ // import Notification from './components/notification';
43
+ // import SearchInput from './components/searchinput';
44
+ // import Stepper from './components/stepper';
45
+ // import Switch from './components/switch';
46
+ // import ChipBar from './components/tabLayout/chipBar';
47
+ // import TabBar from './components/tabLayout/tabBar';
48
+ // import BillerList from './components/table/listTable/biller';
49
+ // import BillerProductList from './components/table/listTable/product/billerproduct';
50
+ // import InternalProductList from './components/table/listTable/product/internalproduct';
51
+ // import ReportList from './components/table/listTable/report/businessadmin';
52
+ // import ReportListClient from './components/table/listTable/report/clientadmin';
53
+ // import Pagination from './components/table/pagination';
54
+ // import TextInput from './components/textinput';
55
+ // import HeaderTable from './components/table/headerTable';
56
+ // import BillingList from './components/table/listTable/billing';
57
+ // import ModalBilling from './components/modal/modalBilling';
58
+ // import LimitList from './components/table/listTable/limit';
59
+ // import ModalLimit from './components/modal/modalLimit';
60
+ // import VerticalStepBar from './components/verticalstepbar';
61
+ // import DepositList from './components/table/listTable/deposit';
62
+ // import ModalDeposit from './components/modal/modalDeposit';
63
+ // import CellModelOne from './components/table/listTable/cellmodelone';
64
+ // import SearchDropdown from './components/searchdropdown';
65
+ // import FilterDropdown from './components/filter/filterDropdown';
66
+ // import Footer from './components/footer';
67
67
 
68
68
 
69
- export {Footer, CellModelOne, SearchDropdown, FilterDropdown, HeaderTable, TextInput, Pagination, ReportList, ReportListClient, InternalProductList, BillerProductList, BillerList, TabBar, ChipBar, Switch, Stepper,
70
- SearchInput, Notification, ModalState, ModalResult, ModalLoading, Menu, FilterText, FilterCheckbox, ExportToExcel, NotFound, EmptyData, DropzoneUploadPhoto, DropzoneUploadFile, DropdownText, DropdownChip, DropdownCard, Description, CustomDatePicker, Chip, CardInternalProduct, PrimaryButton, OutlineButton,
71
- DangerButton, Alert, BillingList, ModalBilling, LimitList, ModalLimit, VerticalStepBar, DepositList, ModalDeposit}
69
+ // export {Footer, CellModelOne, SearchDropdown, FilterDropdown, HeaderTable, TextInput, Pagination, ReportList, ReportListClient, InternalProductList, BillerProductList, BillerList, TabBar, ChipBar, Switch, Stepper,
70
+ // SearchInput, Notification, ModalState, ModalResult, ModalLoading, Menu, FilterText, FilterCheckbox, ExportToExcel, NotFound, EmptyData, DropzoneUploadPhoto, DropzoneUploadFile, DropdownText, DropdownChip, DropdownCard, Description, CustomDatePicker, Chip, CardInternalProduct, PrimaryButton, OutlineButton,
71
+ // DangerButton, Alert, BillingList, ModalBilling, LimitList, ModalLimit, VerticalStepBar, DepositList, ModalDeposit}
package/src/templates/index.js CHANGED
@@ -724,13 +724,29 @@ const Templates = () => {
724
724
  const [selectedMenuRadioButton, setSelectedMenuRadioButton] = useState(null)
725
725
  const [selectedSubmenuRadioButton, setSelectedSubmenuRadioButton] = useState([])
726
726
 
727
+ const [searchFilter, setSearchFilter] = useState()
728
+ const [filterDropdown, setFilterDropdown] = useState({
729
+ name : "duar",
730
+ value : "dfdsf"
731
+ })
732
+
733
+ const onHandleEnter = () => {
734
+ console.log(searchFilter, filterDropdown)
735
+ }
736
+
727
737
  return (
728
738
  <div>
729
739
  <div className='m-9'></div>
730
740
  <p className='text-black font-semibold text-xl text-left py-1'>Alert</p>
731
- <div className='w-full'>
741
+ <div className='w-full py-3'>
732
742
  <Alert title='Client & Division Reminder' subtitle='Please ensure you have created the appropriate Client and division for the user before proceeding.'/>
733
743
  </div>
744
+ <div className='w-full py-3'>
745
+ <Alert title='Client & Division Reminder' subtitle='Please ensure you have created the appropriate Client and division for the user before proceeding.' type='warning'/>
746
+ </div>
747
+ <div className='w-full py-3'>
748
+ <Alert title='Client & Division Reminder' subtitle='Please ensure you have created the appropriate Client and division for the user before proceeding.' type='danger'/>
749
+ </div>
734
750
  <div className='w-full py-3'>
735
751
  <Alert title='Client & Division Reminder' subtitle='Please ensure you have created the appropriate Client and division for the user before proceeding.' titleLeftButton="Add Client" onClickLeftButton={() => console.log("left button clicked")}/>
736
752
  </div>
@@ -1033,20 +1049,32 @@ const Templates = () => {
1033
1049
 
1034
1050
  <div className='m-9'></div>
1035
1051
  <SearchDropdown
1036
- onSelect={handleSelectOption}
1037
- selectedOptions={selectedOptions}
1038
- onRemoveOption={handleRemoveOption}
1039
- title="Custom Title Dropdown"
1052
+ options={[
1053
+ {
1054
+ name: "Name 1",
1055
+ value : "Value 1"
1056
+ },
1057
+ {
1058
+ name: "Name 2",
1059
+ value : "Value 2"
1060
+ },
1061
+ ]}
1062
+ placeholderSearch='Search Here...'
1063
+ filterDropdown={filterDropdown}
1064
+ setFilterDropdown={setFilterDropdown}
1065
+ filterSearch={searchFilter}
1066
+ setFilterSearch={setSearchFilter}
1067
+ onEnterPress={onHandleEnter}
1040
1068
  />
1041
1069
 
1042
1070
  <div className='m-9'></div>
1043
1071
  <p className='text-black font-bold text-2xl text-center py-2'>Stepper</p>
1044
1072
  {
1045
- scenarios.map((scenario, index) => (
1046
- <div key={index} className='mb-10'>
1047
- <Stepper data={scenario.data} currentStep={scenario.currentStep} />
1048
- </div>
1049
- ))
1073
+ scenarios.map((scenario, index) => (
1074
+ <div key={index} className='mb-10'>
1075
+ <Stepper data={scenario.data} currentStep={scenario.currentStep} />
1076
+ </div>
1077
+ ))
1050
1078
  }
1051
1079
 
1052
1080
  <div className='m-9'></div>