opsnippets 1.0.2 → 1.0.3

package/README.md

@@ -1,49 +1,47 @@
-# Installation
-
- ```bash
-   npm i opsnippets
-   ```
-
-# Usage
-
-
-```javascript
-import { CodeBlock} from  "demo"
-function  App() {
-const  code = `
-import React from 'react';
-import CodeSnippet from './CodeSnippet';
-const App = () => {
-return (
-<div>
-<h1>My Code Snippet Example</h1>
-<CodeSnippet />
-</div>
-);
-};
-export default App;`
-return (
-	<>
-	   <CodeBlock  code={code}  />
-	</>
-    )
- }
-export  default  App;
-   ```
-   <a href="https://imgbb.com/"><img src="https://i.ibb.co/gVrTCJN/Screenshot-from-2024-08-10-18-12-35.png" border="0"></a>
-
-
-```javascript
-import { OneLineBlock} from  "demo"
-function  App() {
-return (
-	<>
-      <OneLineBlock  command="npm i mongoose"  />
-    </>
-	)
-}
-export  default  App;
- ```
-
-
-<a href="https://imgbb.com/"><img src="https://i.ibb.co/vYJqrrc/Screenshot-from-2024-08-10-18-13-23.png" alt="Screenshot-from-2024-08-10-18-13-23"  border="0"></a>
+# Installation
+
+ ```bash
+   npm i opsnippets
+   ```
+
+# Usage
+```javascript
+import { CodeBlock} from  "demo"
+function  App() {
+const  code = `
+import React from 'react';
+import CodeSnippet from './CodeSnippet';
+const App = () => {
+return (
+<div>
+<h1>My Code Snippet Example</h1>
+<CodeSnippet />
+</div>
+  );
+};
+export default App;`
+return (
+	<>
+	   <CodeBlock  code={code}  />
+	</>
+    )
+}
+export  default  App;
+   ```
+   <a href="https://imgbb.com/"><img src="https://i.ibb.co/gVrTCJN/Screenshot-from-2024-08-10-18-12-35.png" border="0"></a>
+
+
+```javascript
+import { OneLineBlock} from  "demo"
+function  App() {
+return (
+	<>
+      <OneLineBlock  command="npm i mongoose"  />
+    </>
+    )
+}
+export  default  App;
+ ```
+
+
+<a href="https://imgbb.com/"><img src="https://i.ibb.co/vYJqrrc/Screenshot-from-2024-08-10-18-13-23.png" alt="Screenshot-from-2024-08-10-18-13-23"  border="0"></a>

package/assets.d.ts

@@ -1,6 +1,6 @@
-// src/assets.d.ts
-declare module '*.png' {
-    const src: string;
-    export default src;
-  }
+// src/assets.d.ts
+declare module '*.png' {
+    const src: string;
+    export default src;
+  }
   

package/dist/components/OneLineCommand.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+type TypeProp = "dark" | "light" | "basic" | "blue" | "green" | "purple" | "orange" | "red" | "yellow" | "teal";
+interface props {
+    command: string;
+    type: TypeProp;
+    width?: string;
+    height?: string;
+    title?: string;
+}
+declare const OneLineBlock: ({ command, type, width, height, title, }: props) => React.JSX.Element;
+export { OneLineBlock };

package/dist/index.d.ts

@@ -1,4 +1,2 @@
-export * from "./components/Button";
-export * from "./hooks/counter";
-export * from "./components/OneLineComand";
+export * from "./components/OneLineCommand";
 export * from "./components/CodeBlock";

package/dist/index.js

@@ -3,31 +3,11 @@ import { useState } from 'react';
 import { Prism } from 'react-syntax-highlighter';
 import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
-const UseCounter = () => {
-    const [count, setCount] = useState(0);
-    const increment = () => {
-        setCount(count + 1);
-    };
-    const decrement = () => {
-        setCount(count - 1);
-    };
-    return { increment, decrement, count };
-};
-
-const Increment = () => {
-    const { increment } = UseCounter();
-    return (React.createElement("button", { onClick: increment }, "Increment"));
-};
-const Decrement = () => {
-    const { decrement } = UseCounter();
-    return (React.createElement("button", { onClick: decrement }, "Decrement"));
-};
-
 var copyIcon = "data:image/png;base64,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";
 
 var tickIcon = "data:image/png;base64,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";
 
