Помогите с scss

А хтмл мне самому угадывать?

 

Toil

import React, { useEffect, useState, useRef } from "react";
import QRCodeStyling from "qr-code-styling";
import Link from "../../assets/images/link.png";
import Copy from "../../assets/svg/copy.svg";
import Logo from "../../assets/svg/darkLogo.svg";
import Share from "../../assets/svg/share.svg";
import Copied from "../../assets/svg/copied.svg";
import ShareBlock from "./shareBlock.jsx";

const LinkItem = ({ link }) => {
const [copied, setCopied] = useState(false);
const [isVisible, setIsVisible] = useState(false);
const qrCodeRef = useRef(null);
const qrCodeInstanceRef = useRef(null);

useEffect(() => {
if (!qrCodeInstanceRef.current) {
const newQrCodeInstance = new QRCodeStyling({
width: 120,
height: 120,
data: link,
image: Logo,
dotsOptions: {
color: "#fff",
type: "extra-rounded"
},
cornersSquareOptions: {
type: 'extra-rounded'
},
imageOptions: {
crossOrigin: "anonymous",
margin: 0
},
backgroundOptions: {
color: '#343434',
}
});

qrCodeInstanceRef.current = newQrCodeInstance;
newQrCodeInstance.append(qrCodeRef.current);
setIsVisible(true); // Set the visibility after the QR code instance is created
} else {
qrCodeInstanceRef.current.update({ data: link });
setIsVisible(true); // Set the visibility after the QR code instance is updated
}
}, [link]);

const handleCopyClick = () => {
navigator.clipboard.writeText(link);
setCopied(true);
setTimeout(() => {
setCopied(false);
}, 2000);
};

return (
<div>
<div className={`contentShortBlock ${isVisible ? 'slide-in' : ''}`}>
<div className="leftFlex">
<div className="link">
<img src={Link} alt="" />
<a href={link}>{link}</a>
</div>
<div className="copyShare">
<div className="copy">
<button onClick={handleCopyClick}>
{copied ? 'Скопировано' : 'Копировать'}
<img src={copied ? Copied : Copy} alt="" />
</button>
</div>
<div className="share">
<button>
Поделиться
<img src={Share} alt="" />
</button>
</div>
</div>
</div>
<div className="rightFlex">
<div className="qrCode" ref={qrCodeRef}></div>
</div>
</div>
<ShareBlock link={link} />
</div>
);
};

export default LinkItem;

JS

import React, { useEffect, useState, useRef } from "react";

import QRCodeStyling from "qr-code-styling";

import Link from "../../assets/images/link.png";

import Copy from "../../assets/svg/copy.svg";

import Logo from "../../assets/svg/darkLogo.svg";

import Share from "../../assets/svg/share.svg";

import Copied from "../../assets/svg/copied.svg";

import ShareBlock from "./shareBlock.jsx";



const LinkItem = ({ link }) => {

    const [copied, setCopied] = useState(false);

    const [isVisible, setIsVisible] = useState(false);

    const qrCodeRef = useRef(null);

    const qrCodeInstanceRef  = useRef(null);



    useEffect(() => {

        if (!qrCodeInstanceRef.current) {

            const newQrCodeInstance = new QRCodeStyling({

                width: 120,

                height: 120,

                data: link,

                image: Logo,

                dotsOptions: {

                    color: "#fff",

                    type: "extra-rounded"

                },

                cornersSquareOptions: {

                    type: 'extra-rounded'

                },

                imageOptions: {

                    crossOrigin: "anonymous",

                    margin: 0

                },

                backgroundOptions: {

                    color: '#343434',

                }

            });



            qrCodeInstanceRef.current = newQrCodeInstance;

            newQrCodeInstance.append(qrCodeRef.current);

            setIsVisible(true);  // Set the visibility after the QR code instance is created

        } else {

            qrCodeInstanceRef.current.update({ data: link });

            setIsVisible(true);  // Set the visibility after the QR code instance is updated

        }

    }, [link]);



    const handleCopyClick = () => {

        navigator.clipboard.writeText(link);

        setCopied(true);

        setTimeout(() => {

            setCopied(false);

        }, 2000);

    };



    return (

        <div>

            <div className={`contentShortBlock ${isVisible ? 'slide-in' : ''}`}>

                <div className="leftFlex">

                    <div className="link">

                        <img src={Link} alt="" />

                        <a href={link}>{link}</a>

                    </div>

                    <div className="copyShare">

                        <div className="copy">

                            <button onClick={handleCopyClick}>

                                {copied ? 'Скопировано' : 'Копировать'}

                                <img src={copied ? Copied : Copy} alt="" />

                            </button>

                        </div>

                        <div className="share">

                            <button>

                                Поделиться

                                <img src={Share} alt="" />

                            </button>

                        </div>

                    </div>

                </div>

                <div className="rightFlex">

                    <div className="qrCode" ref={qrCodeRef}></div>

                </div>

            </div>

            <ShareBlock link={link} />

        </div>

    );

};



export default LinkItem;

import React, {useEffect, useRef, useState} from "react";
import './styles/short.scss';
const ShareBlock = ({ link }) => {
return (
<div>
<div className="ShareBlock" />
</div>
);
};

export default ShareBlock;

JS

import React, {useEffect, useRef, useState} from "react";

import './styles/short.scss';

const ShareBlock = ({ link }) => {

    return (

        <div>

         <div className="ShareBlock" />

        </div>

    );

};



export default ShareBlock;

 

Полковник, чтобы сделать белый блок отображался справа от основного, можно использовать свойство `float` в CSS. В данном случае, нужно добавить следующий код:

.shortBlock {
float: right;
}

CSS

.shortBlock {

  float: right;

}

Таким образом, блок с классом `.shortBlock` будет выравниваться справа от основного контента. Поместите этот код внутри селектора `.shortBlock` в вашем CSS:

.shortBlock {
margin-top: 90px;
display: flex;
flex-direction: column;
gap: 30px;
width: 700px;
float: right;
/* остальные стили */
}

CSS

.shortBlock {

  margin-top: 90px;

  display: flex;

  flex-direction: column;

  gap: 30px;

  width: 700px;

  float: right;

  /* остальные стили */

}

После этого белый блок будет отображаться справа от основного контента.

 

просто flex и тд общему родителю не?

 

мне впадлу разгадывать твой код.
<div class="container">
<div class="wide-block"> </div>
<div class="small-square"></div>
</div>

.container {
display:flex;
flex-direction: column;
align-items: end;
width: 100%;
}
.wide-block {
стили...
}
small-square {
стили...
}