Skip to content

Commit 8ecfcb6

Browse files
afsar-devafsar-dev
authored
Merge pull request #125 from afsar-dev/dev
Dev
2 parents 4857202 + 4297514 commit 8ecfcb6

19 files changed

+1592
-725
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
"remark-gfm": "^4.0.1",
5151
"simplebar": "^6.3.2",
5252
"simplebar-react": "^3.3.2",
53+
"styled-components": "^6.1.19",
5354
"svg-path-commander": "^2.1.10",
5455
"tailwind-merge": "^3.3.1",
5556
"three": "^0.176.0",

‎public/r/border-button.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@
1717
},
1818
{
1919
"path": "./src/components/nurui/border-button.tsx",
20-
"content": "import { cn } from \"@/lib/utils\";\nimport React from \"react\";\nimport { FaLocationArrow } from \"react-icons/fa\";\n\nconst BorderAnimationButton = ({ text , className}: { text: string , className?: string}) => {\n return (\n <div className={cn(\"relative inline-flex h-12 active:scale-95 transistion overflow-hidden rounded-lg p-[1px] focus:outline-none\", className)}>\n <span className=\"absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#e7029a_0%,#f472b6_50%,#bd5fff_100%)]\"></span>\n <p className=\"inline-flex h-full w-full cursor-pointer items-center justify-center rounded-lg bg-slate-950 px-7 text-sm font-medium text-white backdrop-blur-3xl gap-2 undefined\">\n <span>{text}</span>\n <FaLocationArrow />\n </p>\n </div>\n );\n};\n\nexport default BorderAnimationButton;\n",
20+
21+
"content": "import { cn } from \"@/lib/utils\";\r\nimport React from \"react\";\r\nimport { FaLocationArrow } from \"react-icons/fa\";\r\n\r\nconst BorderAnimationButton = ({ text , className}: { text: string , className?: string}) => {\r\n return (\r\n <div className={cn(\"relative inline-flex h-12 active:scale-95 transistion overflow-hidden rounded-lg p-[1px] focus:outline-none\", className)}>\r\n <span className=\"absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#e7029a_0%,#f472b6_50%,#bd5fff_100%)]\"></span>\r\n <p className=\"inline-flex h-full w-full cursor-pointer items-center justify-center rounded-lg bg-slate-950 px-7 text-sm font-medium text-white backdrop-blur-3xl gap-2 undefined\">\r\n <span>{text}</span>\r\n <FaLocationArrow />\r\n </p>\r\n </div>\r\n );\r\n};\r\n\r\nexport default BorderAnimationButton;\r\n",
22+
2123
"type": "registry:component"
2224
}
2325
]