-const OneLineBlock = ({ command }) => {
+const OneLineBlock = ({ command, type, width = "400", height = "0", title = "Terminal", }) => {
     const [isCopied, setIsCopied] = useState(false);
     const copyToClipboard = () => {
         navigator.clipboard.writeText(command);
@@ -36,52 +16,115 @@ const OneLineBlock = ({ command }) => {
             setIsCopied(false);
         }, 1000);
     };
+    const colorScheme = {
+        dark: {
+            background: "#1A1B26",
+            text: "#A3E635",
+            highlight: "#7dd3fc",
+            border: "1px solid #2D3748",
+        },
+        light: {
+            background: "#f8fafc",
+            text: "#334155",
+            highlight: "#2563eb",
+            border: "1px solid #94a3b8",
+        },
+        basic: {
+            background: "#272822",
+            text: "#F8F8F2",
+            highlight: "#66D9EF",
+            border: "1px solid #A6E22E",
+        },
+        blue: {
+            background: "#1E3A8A",
+            text: "#BFDBFE",
+            highlight: "#3B82F6",
+            border: "1px solid #60A5FA",
+        },
+        green: {
+            background: "#064E3B",
+            text: "#D1FAE5",
+            highlight: "#10B981",
+            border: "1px solid #22D3EE",
+        },
+        purple: {
+            background: "#4C1D95",
+            text: "#E9D5FF",
+            highlight: "#A78BFA",
+            border: "1px solid #C084FC",
+        },
+        orange: {
+            background: "#7C2D12",
+            text: "#FFEDD5",
+            highlight: "#FB923C",
+            border: "1px solid #F97316",
+        },
+        red: {
+            background: "#7F1D1D",
+            text: "#FFE4E6",
+            highlight: "#EF4444",
+            border: "1px solid #F87171",
+        },
+        yellow: {
+            background: "#78350F",
+            text: "#FEF9C3",
+            highlight: "#FACC15",
+            border: "1px solid #FBBF24",
+        },
+        teal: {
+            background: "#134E4A",
+            text: "#CCFBF1",
+            highlight: "#14B8A6",
+            border: "1px solid #2DD4BF",
+        },
+    };
+    const colors = colorScheme[type];
     return (React.createElement("div", { style: {
-            width: "400px",
-            background: '#1e293b',
-            display: 'flex',
+            width: width + "px",
+            background: colors.background,
+            display: "flex",
             flexDirection: "column",
-            // justifyItems: "center",
             padding: "2px",
             borderRadius: "5px",
-            color: "white",
+            color: colors.text,
             fontFamily: "Arial, sans-serif",
             fontSize: "18px",
             fontWeight: "bold",
         } },
         React.createElement("div", { style: {
-                height: '50px',
-                display: 'flex',
+                height: "50px",
+                display: "flex",
                 justifyContent: "space-between",
-                border: "1px ",
                 alignItems: "center",
-                borderBottom: "1px solid white",
-                padding: '5px'
+                borderBottom: colors.border,
+                padding: "5px",
             } },
             React.createElement("p", { style: {
-                    color: "#7dd3fc",
-                    fontSize: '20px',
+                    color: colors.highlight,
+                    fontSize: "20px",
                     padding: "5px",
-                    fontWeight: 'lighter'
-                } }, "Terminal"),
+                    fontWeight: "lighter",
+                } }, title),
             React.createElement("button", { onClick: () => copyToClipboard(), style: {
                     width: "30px",
-                    height: '30px',
-                    cursor: "pointer"
+                    height: "30px",
+                    cursor: "pointer",
+                    background: "none",
+                    border: "none",
                 } },
                 React.createElement("img", { width: "100%", height: "100%", style: {
-                        objectFit: "contain"
-                    }, src: !isCopied ? copyIcon : tickIcon }))),
+                        objectFit: "contain",
+                    }, src: !isCopied ? copyIcon : tickIcon, alt: isCopied ? "Copied" : "Copy" }))),
         React.createElement("div", { style: {
                 display: "flex",
                 alignItems: "center",
-                gap: "10px"
+                gap: "10px",
             } },
             React.createElement("span", { className: "icon" },
-                React.createElement("svg", { viewBox: "0 0 24 24", fill: "#7dd3fc", color: '#7dd3fc', height: "1   3", width: "13", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", className: "w-[19px] h-[19px] text-gray-800 dark:text-white" },
-                    React.createElement("path", { d: "m9 5 7 7-7 7", "stroke-width": "3", "stroke-linejoin": "round", "stroke-linecap": "round", stroke: "currentColor" }))),
+                React.createElement("svg", { viewBox: "0 0 24 24", fill: colors.highlight, height: "13", width: "13", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" },
+                    React.createElement("path", { d: "m9 5 7 7-7 7", strokeWidth: "3", strokeLinejoin: "round", strokeLinecap: "round", stroke: "currentColor" }))),
             React.createElement("p", { style: {
-                    fontFamily: "monospace"
+                    fontFamily: "monospace",
                 } }, command))));
 };
 
