i have problem with astro and react js pls help me

i have made a sidebar with react and want to import it to index.astro but its not happening
2 Replies
indee
indee10mo ago
indee
indee10mo ago
this is the component
---
import sidebarWidget from "../components/sidebarWidget";
---

<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body class="min-h-screen bg-background font-mono">
<div class="border-b-2 bg-primary p-5">
<section class="mx-auto max-w-max bg-primary relative">
<h1 class="itali m-0 text-5xl sm:text-6xl md:text-8xl lg:text-9xl">
Priyasakhi<span
class="bg-accent p-2 text-2xl sm:text-3xl md:text-4xl lg:text-5xl"
>'s</span
>
</h1>
<p
class="absolute right-0 m-0 max-w-max bg-accent p-2 text-2xl sm:text-3xl md:text-4xl lg:text-5xl"
>
kitchen
</p>
</section>
</div>
<sidebarWidget />
</body>
</html>
---
import sidebarWidget from "../components/sidebarWidget";
---

<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body class="min-h-screen bg-background font-mono">
<div class="border-b-2 bg-primary p-5">
<section class="mx-auto max-w-max bg-primary relative">
<h1 class="itali m-0 text-5xl sm:text-6xl md:text-8xl lg:text-9xl">
Priyasakhi<span
class="bg-accent p-2 text-2xl sm:text-3xl md:text-4xl lg:text-5xl"
>'s</span
>
</h1>
<p
class="absolute right-0 m-0 max-w-max bg-accent p-2 text-2xl sm:text-3xl md:text-4xl lg:text-5xl"
>
kitchen
</p>
</section>
</div>
<sidebarWidget />
</body>
</html>
this is the index.astro pls help me guys