titor/drawDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Delete shapes and header

Browse Source
This commit is contained in:
1ilit 2023-09-19 15:49:50 +03:00
parent 364866a70a
commit a030656bcf
2 changed files with 0 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/header.jsx
View File

@ -1,22 +0,0 @@
import React from "react";
import { Link } from "react-router-dom";
import blank_pfp from "../assets/blank_pfp.webp";
import logo from "../assets/logo_80.png";
export default function Header(props) {
return (
<nav className="flex justify-between py-2 bg-blue text-white items-center">
<Link to="/">
<img width={136} src={logo} alt="logo" className="ms-8" />
</Link>
<div className="text-xl">{props.name}</div>
<div className="flex justify-around items-center text-md me-8">
<button className="me-6 border px-4 py-1 rounded-xl">
<i className="fa-solid fa-lock me-2"></i>Share
</button>
<img src={blank_pfp} alt="profile" className="rounded-full h-8 w-8" />
</div>
</nav>
);
}

111
src/components/shape.jsx
View File

@ -1,111 +0,0 @@
import { React } from "react";
import { useDrag } from "react-dnd";
import { ObjectType, defaultTableTheme } from "../data/data";
function Table() {
const [{ isDragging }, drag] = useDrag(() => ({
type: "CARD",
item: { type: ObjectType.TABLE },
collect: (monitor) => ({
isDragging: !!monitor.isDragging(),
}),
}));
return (
<div
ref={drag}
className={`${
isDragging ? "opacity-50" : ""
} cursor-move w-[126px] h-[72px] border border-gray-400 rounded-md text-xs border-collapse bg-gray-100`}
>
<div
className={`h-[7px] w-full rounded-t`}
style={{ backgroundColor: defaultTableTheme }}
/>
<div className="px-2 py-0.5 border-b border-gray-400 bg-gray-200">
Table
</div>
<div className="px-1 py-0.5 border-b border-gray-400 flex items-center justify-between">
<div className="flex items-center">
<div className="w-[6px] h-[5px] bg-[#2f68ad] opacity-80 me-1 rounded-full" />
<div>id</div>
</div>
<div className="text-slate-400">UUID</div>
</div>
<div className="px-1 py-0.5 flex items-center justify-between">
<div className="flex items-center">
<div className="w-[6px] h-[5px] bg-[#2f68ad] opacity-80 me-1 rounded-full" />
<div>name</div>
</div>
<div className="text-slate-400">VARCHAR</div>
</div>
</div>
);
}
function Note() {
const [{ isDragging }, drag] = useDrag(() => ({
type: "CARD",
item: { type: ObjectType.NOTE },
collect: (monitor) => ({
isDragging: !!monitor.isDragging(),
}),
}));
return (
<div
ref={drag}
className={`${
isDragging ? "opacity-50" : ""
} cursor-move w-[82px] h-[82px] relative`}
>
<svg className="w-full h-full">
<path
d="M20 1 L76 1 A4 4 0 0 1 80 4 L80 76 A4 4 0 0 1 76 80 L4 80 A4 4 0 0 1 1 76 L1 20 M1 20 L16 20 A4 4 0 0 0 20 16 L20 1Z"
fill="#fcf7ac"
stroke="#665b25"
strokeLinejoin="round"
strokeWidth="1"
/>
</svg>
<div className="text-gray-700 absolute select-none text-xs top-[50%] left-[50%] translate-y-[-50%] translate-x-[-50%]">
Note
</div>
</div>
);
}
function Area() {
const [{ isDragging }, drag] = useDrag(() => ({
type: "CARD",
item: { type: ObjectType.AREA },
collect: (monitor) => ({
isDragging: !!monitor.isDragging(),
}),
}));
return (
<div ref={drag} className="cursor-move w-[92px] h-[82px] relative">
<div
className={`${isDragging ? "opacity-30" : "opacity-40"}
w-full h-full rounded border-2 border-slate-900`}
style={{ backgroundColor: defaultTableTheme }}
/>
<div className="text-gray-800 absolute top-[50%] left-[50%] translate-y-[-50%] translate-x-[-50%] select-none text-xs text-center">
Subject area
</div>
</div>
);
}
export default function Shape() {
return (
<div>
<Table />
<div className="py-2"></div>
<Note />
<div className="py-2"></div>
<Area />
</div>
);
}