@@ -117,4 +160,4 @@ const CodeBlock = ({ code }) => {
                 }, src: !isCopied ? copyIcon : tickIcon }))));
 };
 
-export { CodeBlock, Decrement, Increment, OneLineBlock, UseCounter };
+export { CodeBlock, OneLineBlock };

package/package.json

@@ -1,29 +1,29 @@
-{
-  "name": "opsnippets",
-  "version": "1.0.2",
-  "description": "",
-  "main": "dist/index.js",
-  "type": "module",
-  "types": "dist/index.d.ts",
-   
-  "scripts": {
-    "build": "npx rollup -c"
-  },
-  "keywords": ["code","snippets","block","code block","snippets generator"],
-  "author": "om pharate",                                                                                                                                                                                     
-  "license": "ISC",
-  "devDependencies": {
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-typescript": "^11.1.6",
-    "@types/react": "^18.3.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "rollup": "^4.20.0",
-    "rollup-plugin-url": "^3.0.1",
-    "tslib": "^2.6.3"
-  },
-  "dependencies": {
-    "@types/react-syntax-highlighter": "^15.5.13",
-    "react-syntax-highlighter": "^15.5.0"
-  }
-}
+{
+  "name": "opsnippets",
+  "version": "1.0.3",
+  "description": "",
+  "main": "dist/index.js",
+  "type": "module",
+  "types": "dist/index.d.ts",
+   
+  "scripts": {
+    "build": "npx rollup -c"
+  },
+  "keywords": ["code","snippets","block","code block","snippets generator"],
+  "author": "om pharate",                                                                                                                                                                                     
+  "license": "ISC",
+  "devDependencies": {
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/react": "^18.3.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rollup": "^4.20.0",
+    "rollup-plugin-url": "^3.0.1",
+    "tslib": "^2.6.3"
+  },
+  "dependencies": {
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "react-syntax-highlighter": "^15.5.0"
+  }
+}

package/rollup.config.js

@@ -1,22 +1,22 @@
-import { defineConfig } from "rollup";
-import typescript from "@rollup/plugin-typescript";
-import url from "rollup-plugin-url"; // Import the URL plugin
-
-export default defineConfig({
-  input: "src/index.ts",
-  output: {
-    dir: "dist",
-    format: "es",
-    name: "demo",
-  },
-  external: ["react", "react-dom"],
-  plugins: [
-    typescript({ tsconfig: "tsconfig.json" }),
-    url({
-      // Inline files smaller than 10 kbytes
-      limit: 10 * 1024,
-      // Output the files in a specific directory if the limit is exceeded
-      fileName: '[name].[hash][extname]',
-    }),
-  ],
-});
+import { defineConfig } from "rollup";
+import typescript from "@rollup/plugin-typescript";
+import url from "rollup-plugin-url"; // Import the URL plugin
+
+export default defineConfig({
+  input: "src/index.ts",
+  output: {
+    dir: "dist",
+    format: "es",
+    name: "demo",
+  },
+  external: ["react", "react-dom"],
+  plugins: [
+    typescript({ tsconfig: "tsconfig.json" }),
+    url({
+      // Inline files smaller than 10 kbytes
+      limit: 10 * 1024,
+      // Output the files in a specific directory if the limit is exceeded
+      fileName: '[name].[hash][extname]',
+    }),
+  ],
+});

