update replace code

components/UserComponent.js

@@ -0,0 +1,39 @@
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import React from 'react';
+
+const UserComponent = ({
+    id,
+    body
+}) => {
+    const {
+        setNodeRef,
+        attributes,
+        listeners,
+        transition,
+        transform,
+        isDragging,
+    } = useSortable({ id: id })
+
+    const style = {
+        transition,
+        transform: CSS.Transform.toString(transform),
+        border: '2px solid black',
+        marginBottom: 5,
+        marginTop: 5,
+        opacity: isDragging ? 0.5 : 1,
+    }
+
+    return (
+        <div
+            ref={setNodeRef}
+            {...attributes}
+            {...listeners}
+            style={style}
+        >
+            {body}
+        </div>
+    )
+}
+
+export default UserComponent;

components/layout.js

@@ -0,0 +1,16 @@
+import Sidebar from "./sidebar";
+import Header from "./header"
+
+export default function Layout(props) {
+    return (
+        <div>
+            <div className="flex w-full">
+                <Sidebar />
+                <div className="w-full px-6 md:px-10 py-6">
+                    <Header />
+                    <main>{props.children}</main>
+                </div>
+            </div>
+        </div>
+    );
+}

css/index.css

@@ -0,0 +1,47 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+    font-family: "Lato", sans-serif;
+}
+.background-radient {
+    background: radial-gradient(100% 100% at 18.07% 10.27%, #4299e1 0%, #2b6cb0 100%);
+}
+.div-custom-border {
+    border-top-right-radius: 25px;
+    border-bottom-right-radius: 25px;
+}
+.div-custom-border2 {
+    border-top-left-radius: 25px;
+    border-bottom-left-radius: 25px;
+}
+.right-100 {
+    animation: slideLeft 0.5s ease-in-out;
+}
+@keyframes slideLeft {
+    0% {
+        right: -100%;
+    }
+    100% {
+        top: 0;
+    }
+}
+
+* {
+    outline: none !important;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: transparent;
+}
+
+.vl {
+    height: 480px;
+}
+
+.text-gray {
+    color: #cbd5e0;
+}
+.alignTop td {
+    vertical-align: top;
+}
+

jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@components/*": ["components/*"]
+    }
+  }
+}