‎public/r/copy-button.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@
1111
"files": [
1212
{
1313
"path": "./src/components/nurui/copy-button-demo.tsx",
14-
"content": "import React from \"react\";\nimport CopyButton from \"@/components/nurui/copy-button\";\n\nconst CopyButtonDemo = () => {\n return (\n <div className=\"flex items-center justify-center min-h-[20rem]\">\n <CopyButton\n text=\"[email protected]\"\n defaultLabel=\"Copy email address\"\n successLabel=\"Copied!\"\n />\n </div>\n );\n};\n\nexport default CopyButtonDemo;\n",
14+
"content": "import React from \"react\";\r\nimport CopyButton from \"@/components/nurui/copy-button\";\r\n\r\nconst CopyButtonDemo = () => {\r\n return (\r\n <div className=\"flex items-center justify-center min-h-[20rem]\">\r\n <CopyButton\r\n text=\"[email protected]\"\r\n defaultLabel=\"Copy email address\"\r\n successLabel=\"Copied!\"\r\n />\r\n </div>\r\n );\r\n};\r\n\r\nexport default CopyButtonDemo;\r\n",
1515
"type": "registry:component"
1616
},
1717
{
1818
"path": "./src/components/nurui/copy-button.tsx",
19-
"content": "\"use client\";\n\nimport { Copy } from \"lucide-react\";\nimport React, { useState } from \"react\";\nimport Lottie from \"lottie-react\";\nimport animationData from \"./data/confetti.json\";\n\ninterface CopyButtonProps {\n text: string; // the text/email to copy\n defaultLabel?: string; // label before copying\n successLabel?: string; // label after copying\n}\n\nconst CopyButton: React.FC<CopyButtonProps> = ({\n text,\n defaultLabel = \"Copy my email address\",\n successLabel = \"Email is Copied!\",\n}) => {\n const [copied, setCopied] = useState(false);\n\n const handleCopy = () => {\n navigator.clipboard.writeText(text);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000); // reset after 2s\n };\n\n return (\n <button\n onClick={handleCopy}\n className=\"relative mt-5 bg-fuchsia-950 px-4 py-2 rounded-lg font-bold flex gap-2 items-center text-white transition-colors\"\n style={{ minWidth: \"220px\" }} // ✅ lock button width (tweak px if needed)\n >\n <Copy className=\"w-5 h-5\" />\n\n {/* keep label width stable by wrapping */}\n <span className=\"whitespace-nowrap text-center flex-1\">\n {copied ? successLabel : defaultLabel}\n </span>\n\n {copied && (\n <div className=\"absolute inset-0 flex items-center justify-center pointer-events-none\">\n <Lottie\n animationData={animationData}\n loop={false}\n autoplay={true}\n style={{ width: 200, height: 200 }}\n />\n </div>\n )}\n </button>\n );\n};\n\nexport default CopyButton;\n",
19+
"content": "\"use client\";\r\n\r\nimport { Copy } from \"lucide-react\";\r\nimport React, { useState } from \"react\";\r\nimport Lottie from \"lottie-react\";\r\nimport animationData from \"./data/confetti.json\";\r\n\r\ninterface CopyButtonProps {\r\n text: string; // the text/email to copy\r\n defaultLabel?: string; // label before copying\r\n successLabel?: string; // label after copying\r\n}\r\n\r\nconst CopyButton: React.FC<CopyButtonProps> = ({\r\n text,\r\n defaultLabel = \"Copy my email address\",\r\n successLabel = \"Email is Copied!\",\r\n}) => {\r\n const [copied, setCopied] = useState(false);\r\n\r\n const handleCopy = () => {\r\n navigator.clipboard.writeText(text);\r\n setCopied(true);\r\n setTimeout(() => setCopied(false), 2000); // reset after 2s\r\n };\r\n\r\n return (\r\n <button\r\n onClick={handleCopy}\r\n className=\"relative mt-5 bg-fuchsia-950 px-4 py-2 rounded-lg font-bold flex gap-2 items-center text-white transition-colors\"\r\n style={{ minWidth: \"220px\" }} // ✅ lock button width (tweak px if needed)\r\n >\r\n <Copy className=\"w-5 h-5\" />\r\n\r\n {/* keep label width stable by wrapping */}\r\n <span className=\"whitespace-nowrap text-center flex-1\">\r\n {copied ? successLabel : defaultLabel}\r\n </span>\r\n\r\n {copied && (\r\n <div className=\"absolute inset-0 flex items-center justify-center pointer-events-none\">\r\n <Lottie\r\n animationData={animationData}\r\n loop={false}\r\n autoplay={true}\r\n style={{ width: 200, height: 200 }}\r\n />\r\n </div>\r\n )}\r\n </button>\r\n );\r\n};\r\n\r\nexport default CopyButton;\r\n",
2020
"type": "registry:component"
2121
}
2222
]