package/src/components/CodeBlock.tsx

@@ -1,42 +1,42 @@
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
-import copyIcon from '../assets/copy.png'
-import tickIcon from '../assets/tick.png'
-import { useState } from 'react';
-import * as React from 'react';
-const CodeBlock = ({ code }: { code: string }) => {
-    const [isCopied, setIsCopied] = useState(false);
-    const copyToClipboard = () => {
-        navigator.clipboard.writeText(code);
-        setIsCopied(true);
-        setTimeout(() => {
-            setIsCopied(false);
-        }, 1000);
-    }
-    return (
-        <div style={{
-            display:"flex",
-            alignItems:'start',
-            justifyContent:"space-between",
-            padding:"5px",
-            borderRadius:"5px",
-            color:"white",
-            fontFamily:"Arial, sans-serif",
-            fontSize:"18px",
-            backgroundColor:'rgb(29, 31, 33)',
-            width:"40%",
-        }}>
-            <SyntaxHighlighter language="javascript" style={atomDark}>
-                {code}
-            </SyntaxHighlighter>
-            <button onClick={() => copyToClipboard()} style={{
-                width: "30px",
-                height: '30px',
-                cursor: "pointer"
-            }}><img width={"100%"} height={"100%"} style={{
-                objectFit: "contain"
-            }} src={!isCopied ? copyIcon : tickIcon} /></button>
-        </div>
-    )
-}
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import copyIcon from '../assets/copy.png'
+import tickIcon from '../assets/tick.png'
+import { useState } from 'react';
+import * as React from 'react';
+const CodeBlock = ({ code }: { code: string }) => {
+    const [isCopied, setIsCopied] = useState(false);
+    const copyToClipboard = () => {
+        navigator.clipboard.writeText(code);
+        setIsCopied(true);
+        setTimeout(() => {
+            setIsCopied(false);
+        }, 1000);
+    }
+    return (
+        <div style={{
+            display:"flex",
+            alignItems:'start',
+            justifyContent:"space-between",
+            padding:"5px",
+            borderRadius:"5px",
+            color:"white",
+            fontFamily:"Arial, sans-serif",
+            fontSize:"18px",
+            backgroundColor:'rgb(29, 31, 33)',
+            width:"40%",
+        }}>
+            <SyntaxHighlighter language="javascript" style={atomDark}>
+                {code}
+            </SyntaxHighlighter>
+            <button onClick={() => copyToClipboard()} style={{
+                width: "30px",
+                height: '30px',
+                cursor: "pointer"
+            }}><img width={"100%"} height={"100%"} style={{
+                objectFit: "contain"
+            }} src={!isCopied ? copyIcon : tickIcon} /></button>
+        </div>
+    )
+}
 export  {CodeBlock}

package/src/components/OneLineCommand.tsx

