1
1
import React , { useState , useEffect , useRef } from 'react'
2
2
import QRCodeStyling from 'qr-code-styling' ;
3
- import { Accordion , ButtonGroup , Card , Col , Container , Form , InputGroup , ListGroup , Row , Tab , Button } from 'react-bootstrap' ;
3
+ import { Accordion , ButtonGroup , Card , Col , Container , Form , InputGroup , ListGroup , Row , Tab , Button , Nav , NavItem , Navbar , NavbarBrand } from 'react-bootstrap' ;
4
4
5
5
let qrCode = new QRCodeStyling ( {
6
6
width : 300 ,
@@ -41,7 +41,7 @@ const Qrcode = () => {
41
41
const [ url , setUrl ] = useState ( "https://krishnadeveloper.github.io/react-qr-code-style/index.html" ) ;
42
42
const [ height , setHeight ] = useState ( 300 )
43
43
const [ width , setWidth ] = useState ( 300 )
44
- const [ logo , setLogo ] = useState ( "" ) ; //https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg
44
+ const [ logo , setLogo ] = useState ( "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg " ) ; //https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg
45
45
const [ mainMargin , setMainMargin ] = useState ( 0 ) ;
46
46
47
47
// Dot Options
@@ -290,8 +290,11 @@ const Qrcode = () => {
290
290
return (
291
291
292
292
< Container fluid = { true } >
293
+ < Navbar >
294
+ < NavbarBrand > QR Code Designer</ NavbarBrand >
295
+ </ Navbar >
293
296
< Row >
294
- < Col sm = { 12 } md = { 6 } lg = { 4 } >
297
+ < Col sm = { 12 } md = { 6 } lg = { 3 } className = "p-0" >
295
298
< Card >
296
299
< Card . Body >
297
300
< div ref = { ref } style = { { border : "2px dotted red" } } />
@@ -312,7 +315,7 @@ const Qrcode = () => {
312
315
</ Card . Footer >
313
316
</ Card >
314
317
</ Col >
315
- < Col sm = { 12 } md = { 6 } lg = { 8 } >
318
+ < Col sm = { 12 } md = { 6 } lg = { 9 } >
316
319
< Row >
317
320
< Col sm = { 12 } md = { 6 } >
318
321
< Accordion >
0 commit comments