diff --git a/library/src/index.ts b/library/src/index.ts index 4437bc1..8af5b2c 100644 --- a/library/src/index.ts +++ b/library/src/index.ts @@ -185,7 +185,7 @@ export { default as Cuda } from "./library/cuda.js"; export { default as BracketsPink } from "./library/bracketsPink.js"; export { default as CodePink } from "./library/codePink.js"; export { default as Func } from "./library/func.js"; -export { default as Fresh } from "./library/denofresh.js"; +export { default as Fresh } from "./library/fresh.js"; export { default as StatamicAntlers } from "./library/statamicAntlers.js"; // Folders => diff --git a/library/src/library/babel.tsx b/library/src/library/babel.tsx index 9fc5340..94ac100 100644 --- a/library/src/library/babel.tsx +++ b/library/src/library/babel.tsx @@ -1,17 +1,17 @@ -import type { ComponentProps, FC } from "react" +import type { ComponentProps, FC } from "react"; -const Audio: FC> = (props) => ( - - - -) +const Babel: FC> = (props) => ( + + + +); -export default Audio \ No newline at end of file +export default Babel; diff --git a/library/src/library/denofresh.tsx b/library/src/library/fresh.tsx similarity index 100% rename from library/src/library/denofresh.tsx rename to library/src/library/fresh.tsx diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1c2afeb..eb6c49b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -22,7 +22,7 @@ importers: version: 0.6.6(prettier@3.3.3) turbo: specifier: latest - version: 2.1.1 + version: 2.1.2 library: devDependencies: @@ -56,6 +56,9 @@ importers: website: dependencies: + '@radix-ui/react-dialog': + specifier: 1.1.1 + version: 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@radix-ui/react-dropdown-menu': specifier: 2.1.1 version: 2.1.1(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -83,6 +86,9 @@ importers: '@vercel/remix': specifier: 2.11.2 version: 2.11.2(@remix-run/dev@2.11.2(@remix-run/react@2.11.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.5.4))(@remix-run/serve@2.11.2(typescript@5.5.4))(@types/node@22.5.4)(typescript@5.5.4)(vite@5.4.3(@types/node@22.5.4)))(@remix-run/node@2.11.2(typescript@5.5.4))(@remix-run/server-runtime@2.11.2(typescript@5.5.4))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + axios: + specifier: 1.7.7 + version: 1.7.7 class-variance-authority: specifier: 0.7.0 version: 0.7.0 @@ -107,6 +113,9 @@ importers: sonner: specifier: 1.5.0 version: 1.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + sugar-high: + specifier: 0.7.0 + version: 0.7.0 tailwind-merge: specifier: 2.5.2 version: 2.5.2 @@ -961,6 +970,19 @@ packages: '@types/react': optional: true + '@radix-ui/react-dialog@1.1.1': + resolution: {integrity: sha512-zysS+iU4YP3STKNS6USvFVqI4qqx8EpiwmT5TuCApVEBca+eRCbONi4EgzfNSuVnOXvC5UPHHMjs8RXO6DH9Bg==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-direction@1.1.0': resolution: {integrity: sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==} peerDependencies: @@ -1788,6 +1810,9 @@ packages: resolution: {integrity: sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg==} hasBin: true + asynckit@0.4.0: + resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==} + autoprefixer@10.4.20: resolution: {integrity: sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==} engines: {node: ^10 || ^12 || >=14} @@ -1803,6 +1828,9 @@ packages: resolution: {integrity: sha512-Mr2ZakwQ7XUAjp7pAwQWRhhK8mQQ6JAaNWSjmjxil0R8BPioMtQsTLOolGYkji1rcL++3dCqZA3zWqpT+9Ew6g==} engines: {node: '>=4'} + axios@1.7.7: + resolution: {integrity: sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==} + axobject-query@4.1.0: resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==} engines: {node: '>= 0.4'} @@ -2003,6 +2031,10 @@ packages: color-name@1.1.4: resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==} + combined-stream@1.0.8: + resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==} + engines: {node: '>= 0.8'} + comma-separated-tokens@2.0.3: resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==} @@ -2164,6 +2196,10 @@ packages: resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==} engines: {node: '>= 0.4'} + delayed-stream@1.0.0: + resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==} + engines: {node: '>=0.4.0'} + depd@2.0.0: resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==} engines: {node: '>= 0.8'} @@ -2565,6 +2601,15 @@ packages: flatted@3.3.1: resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==} + follow-redirects@1.15.9: + resolution: {integrity: sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==} + engines: {node: '>=4.0'} + peerDependencies: + debug: '*' + peerDependenciesMeta: + debug: + optional: true + for-each@0.3.3: resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==} @@ -2572,6 +2617,10 @@ packages: resolution: {integrity: sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==} engines: {node: '>=14'} + form-data@4.0.0: + resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==} + engines: {node: '>= 6'} + format@0.2.2: resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==} engines: {node: '>=0.4.x'} @@ -3940,6 +3989,9 @@ packages: resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==} engines: {node: '>= 0.10'} + proxy-from-env@1.1.0: + resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==} + pseudomap@1.0.2: resolution: {integrity: sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==} @@ -4391,6 +4443,9 @@ packages: engines: {node: '>=16 || 14 >=14.17'} hasBin: true + sugar-high@0.7.0: + resolution: {integrity: sha512-YLiKnecbREzIW8pML5X0l7osEYBgTrQI29BB7wjIoDOpZ6F7dAkbY7PoI5BNBN7hWio+3pn6+emaNLPkJbmB8A==} + supports-color@5.5.0: resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==} engines: {node: '>=4'} @@ -4542,41 +4597,41 @@ packages: typescript: optional: true - turbo-darwin-64@2.1.1: - resolution: {integrity: sha512-aYNuJpZlCoi0Htd79fl/2DywpewGKijdXeOfg9KzNuPVKzSMYlAXuAlNGh0MKjiOcyqxQGL7Mq9LFhwA0VpDpQ==} + turbo-darwin-64@2.1.2: + resolution: {integrity: sha512-3TEBxHWh99h2yIzkuIigMEOXt/ItYQp0aPiJjPd1xN4oDcsKK5AxiFKPH9pdtfIBzYsY59kQhZiFj0ELnSP7Bw==} cpu: [x64] os: [darwin] - turbo-darwin-arm64@2.1.1: - resolution: {integrity: sha512-tifJKD8yHY48rHXPMcM8o1jI/Jk2KCaXiNjTKvvy9Zsim61BZksNVLelIbrRoCGwAN6PUBZO2lGU5iL/TQJ5Pw==} + turbo-darwin-arm64@2.1.2: + resolution: {integrity: sha512-he0miWNq2WxJzsH82jS2Z4MXpnkzn9SH8a79iPXiJkq25QREImucscM4RPasXm8wARp91pyysJMq6aasD45CeA==} cpu: [arm64] os: [darwin] - turbo-linux-64@2.1.1: - resolution: {integrity: sha512-Js6d/bSQe9DuV9c7ITXYpsU/ADzFHABdz1UIHa7Oqjj9VOEbFeA9WpAn0c+mdJrVD+IXJFbbDZUjN7VYssmtcg==} + turbo-linux-64@2.1.2: + resolution: {integrity: sha512-fKUBcc0rK8Vdqv5a/E3CSpMBLG1bzwv+Q0Q83F8fG2ZfNCNKGbcEYABdonNZkkx141Rj03cZQFCgxu3MVEGU+A==} cpu: [x64] os: [linux] - turbo-linux-arm64@2.1.1: - resolution: {integrity: sha512-LidzTCq0yvQ+N8w8Qub9FmhQ/mmEIeoqFi7DSupekEV2EjvE9jw/zYc9Pk67X+g7dHVfgOnvVzmrjChdxpFePw==} + turbo-linux-arm64@2.1.2: + resolution: {integrity: sha512-sV8Bpmm0WiuxgbhxymcC7wSsuxfBBieI98GegSwbr/bs1ANAgzCg93urIrdKdQ3/b31zZxQwcaP4FBF1wx1Qdg==} cpu: [arm64] os: [linux] turbo-stream@2.3.0: resolution: {integrity: sha512-PhEr9mdexoVv+rJkQ3c8TjrN3DUghX37GNJkSMksoPR4KrXIPnM2MnqRt07sViIqX9IdlhrgtTSyjoVOASq6cg==} - turbo-windows-64@2.1.1: - resolution: {integrity: sha512-GKc9ZywKwy4xLDhwXd6H07yzl0TB52HjXMrFLyHGhCVnf/w0oq4sLJv2sjbvuarPjsyx4xnCBJ3m3oyL2XmFtA==} + turbo-windows-64@2.1.2: + resolution: {integrity: sha512-wcmIJZI9ORT9ykHGliFE6kWRQrlH930QGSjSgWC8uFChFFuOyUlvC7ttcxuSvU9VqC7NF4C+GVAcFJQ8lTjN7g==} cpu: [x64] os: [win32] - turbo-windows-arm64@2.1.1: - resolution: {integrity: sha512-oFKkMj11KKUv3xSK9/fhAEQTxLUp1Ol1EOktwc32+SFtEU0uls7kosAz0b+qe8k3pJGEMFdDPdqoEjyJidbxtQ==} + turbo-windows-arm64@2.1.2: + resolution: {integrity: sha512-zdnXjrhk7YO6CP+Q5wPueEvOCLH4lDa6C4rrwiakcWcPgcQGbVozJlo4uaQ6awo8HLWQEvOwu84RkWTdLAc/Hw==} cpu: [arm64] os: [win32] - turbo@2.1.1: - resolution: {integrity: sha512-u9gUDkmR9dFS8b5kAYqIETK4OnzsS4l2ragJ0+soSMHh6VEeNHjTfSjk1tKxCqLyziCrPogadxP680J+v6yGHw==} + turbo@2.1.2: + resolution: {integrity: sha512-Jb0rbU4iHEVQ18An/YfakdIv9rKnd3zUfSE117EngrfWXFHo3RndVH96US3GsT8VHpwTncPePDBT2t06PaFLrw==} hasBin: true type-check@0.4.0: @@ -5660,6 +5715,28 @@ snapshots: optionalDependencies: '@types/react': 18.3.5 + '@radix-ui/react-dialog@1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@radix-ui/primitive': 1.1.0 + '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.5)(react@18.3.1) + '@radix-ui/react-context': 1.1.0(@types/react@18.3.5)(react@18.3.1) + '@radix-ui/react-dismissable-layer': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-focus-guards': 1.1.0(@types/react@18.3.5)(react@18.3.1) + '@radix-ui/react-focus-scope': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-id': 1.1.0(@types/react@18.3.5)(react@18.3.1) + '@radix-ui/react-portal': 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-presence': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-slot': 1.1.0(@types/react@18.3.5)(react@18.3.1) + '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.5)(react@18.3.1) + aria-hidden: 1.2.4 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-remove-scroll: 2.5.7(@types/react@18.3.5)(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.5 + '@types/react-dom': 18.3.0 + '@radix-ui/react-direction@1.1.0(@types/react@18.3.5)(react@18.3.1)': dependencies: react: 18.3.1 @@ -6608,6 +6685,8 @@ snapshots: astring@1.9.0: {} + asynckit@0.4.0: {} + autoprefixer@10.4.20(postcss@8.4.45): dependencies: browserslist: 4.23.3 @@ -6624,6 +6703,14 @@ snapshots: axe-core@4.10.0: {} + axios@1.7.7: + dependencies: + follow-redirects: 1.15.9 + form-data: 4.0.0 + proxy-from-env: 1.1.0 + transitivePeerDependencies: + - debug + axobject-query@4.1.0: {} bail@2.0.2: {} @@ -6841,6 +6928,10 @@ snapshots: color-name@1.1.4: {} + combined-stream@1.0.8: + dependencies: + delayed-stream: 1.0.0 + comma-separated-tokens@2.0.3: {} commander@4.1.1: {} @@ -6992,6 +7083,8 @@ snapshots: has-property-descriptors: 1.0.2 object-keys: 1.1.1 + delayed-stream@1.0.0: {} + depd@2.0.0: {} dequal@2.0.3: {} @@ -7645,6 +7738,8 @@ snapshots: flatted@3.3.1: {} + follow-redirects@1.15.9: {} + for-each@0.3.3: dependencies: is-callable: 1.2.7 @@ -7654,6 +7749,12 @@ snapshots: cross-spawn: 7.0.3 signal-exit: 4.1.0 + form-data@4.0.0: + dependencies: + asynckit: 0.4.0 + combined-stream: 1.0.8 + mime-types: 2.1.35 + format@0.2.2: {} forwarded@0.2.0: {} @@ -9069,6 +9170,8 @@ snapshots: forwarded: 0.2.0 ipaddr.js: 1.9.1 + proxy-from-env@1.1.0: {} + pseudomap@1.0.2: {} pump@2.0.1: @@ -9601,6 +9704,8 @@ snapshots: pirates: 4.0.6 ts-interface-checker: 0.1.13 + sugar-high@0.7.0: {} + supports-color@5.5.0: dependencies: has-flag: 3.0.0 @@ -9780,34 +9885,34 @@ snapshots: - tsx - yaml - turbo-darwin-64@2.1.1: + turbo-darwin-64@2.1.2: optional: true - turbo-darwin-arm64@2.1.1: + turbo-darwin-arm64@2.1.2: optional: true - turbo-linux-64@2.1.1: + turbo-linux-64@2.1.2: optional: true - turbo-linux-arm64@2.1.1: + turbo-linux-arm64@2.1.2: optional: true turbo-stream@2.3.0: {} - turbo-windows-64@2.1.1: + turbo-windows-64@2.1.2: optional: true - turbo-windows-arm64@2.1.1: + turbo-windows-arm64@2.1.2: optional: true - turbo@2.1.1: + turbo@2.1.2: optionalDependencies: - turbo-darwin-64: 2.1.1 - turbo-darwin-arm64: 2.1.1 - turbo-linux-64: 2.1.1 - turbo-linux-arm64: 2.1.1 - turbo-windows-64: 2.1.1 - turbo-windows-arm64: 2.1.1 + turbo-darwin-64: 2.1.2 + turbo-darwin-arm64: 2.1.2 + turbo-linux-64: 2.1.2 + turbo-linux-arm64: 2.1.2 + turbo-windows-64: 2.1.2 + turbo-windows-arm64: 2.1.2 type-check@0.4.0: dependencies: diff --git a/website/app/components/card.tsx b/website/app/components/card.tsx index 9ab5b6e..4423632 100644 --- a/website/app/components/card.tsx +++ b/website/app/components/card.tsx @@ -1,19 +1,12 @@ import type { iIcons } from "@/data/svgs"; -import { clipboard, lower } from "@/utils"; +import { clipboard } from "@/utils"; import { toast } from "sonner"; -import { Github, Reactjs } from "@react-symbols/icons"; -import { Button, buttonVariants } from "@/ui/button"; -import { ArrowUpRightIcon, CodeIcon, CopyIcon } from "@/ui/icons/feather"; -import ExternalLink from "./externalLink"; -import { - Tooltip, - TooltipContent, - TooltipProvider, - TooltipTrigger, -} from "@/ui/tooltip"; -import { globals } from "@/globals"; +import { Button } from "@/ui/button"; +import { CopyIcon } from "@/ui/icons/feather"; + +import GetCode from "./getCode"; interface iCard extends iIcons { isFolder: boolean; @@ -35,57 +28,19 @@ const Card = (props: iCard) => {