@@ -0,0 +1,201 @@
+import * as React from "react";
+import { useState } from "react";
+import copyIcon from "../assets/copy.png";
+import tickIcon from "../assets/tick.png";
+
+type TypeProp =
+  | "dark"
+  | "light"
+  | "basic"
+  | "blue"
+  | "green"
+  | "purple"
+  | "orange"
+  | "red"
+  | "yellow"
+  | "teal";
+
+interface props {
+  command: string;
+  type: TypeProp;
+  width?: string;
+  height?: string;
+  title?: string;
+}
+
+const OneLineBlock = ({
+  command,
+  type,
+  width = "400",
+  height = "0",
+  title = "Terminal",
+}: props) => {
+  const [isCopied, setIsCopied] = useState(false);
+
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(command);
+    setIsCopied(true);
+    setTimeout(() => {
+      setIsCopied(false);
+    }, 1000);
+  };
+
+  const colorScheme = {
+    dark: {
+      background: "#1A1B26",
+      text: "#A3E635",
+      highlight: "#7dd3fc",
+      border: "1px solid #2D3748",
+    },
+    light: {
+      background: "#f8fafc",
+      text: "#334155",
+      highlight: "#2563eb",
+      border: "1px solid #94a3b8",
+    },
+    basic: {
+      background: "#272822",
+      text: "#F8F8F2",
+      highlight: "#66D9EF",
+      border: "1px solid #A6E22E",
+    },
+    blue: {
+      background: "#1E3A8A",
+      text: "#BFDBFE",
+      highlight: "#3B82F6",
+      border: "1px solid #60A5FA",
+    },
+    green: {
+      background: "#064E3B",
+      text: "#D1FAE5",
+      highlight: "#10B981",
+      border: "1px solid #22D3EE",
+    },
+    purple: {
+      background: "#4C1D95",
+      text: "#E9D5FF",
+      highlight: "#A78BFA",
+      border: "1px solid #C084FC",
+    },
+    orange: {
+      background: "#7C2D12",
+      text: "#FFEDD5",
+      highlight: "#FB923C",
+      border: "1px solid #F97316",
+    },
+    red: {
+      background: "#7F1D1D",
+      text: "#FFE4E6",
+      highlight: "#EF4444",
+      border: "1px solid #F87171",
+    },
+    yellow: {
+      background: "#78350F",
+      text: "#FEF9C3",
+      highlight: "#FACC15",
+      border: "1px solid #FBBF24",
+    },
+    teal: {
+      background: "#134E4A",
+      text: "#CCFBF1",
+      highlight: "#14B8A6",
+      border: "1px solid #2DD4BF",
+    },
+  };
+
+  const colors = colorScheme[type];
+
+  return (
+    <div
+      style={{
+        width: width + "px",
+        background: colors.background,
+        display: "flex",
+        flexDirection: "column",
+        padding: "2px",
+        borderRadius: "5px",
+        color: colors.text,
+        fontFamily: "Arial, sans-serif",
+        fontSize: "18px",
+        fontWeight: "bold",
+      }}
+    >
+      <div
+        style={{
+          height: "50px",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          borderBottom: colors.border,
+          padding: "5px",
+        }}
+      >
+        <p
+          style={{
+            color: colors.highlight,
+            fontSize: "20px",
+            padding: "5px",
+            fontWeight: "lighter",
+          }}
+        >
+          {title}
+        </p>
+        <button
+          onClick={() => copyToClipboard()}
+          style={{
+            width: "30px",
+            height: "30px",
+            cursor: "pointer",
+            background: "none",
+            border: "none",
+          }}
+        >
+          <img
+            width={"100%"}
+            height={"100%"}
+            style={{
+              objectFit: "contain",
+            }}
+            src={!isCopied ? copyIcon : tickIcon}
+            alt={isCopied ? "Copied" : "Copy"}
+          />
+        </button>
+      </div>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: "10px",
+        }}
+      >
+        <span className="icon">
+          <svg
+            viewBox="0 0 24 24"
+            fill={colors.highlight}
+            height="13"
+            width="13"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+          >
+            <path
+              d="m9 5 7 7-7 7"
+              strokeWidth="3"
+              strokeLinejoin="round"
+              strokeLinecap="round"
+              stroke="currentColor"
+            ></path>
+          </svg>
+        </span>
+        <p
+          style={{
+            fontFamily: "monospace",
+          }}
+        >
+          {command}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export { OneLineBlock };

package/src/index.ts

@@ -1,4 +1,2 @@
-export * from "./components/Button";
-export * from "./hooks/counter";
-export * from "./components/OneLineComand";
-export * from "./components/CodeBlock"
+export * from "./components/OneLineCommand";
+export * from "./components/CodeBlock"

package/tsconfig.json