‎public/r/counter-loading.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
3+
"name": "counter-loading",
4+
"type": "registry:component",
5+
"dependencies": [
6+
"styled-components"
7+
],
8+
"devDependencies": [],
9+
"registryDependencies": [],
10+
"files": [
11+
{
12+
"path": "./src/components/nurui/counter-loading-demo.tsx",
13+
"content": "import React from \"react\";\r\nimport CounterLoading from \"./counter-loading\";\r\n\r\n\r\n\r\nconst CounterLoadingDemo = () => {\r\n return (\r\n <div className=\"flex items-center justify-center min-h-[30rem]\">\r\n <CounterLoading />\r\n </div>\r\n );\r\n};\r\n\r\nexport default CounterLoadingDemo;\r\n",
14+
"type": "registry:component"
15+
},
16+
{
17+
"path": "./src/components/nurui/counter-loading.tsx",
18+
"content": "\"use client\";\r\nimport React from \"react\";\r\nimport styled from \"styled-components\";\r\n\r\nconst CounterLoading = () => {\r\n return (\r\n <StyledWrapper>\r\n <div id=\"timer\">\r\n <div id=\"div1\" />\r\n <div id=\"div2\" />\r\n <div id=\"div3\" />\r\n <div id=\"div4\" />\r\n <div id=\"div5\" />\r\n <div id=\"div6\" />\r\n <div id=\"div7\" />\r\n <div id=\"div8\" />\r\n <div id=\"div9\" />\r\n <div id=\"div10\" />\r\n <div id=\"div11\" />\r\n <div id=\"div12\" />\r\n <div id=\"div13\" />\r\n <div id=\"div14\" />\r\n <div id=\"div15\" />\r\n </div>\r\n </StyledWrapper>\r\n );\r\n};\r\n\r\nconst StyledWrapper = styled.div`\r\n width: 100vw;\r\n height: 30rem;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n\r\n #timer {\r\n display: grid;\r\n grid-template-columns: repeat(3, 25px);\r\n grid-template-rows: repeat(5, 25px);\r\n gap: 10px;\r\n grid-template-areas:\r\n \"div1 div2 div3\"\r\n \"div4 div5 div6\"\r\n \"div7 div8 div9\"\r\n \"div10 div11 div12\"\r\n \"div13 div14 div15\";\r\n }\r\n\r\n #timer > div {\r\n background-color: skyblue;\r\n border-radius: 5px;\r\n }\r\n\r\n #div1 { grid-area: div1; animation: div1 10s both infinite; }\r\n #div2 { grid-area: div2; animation: div2 10s both infinite; }\r\n #div3 { grid-area: div3; }\r\n #div4 { grid-area: div4; animation: div4 10s both infinite; }\r\n #div5 { grid-area: div5; display: none; }\r\n #div6 { grid-area: div6; animation: div6 10s both infinite; }\r\n #div7 { grid-area: div7; animation: div7 10s both infinite; }\r\n #div8 { grid-area: div8; animation: div8 10s both infinite; }\r\n #div9 { grid-area: div9; }\r\n #div10 { grid-area: div10; animation: div10 10s both infinite; }\r\n #div11 { grid-area: div11; display: none; }\r\n #div12 { grid-area: div12; animation: div12 10s both infinite; }\r\n #div13 { grid-area: div13; animation: div13 10s both infinite; }\r\n #div14 { grid-area: div14; animation: div14 10s both infinite; }\r\n #div15 { grid-area: div15; }\r\n\r\n #div1 {\r\n grid-area: div1;\r\n animation: div1 10s both infinite;\r\n }\r\n\r\n @keyframes div1 {\r\n 0% {\r\n transform: translateX(0);\r\n }\r\n\r\n 10% {\r\n transform: translateX(70px);\r\n }\r\n\r\n 20% {\r\n transform: translateX(0);\r\n }\r\n\r\n 30% {\r\n transform: translateX(0);\r\n }\r\n\r\n 40% {\r\n transform: translateX(0);\r\n }\r\n\r\n 50% {\r\n transform: translateX(0);\r\n }\r\n\r\n 60% {\r\n transform: translateX(0);\r\n }\r\n\r\n 70% {\r\n transform: translateX(0);\r\n }\r\n\r\n 80% {\r\n transform: translateX(0);\r\n }\r\n\r\n 90% {\r\n transform: translateX(0);\r\n }\r\n\r\n 100% {\r\n transform: translateX(0);\r\n }\r\n }\r\n\r\n #div2 {\r\n grid-area: div2;\r\n animation: div2 10s both infinite;\r\n }\r\n\r\n @keyframes div2 {\r\n 0% {\r\n transform: translateX(0);\r\n }\r\n\r\n 10% {\r\n transform: translateX(35px);\r\n }\r\n\r\n 20% {\r\n transform: translateX(0);\r\n }\r\n\r\n 30% {\r\n transform: translateX(0);\r\n }\r\n\r\n 40% {\r\n transform: translateX(35px);\r\n }\r\n\r\n 50% {\r\n transform: translateX(0);\r\n }\r\n\r\n 60% {\r\n transform: translateX(0);\r\n }\r\n\r\n 70% {\r\n transform: translateX(0);\r\n }\r\n\r\n 80% {\r\n transform: translateX(0);\r\n }\r\n\r\n 90% {\r\n transform: translateX(0);\r\n }\r\n\r\n 100% {\r\n transform: translateX(0);\r\n }\r\n }\r\n\r\n #div3 {\r\n grid-area: div3;\r\n }\r\n\r\n #div4 {\r\n grid-area: div4;\r\n animation: div4 10s both infinite;\r\n }\r\n\r\n @keyframes div4 {\r\n 0% {\r\n transform: translateX(0);\r\n }\r\n\r\n 10% {\r\n transform: translateX(70px);\r\n }\r\n\r\n 20% {\r\n transform: translateX(70px);\r\n }\r\n\r\n 30% {\r\n transform: translateX(70px);\r\n }\r\n\r\n 40% {\r\n transform: translateX(0);\r\n }\r\n\r\n 50% {\r\n transform: translateX(0);\r\n }\r\n\r\n 60% {\r\n transform: translateX(0);\r\n }\r\n\r\n 70% {\r\n transform: translateX(70px);\r\n }\r\n\r\n 80% {\r\n transform: translateX(0);\r\n }\r\n\r\n 90% {\r\n transform: translateX(0);\r\n }\r\n\r\n 100% {\r\n transform: translateX(0);\r\n }\r\n }\r\n\r\n #div5 {\r\n grid-area: div5;\r\n display: none;\r\n }\r\n\r\n #div6 {\r\n grid-area: div6;\r\n animation: div6 10s both infinite;\r\n }\r\n\r\n @keyframes div6 {\r\n 0% {\r\n transform: translateX(0);\r\n }\r\n\r\n 10% {\r\n transform: translateX(0);\r\n }\r\n\r\n 20% {\r\n transform: translateX(0);\r\n }\r\n\r\n 30% {\r\n transform: translateX(0);\r\n }\r\n\r\n 40% {\r\n transform: translateX(0);\r\n }\r\n\r\n 50% {\r\n transform: translateX(-70px);\r\n }\r\n\r\n 60% {\r\n transform: translateX(-70px);\r\n }\r\n\r\n 70% {\r\n transform: translateX(0);\r\n }\r\n\r\n 80% {\r\n transform: translateX(0);\r\n }\r\n\r\n 90% {\r\n transform: translateX(0);\r\n }\r\n\r\n 100% {\r\n transform: translateX(0);\r\n }\r\n }\r\n\r\n #div7 {\r\n grid-area: div7;\r\n animation: div7 10s both infinite;\r\n }\r\n\r\n @keyframes div7 {\r\n 0% {\r\n transform: translateX(0);\r\n }\r\n\r\n 10% {\r\n transform: translateX(70px);\r\n }\r\n\r\n 20% {\r\n transform: translateX(0);\r\n }\r\n\r\n 30% {\r\n transform: translateX(0);\r\n }\r\n\r\n 40% {\r\n transform: translateX(0);\r\n }\r\n\r\n 50% {\r\n transform: translateX(0);\r\n }\r\n\r\n 60% {\r\n transform: translateX(0);\r\n }\r\n\r\n 70% {\r\n transform: translateX(70px);\r\n }\r\n\r\n 80% {\r\n transform: translateX(0);\r\n }\r\n\r\n 90% {\r\n transform: translateX(0);\r\n }\r\n\r\n 100% {\r\n transform: translateX(0);\r\n }\r\n }\r\n\r\n #div8 {\r\n grid-area: div8;\r\n animation: div8 10s both infinite;\r\n }\r\n\r\n @keyframes div8 {\r\n 0% {\r\n transform: translateX(35px);\r\n }\r\n\r\n 10% {\r\n transform: translateX(35px);\r\n }\r\n\r\n 20% {\r\n transform: translateX(0);\r\n }\r\n\r\n 30% {\r\n transform: translateX(0);\r\n }\r\n\r\n 40% {\r\n transform: translateX(0);\r\n }\r\n\r\n 50% {\r\n transform: translateX(0);\r\n }\r\n\r\n 60% {\r\n transform: translateX(0);\r\n }\r\n\r\n 70% {\r\n transform: translateX(35px);\r\n }\r\n\r\n 80% {\r\n transform: translateX(0);\r\n }\r\n\r\n 90% {\r\n transform: translateX(0);\r\n }\r\n\r\n 100% {\r\n transform: translateX(35px);\r\n }\r\n }\r\n\r\n #div9 {\r\n grid-area: div9;\r\n }\r\n\r\n #div10 {\r\n grid-area: div10;\r\n animation: div10 10s both infinite;\r\n }\r\n\r\n @keyframes div10 {\r\n 0% {\r\n transform: translateX(0);\r\n }\r\n\r\n 10% {\r\n transform: translateX(70px);\r\n }\r\n\r\n 20% {\r\n transform: translateX(0);\r\n }\r\n\r\n 30% {\r\n transform: translateX(70px);\r\n }\r\n\r\n 40% {\r\n transform: translateX(70px);\r\n }\r\n\r\n 50% {\r\n transform: translateX(70px);\r\n }\r\n\r\n 60% {\r\n transform: translateX(0);\r\n }\r\n\r\n 70% {\r\n transform: translateX(70px);\r\n }\r\n\r\n 80% {\r\n transform: translateX(0);\r\n }\r\n\r\n 90% {\r\n transform: translateX(70px);\r\n }\r\n\r\n 100% {\r\n transform: translateX(0);\r\n }\r\n }\r\n\r\n #div11 {\r\n grid-area: div11;\r\n display: none;\r\n }\r\n\r\n #div12 {\r\n grid-area: div12;\r\n animation: div12 10s both infinite;\r\n }\r\n\r\n @keyframes div12 {\r\n 0% {\r\n transform: translateX(0);\r\n }\r\n\r\n 10% {\r\n transform: translateX(0);\r\n }\r\n\r\n 20% {\r\n transform: translateX(-70px);\r\n }\r\n\r\n 30% {\r\n transform: translateX(0);\r\n }\r\n\r\n 40% {\r\n transform: translateX(0);\r\n }\r\n\r\n 50% {\r\n transform: translateX(0);\r\n }\r\n\r\n 60% {\r\n transform: translateX(0);\r\n }\r\n\r\n 70% {\r\n transform: translateX(0);\r\n }\r\n\r\n 80% {\r\n transform: translateX(0);\r\n }\r\n\r\n 90% {\r\n transform: translateX(0);\r\n }\r\n\r\n 100% {\r\n transform: translateX(0);\r\n }\r\n }\r\n\r\n #div13 {\r\n grid-area: div13;\r\n animation: div13 10s both infinite;\r\n }\r\n\r\n @keyframes div13 {\r\n 0% {\r\n transform: translateX(0);\r\n }\r\n\r\n 10% {\r\n transform: translateX(70px);\r\n }\r\n\r\n 20% {\r\n transform: translateX(0);\r\n }\r\n\r\n 30% {\r\n transform: translateX(0);\r\n }\r\n\r\n 40% {\r\n transform: translateX(70px);\r\n }\r\n\r\n 50% {\r\n transform: translateX(0);\r\n }\r\n\r\n 60% {\r\n transform: translateX(0);\r\n }\r\n\r\n 70% {\r\n transform: translateX(70px);\r\n }\r\n\r\n 80% {\r\n transform: translateX(0);\r\n }\r\n\r\n 90% {\r\n transform: translateX(0);\r\n }\r\n\r\n 100% {\r\n transform: translateX(0);\r\n }\r\n }\r\n\r\n #div14 {\r\n grid-area: div14;\r\n animation: div14 10s both infinite;\r\n }\r\n\r\n @keyframes div14 {\r\n 0% {\r\n transform: translateX(0);\r\n }\r\n\r\n 10% {\r\n transform: translateX(35px);\r\n }\r\n\r\n 20% {\r\n transform: translateX(0);\r\n }\r\n\r\n 30% {\r\n transform: translateX(0);\r\n }\r\n\r\n 40% {\r\n transform: translateX(35px);\r\n }\r\n\r\n 50% {\r\n transform: translateX(0);\r\n }\r\n\r\n 60% {\r\n transform: translateX(0);\r\n }\r\n\r\n 70% {\r\n transform: translateX(35px);\r\n }\r\n\r\n 80% {\r\n transform: translateX(0);\r\n }\r\n\r\n 90% {\r\n transform: translateX(0);\r\n }\r\n\r\n 100% {\r\n transform: translateX(0);\r\n }\r\n }\r\n\r\n #div15 {\r\n grid-area: div15;\r\n }\r\n`;\r\n\r\nexport default CounterLoading;\r\n",
19+
"type": "registry:component"
20+
}
21+
]
22+
}

0 commit comments

Comments
 (0)