{props.name}

- - - - - - - -

Copy React Component

- - - - - - - - - - -

Check Source Code

- - - - + +
); diff --git a/website/app/components/getCode/index.tsx b/website/app/components/getCode/index.tsx new file mode 100644 index 0000000..c2c4c93 --- /dev/null +++ b/website/app/components/getCode/index.tsx @@ -0,0 +1,143 @@ +import { type FC, useState } from "react"; + +import { Github, Reactjs } from "@react-symbols/icons"; +import { toast } from "sonner"; +import axios from "axios"; +import { highlight } from "sugar-high"; + +import { clipboard, lower } from "@/utils"; +import { globals } from "@/globals"; + +import { Button, buttonVariants } from "@/ui/button"; +import { + Dialog, + DialogContent, + DialogFooter, + DialogHeader, + DialogTitle, +} from "@/ui/dialog"; +import { + AlertIcon, + ArrowUpRightIcon, + CodeIcon, + CopyIcon, +} from "@/ui/icons/feather"; +import ExternalLink from "@/components/externalLink"; +import Loading from "@/components/loading"; + +interface iGetCode { + componentName: string; + isFolder: boolean; + reactComponent: FC>; +} + +const GetCode = (props: iGetCode) => { + const [open, setOpen] = useState(false); + const [isLoading, setLoading] = useState(true); + const [fileContent, setFileContent] = useState(""); + + // ⚙️ Github Urls: + const ghUrl = props.isFolder + ? `${globals.githubSrcRepository}library/folders/${lower( + props.componentName, + )}.tsx` + : `${globals.githubSrcRepository}library/${lower(props.componentName)}.tsx`; + const ghRawUrl = props.isFolder + ? `${globals.githubRawUrl}library/folders/${lower(props.componentName)}.tsx` + : `${globals.githubRawUrl}library/${lower(props.componentName)}.tsx`; + + const handleGetCode = async () => { + setOpen(true); + try { + const response = await axios.get(ghRawUrl); + setFileContent(response.data); + } catch (error) { + console.error( + "⚠️ React-Symbols Website - Error fetching the Github Raw URL. Please create a Github Issue.", + error, + ); + } finally { + setLoading(false); + } + }; + + const handleCopyContent = async () => { + await clipboard(fileContent); + toast.success("Copied code to clipboard", { + icon: , + }); + }; + + return ( + <> + + + + + + + {props.componentName} + + + {isLoading ? ( +
+ +

+ Fetching component data +

+
+ ) : fileContent ? ( +
+
+ + {lower(props.componentName)}.tsx +
+
+ 
+
+
+ ) : ( +
+ +

+ Error fetching component data +

+
+ )} + + + + View on Github + + + + + + + + ); +}; + +export default GetCode; diff --git a/website/app/components/loading.tsx b/website/app/components/loading.tsx index ca7d75b..cf148c9 100644 --- a/website/app/components/loading.tsx +++ b/website/app/components/loading.tsx @@ -1,6 +1,7 @@ import { cn } from "@/utils"; interface iLoading { + size: number; className?: string; } @@ -16,8 +17,8 @@ const Loading = (props: iLoading) => ( className="animate-spin-slow" fill="none" viewBox="0 0 80 80" - width={55} - height={55} + width={props.size} + height={props.size} > ; + return ( + + ); } export default function Index() { diff --git a/website/app/routes/folders._index.tsx b/website/app/routes/folders._index.tsx index 51e2ef3..bb63a10 100644 --- a/website/app/routes/folders._index.tsx +++ b/website/app/routes/folders._index.tsx @@ -18,7 +18,7 @@ export async function clientLoader() { } export function HydrateFallback() { - return ; + return ; } export default function Folders() { diff --git a/website/app/styles/globals.css b/website/app/styles/globals.css index 885f53a..cd03f34 100644 --- a/website/app/styles/globals.css +++ b/website/app/styles/globals.css @@ -5,6 +5,14 @@ @layer base { :root { --radius: 0.5rem; + --sh-class: #648de8; + --sh-sign: #21cee8; + --sh-string: #21cee8; + --sh-keyword: #c084fc; + --sh-comment: #565f89; + --sh-jsxliterals: #648de8; + --sh-property: #21cee8; + --sh-entity: #c084fc; } } diff --git a/website/app/ui/dialog.tsx b/website/app/ui/dialog.tsx new file mode 100644 index 0000000..de7c8f7 --- /dev/null +++ b/website/app/ui/dialog.tsx @@ -0,0 +1,119 @@ +/* eslint-disable react/prop-types */ + +import * as React from "react"; +import * as DialogPrimitive from "@radix-ui/react-dialog"; + +import { CrossIcon } from "@/ui/icons/feather"; +import { cn } from "@/utils"; + +const Dialog = DialogPrimitive.Root; +const DialogTrigger = DialogPrimitive.Trigger; +const DialogPortal = DialogPrimitive.Portal; +const DialogClose = DialogPrimitive.Close; + +const DialogOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +DialogOverlay.displayName = DialogPrimitive.Overlay.displayName; + +const DialogContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + + {children} + + + Close + + + +)); +DialogContent.displayName = DialogPrimitive.Content.displayName; + +const DialogHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+); +DialogHeader.displayName = "DialogHeader"; + +const DialogFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+); +DialogFooter.displayName = "DialogFooter"; + +const DialogTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +DialogTitle.displayName = DialogPrimitive.Title.displayName; + +const DialogDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +DialogDescription.displayName = DialogPrimitive.Description.displayName; + +export { + Dialog, + DialogPortal, + DialogOverlay, + DialogTrigger, + DialogClose, + DialogContent, + DialogHeader, + DialogFooter, + DialogTitle, + DialogDescription, +}; diff --git a/website/app/ui/icons/feather.tsx b/website/app/ui/icons/feather.tsx index 6f0639d..46ea945 100644 --- a/website/app/ui/icons/feather.tsx +++ b/website/app/ui/icons/feather.tsx @@ -125,3 +125,31 @@ export const BoxIcon = (props: SVGProps) => ( ); + +export const CrossIcon = (props: SVGProps) => ( + + + +); + +export const AlertIcon = (props: SVGProps) => ( + + + +); diff --git a/website/app/utils/index.ts b/website/app/utils/index.ts index 5a37bb0..19f51b8 100644 --- a/website/app/utils/index.ts +++ b/website/app/utils/index.ts @@ -5,8 +5,18 @@ export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } -export const lower = (str: string) => - str.charAt(0).toLowerCase() + str.slice(1); +export function lower(input: string): string { + return input + .split(/[^a-zA-Z0-9]+/) + .map((word, index) => { + if (index === 0) { + return word.charAt(0).toLowerCase() + word.slice(1); + } else { + return word.charAt(0).toUpperCase() + word.slice(1); + } + }) + .join(""); +} const MIMETYPE = "text/plain"; diff --git a/website/package.json b/website/package.json index b39dab6..56d5f24 100644 --- a/website/package.json +++ b/website/package.json @@ -14,6 +14,7 @@ "typecheck": "tsc" }, "dependencies": { + "@radix-ui/react-dialog": "1.1.1", "@radix-ui/react-dropdown-menu": "2.1.1", "@radix-ui/react-slider": "1.2.0", "@radix-ui/react-slot": "1.1.0", @@ -23,6 +24,7 @@ "@remix-run/react": "2.11.2", "@remix-run/serve": "2.11.2", "@vercel/remix": "2.11.2", + "axios": "1.7.7", "class-variance-authority": "0.7.0", "clsx": "2.1.1", "fast-npm-meta": "0.2.2", @@ -31,6 +33,7 @@ "react": "18.3.1", "react-dom": "18.3.1", "sonner": "1.5.0", + "sugar-high": "0.7.0", "tailwind-merge": "2.5.2", "tailwindcss-animate": "1.0.7" },