@@ -1,11 +1,11 @@
-{
-    "compilerOptions": {
-      "jsx": "react",
-      "target": "ES2020",
-      "module": "ESNext",
-      "declaration": true,
-      "declarationDir": "dist",
-      "strict": true,
-      "moduleResolution": "node",
-    }
+{
+    "compilerOptions": {
+      "jsx": "react",
+      "target": "ES2020",
+      "module": "ESNext",
+      "declaration": true,
+      "declarationDir": "dist",
+      "strict": true,
+      "moduleResolution": "node",
+    }
   }

package/src/components/Button.tsx

@@ -1,19 +0,0 @@
-import * as React from 'react'
-import { UseCounter } from '../hooks/counter'
-
-const Increment = () => {
-    const { increment} = UseCounter();
-    return (
-        <button onClick={increment}>Increment</button>
-    )
-}
-
-
-const Decrement = () => {
-    const { decrement} = UseCounter();
-    return (
-        <button onClick={decrement}>Decrement</button>
-    )
-}
-
-export { Decrement, Increment }

package/src/components/OneLineComand.tsx

@@ -1,88 +0,0 @@
-import * as React from 'react'
-import { useState } from 'react'
-import copyIcon from '../assets/copy.png'
-import tickIcon from '../assets/tick.png'
-const OneLineBlock = ({ command }: { command: string }) => {
-    const [isCopied, setIsCopied] = useState(false);
-    const copyToClipboard = () => {
-        navigator.clipboard.writeText(command);
-        setIsCopied(true);
-        setTimeout(() => {
-            setIsCopied(false);
-        }, 1000);
-    }
-    return (
-
-        <div style={{
-            width: "400px",
-            background: '#1e293b',
-            display: 'flex',
-            flexDirection: "column",
-            // justifyItems: "center",
-            padding: "2px",
-            borderRadius: "5px",
-            color: "white",
-            fontFamily: "Arial, sans-serif",
-            fontSize: "18px",
-            fontWeight: "bold",
-
-        }}>
-            <div style={{
-                height: '50px',
-                display: 'flex',
-                justifyContent: "space-between",
-                border: "1px ",
-                alignItems: "center",
-                borderBottom: "1px solid white",
-                padding: '5px'
-            }}>
-                <p style={{
-                    color: "#7dd3fc",
-                    fontSize: '20px',
-                    padding: "5px",
-                    fontWeight: 'lighter'
-                }}>Terminal</p>
-                <button onClick={() => copyToClipboard()} style={{
-                    width: "30px",
-                    height: '30px',
-                    cursor:"pointer"
-                }}><img width={"100%"} height={"100%"} style={{
-                    objectFit: "contain"
-                }} src={!isCopied ? copyIcon : tickIcon} /></button>
-            </div>
-            <div style={{
-                display: "flex",
-                alignItems: "center",
-                gap: "10px"
-
-            }}>
-                <span className="icon">
-                    <svg
-                        viewBox="0 0 24 24"
-                        fill="#7dd3fc"
-                        color='#7dd3fc'
-                        height="1   3"
-                        width="13"
-                        xmlns="http://www.w3.org/2000/svg"
-                        aria-hidden="true"
-                        className="w-[19px] h-[19px] text-gray-800 dark:text-white"
-                    >
-                        <path
-                            d="m9 5 7 7-7 7"
-                            stroke-width="3"
-                            stroke-linejoin="round"
-                            stroke-linecap="round"
-                            stroke="currentColor"
-                        ></path>
-                    </svg>
-                </span>
-                <p style={{
-                    fontFamily: "monospace"
-                }}>{command}</p>
-            </div>
-        </div>
-
-    )
-}
-
-export  {OneLineBlock}

package/src/hooks/counter.tsx

@@ -1,18 +0,0 @@
-import  { useState } from 'react'
-
-const UseCounter = () => {
-    const [count, setCount] = useState(0)
-
-    const increment = () => {
-        setCount(count + 1)
-    }
-
-    const decrement = () => {
-        setCount(count - 1)
-    }
-
-    return { increment, decrement, count }
-
-}
-
-export { UseCounter };