-
Notifications
You must be signed in to change notification settings - Fork 0
/
ProjectStruct.tsx
50 lines (46 loc) · 1.56 KB
/
ProjectStruct.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
"use client";
import React, { useState } from "react";
import SyntaxHighlighter from "react-syntax-highlighter";
import { Button } from "./ui/button";
import { IoCopyOutline } from "react-icons/io5";
import { useToast } from "./ui/use-toast";
import { useTreeStruct } from "@/state/tree-structure";
const ProjectStruct = () => {
const { treeStruct } = useTreeStruct();
const [copy, setCopy] = useState<boolean>(false);
const { toast } = useToast();
const tree: string = `${treeStruct}`;
return (
<div className="mt-20 xl:w-1/2 mx-auto relative w-3/4 border shadow-md border-blue-400 shadow-white bg-[#3a] rounded-lg overflow-hidden mb-10">
<div className="flex justify-between px-4 text-white text-xs items-center bg-gradient-to-b from-black to-cyan-900 ">
<p className="text-sm"></p>
<Button
variant={"outline"}
className="hover:bg-cyan-900 hover:text-white border border-cyan-700 shadow-sm shadow-cyan-200"
onClick={() => {
toast({
title: "Copied to your clipboard",
description: "Project tree structure",
});
navigator.clipboard.writeText(tree);
setCopy(true);
}}
>
<IoCopyOutline />
</Button>
</div>
<SyntaxHighlighter
language="bash"
customStyle={{
padding: "25px",
backgroundColor: "#09090b",
color: "white",
}}
wrapLongLines={true}
>
{tree}
</SyntaxHighlighter>
</div>
);
};
export default ProjectStruct;