11import React , { useState , useEffect , useRef } from 'react'
22import 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' ;
44
55let qrCode = new QRCodeStyling ( {
66 width : 300 ,
@@ -41,7 +41,7 @@ const Qrcode = () => {
4141 const [ url , setUrl ] = useState ( "https://krishnadeveloper.github.io/react-qr-code-style/index.html" ) ;
4242 const [ height , setHeight ] = useState ( 300 )
4343 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
4545 const [ mainMargin , setMainMargin ] = useState ( 0 ) ;
4646
4747 // Dot Options
@@ -290,8 +290,11 @@ const Qrcode = () => {
290290 return (
291291
292292 < Container fluid = { true } >
293+ < Navbar >
294+ < NavbarBrand > QR Code Designer</ NavbarBrand >
295+ </ Navbar >
293296 < Row >
294- < Col sm = { 12 } md = { 6 } lg = { 4 } >
297+ < Col sm = { 12 } md = { 6 } lg = { 3 } className = "p-0" >
295298 < Card >
296299 < Card . Body >
297300 < div ref = { ref } style = { { border : "2px dotted red" } } />
@@ -312,7 +315,7 @@ const Qrcode = () => {
312315 </ Card . Footer >
313316 </ Card >
314317 </ Col >
315- < Col sm = { 12 } md = { 6 } lg = { 8 } >
318+ < Col sm = { 12 } md = { 6 } lg = { 9 } >
316319 < Row >
317320 < Col sm = { 12 } md = { 6 } >
318321 < Accordion >
0 commit comments