UI update

.github/FUNDING.yml

@@ -1 +1 @@
-custom: ["https://sharuco.lndev.me/donation", "https://www.buymeacoffee.com/lndev]
+custom: ["https://store.lndev.me/buy/3a21351e-5fe2-4664-9a94-a4bcde619e2d", "https://www.buymeacoffee.com/lndev"]

README.md

@@ -11,48 +11,43 @@ Share your code. Manage Form & Link.
 ## Requirements
 
 - Node (>=18.18.0 recommended) + npm
-- docker + docker-compose
-- make (for Makefile targets)
 
 ## How to Install
 
 ```bash
 # clone the repository and cd into it:
 git clone https://github.com/ln-dev7/sharuco && cd sharuco
 
-# Tips : make help to see all make target
-
-## --- WITH DOCKER ---
-# build and up the whole stack and start it with one command:
-# note, all env are available in the example
-make docker-build-up
-
-# to build the app container only:
-make docker-build
-
-# to run the app container:
-make docker-run
-
-## --- NO DOCKER ---
 # copy the .env.example to .env and fill all env variables
 cp .env.example .env
 
-#   - `NEXT_PUBLIC_FIREBASE_API_KEY`: Your Firebase API Key.
-#   - `NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN`: Your Firebase Auth Domain.
-#   - `NEXT_PUBLIC_FIREBASE_PROJECT_ID`: Your Firebase Project ID.
-#   - `NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET`: Your Firebase Storage Bucket.
-#   - `NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID`: Your Firebase Messaging Sender ID.
-#   - `NEXT_PUBLIC_FIREBASE_APP_ID`: Your Firebase App ID.
-#   - `NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID`: Your Firebase Measurement ID.
+#   - `NEXT_PUBLIC_FIREBASE_API_KEY` : Firebase API Key
+#   - `NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN` : Firebase Auth Domain
+#   - `NEXT_PUBLIC_FIREBASE_PROJECT_ID` : Firebase Project ID
+#   - `NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET` : Firebase Storage Bucket
+#   - `NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID` : Firebase Messaging Sender ID
+#   - `NEXT_PUBLIC_FIREBASE_APP_ID` : Firebase App ID
+#   - `NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID` : Firebase Measurement ID
+#   - `NEXT_PUBLIC_NOTCH_PAY_API_URL` : Notch Pay API URL
+#   - `NEXT_PUBLIC_NOTCH_PAY_PUBLIC_KEY` : Notch Pay Public Key
+#   - `NEXT_PUBLIC_NOTCH_PAY_PRIVATE_KEY` : Notch Pay Private Key
+#   - `NEXT_PUBLIC_NOTCH_PAY_PUBLIC_KEY_TEST` : Notch Pay Public Key Test
+#   - `NEXT_PUBLIC_ALGOLIA_APP_ID` : Algolia App ID
+#   - `NEXT_PUBLIC_ALGOLIA_SEARCH_KEY` : Algolia Search Key
+#   - `NEXT_PUBLIC_ALGOLIA_ADMIN_KEY` : Algolia Admin Key
+#   - `NEXT_PUBLIC_ALGOLIA_USAGE_KEY` : Algolia Usage Key
+#   - `NEXT_PUBLIC_LINK_PREVIEW_KEY` : Link Preview Key
+#   - `NEXT_PUBLIC_RECAPTCHA_SITE_KEY` : Recaptcha Site Key
+#   - `NEXT_PUBLIC_RECAPTCHA_SECRET_KEY` : Recaptcha Secret Key
 
 # Install dependencies:
-make install
+npm install
 
 # build and start
-make build && make start
+npm run build
 
 # or on dev mode
-make dev
+npm run dev
 ```
 
 ## Usage
@@ -78,4 +73,4 @@ This project is licensed under the MIT License.
 2. DataBase / Auth: [Firebase](https://firebase.google.com/)
 3. Hosting: [Vercel](https://vercel.com/)
 4. UI : [UI Shadcn](https://ui.shadcn.com/) ( Tailwind CSS + Radix UI )
-5. Tools: [React Query](https://tanstack.com/query/v3/), [React Hook Form](https://react-hook-form.com/)
+5. Tools: [React Query](https://tanstack.com/query/v3/), [React Hook Form](https://react-hook-form.com/)

components.json

@@ -6,7 +6,7 @@
   "tailwind": {
     "config": "tailwind.config.js",
     "css": "styles/globals.css",
-    "baseColor": "slate",
+    "baseColor": "zinc",
     "cssVariables": true
   },
   "aliases": {

components/algolia/algolia-search-code.tsx

@@ -31,7 +31,7 @@ export default function AlgoliaSearchCode() {
           root: "w-full mt-0 mb-3 rounded-none",
           form: "w-full relative rounded-none",
           input:
-            "outline-none w-full rounded-none p-4 pl-12 text-sm text-gray-900 border border-x-0 border-gray-300 bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-slate-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",
+            "outline-none w-full rounded-none p-4 pl-12 text-sm text-gray-900 border border-x-0 border-gray-300 bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-zinc-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",
           submit: "absolute left-[14px] top-[19px]",
           reset: "hidden",
         }}
@@ -44,9 +44,9 @@ export default function AlgoliaSearchCode() {
 function Hit({ hit }) {
   return (
     <a href={`/code-preview/${hit.objectID}`}>
-      <div className="mb-4 w-full overflow-hidden rounded-lg border p-4 hover:border-sky-500 dark:border-slate-300 dark:hover:border-sky-500">
+      <div className="mb-4 w-full overflow-hidden rounded-lg border p-4 hover:border-sky-500 dark:border-zinc-300 dark:hover:border-sky-500">
         <div className="flex flex-col items-start">
-          <h3 className="mb-2 text-lg font-semibold leading-none tracking-tight text-slate-700 dark:text-slate-300 ">
+          <h3 className="mb-2 text-lg font-semibold leading-none tracking-tight text-zinc-700 dark:text-zinc-300 ">
             {hit.idAuthor}
           </h3>
           <Badge variant="outline">{hit.language}</Badge>
@@ -56,7 +56,7 @@ function Hit({ hit }) {
           <Highlight
             attribute="description"
             classNames={{
-              root: "text-sm text-muted-foreground text-slate-700 dark:text-slate-300 ",
+              root: "text-sm text-muted-foreground text-zinc-700 dark:text-zinc-300 ",
               highlighted: "bg-sky-500 text-white",
             }}
             hit={hit}

components/algolia/algolia-search-form.tsx

@@ -35,7 +35,7 @@ export default function AlgoliaSearchForm() {
           root: "w-full mt-0 mb-3 rounded-none",
           form: "w-full relative rounded-none",
           input:
-            "outline-none w-full rounded-none p-4 pl-12 text-sm text-gray-900 border border-x-0 border-gray-300 bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-slate-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",
+            "outline-none w-full rounded-none p-4 pl-12 text-sm text-gray-900 border border-x-0 border-gray-300 bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-zinc-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",
           submit: "absolute left-[14px] top-[19px]",
           reset: "hidden",
         }}
@@ -53,12 +53,12 @@ export default function AlgoliaSearchForm() {
 function Hit({ hit }) {
   return (
     <a href={`/form/${hit.objectID}`}>
-      <div className="mb-4 flex w-full flex-col items-start gap-2 overflow-hidden rounded-lg border p-4 hover:border-sky-500 dark:border-slate-300 dark:hover:border-sky-500">
+      <div className="mb-4 flex w-full flex-col items-start gap-2 overflow-hidden rounded-lg border p-4 hover:border-sky-500 dark:border-zinc-300 dark:hover:border-sky-500">
         <h2 className="text-lg font-semibold">{hit.name}</h2>
         <Highlight
           attribute="description"
           classNames={{
-            root: "line-clamp-4 text-sm text-medium text-slate-700 dark:text-slate-300 ",
+            root: "line-clamp-4 text-sm text-medium text-zinc-700 dark:text-zinc-300 ",
             highlighted: "bg-sky-500 text-white",
           }}
           hit={hit}

components/algolia/algolia-search-link.tsx

@@ -49,7 +49,7 @@ export default function AlgoliaSearchLink() {
           root: "w-full mt-0 mb-3 rounded-none",
           form: "w-full relative rounded-none",
           input:
-            "outline-none w-full rounded-none p-4 pl-12 text-sm text-gray-900 border border-x-0 border-gray-300 bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-slate-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",
+            "outline-none w-full rounded-none p-4 pl-12 text-sm text-gray-900 border border-x-0 border-gray-300 bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-zinc-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",
           submit: "absolute left-[14px] top-[19px]",
           reset: "hidden",
         }}
@@ -67,12 +67,12 @@ export default function AlgoliaSearchLink() {
 function Hit({ hit }) {
   return (
     <a href={`${hit.link}`} target="_blank">
-      <div className="mb-4 flex w-full flex-col items-start gap-2 overflow-hidden rounded-lg border p-4 hover:border-sky-500 dark:border-slate-300 dark:hover:border-sky-500">
+      <div className="mb-4 flex w-full flex-col items-start gap-2 overflow-hidden rounded-lg border p-4 hover:border-sky-500 dark:border-zinc-300 dark:hover:border-sky-500">
         <div>
           <Highlight
             attribute="description"
             classNames={{
-              root: "line-clamp-4 text-sm text-medium text-slate-700 dark:text-slate-300 ",
+              root: "line-clamp-4 text-sm text-medium text-zinc-700 dark:text-zinc-300 ",
               highlighted: "bg-sky-500 text-white",
             }}
             hit={hit}

components/avatar-user.tsx

@@ -16,7 +16,6 @@ import {
   Sheet,
   SheetContent,
   SheetDescription,
-  SheetFooter,
   SheetHeader,
   SheetTitle,
   SheetTrigger,
@@ -50,7 +49,7 @@ export function AvatarUser() {
       <SheetTrigger asChild>
         <div className="relative">
           {data && data.exists && data.data.premium && (
-            <div className="absolute -bottom-1 -right-1 z-10 flex items-center justify-center rounded-full border-2 border-yellow-500 bg-white dark:bg-slate-800">
+            <div className="absolute -bottom-1 -right-1 z-10 flex items-center justify-center rounded-full border-2 border-yellow-500 bg-white dark:bg-zinc-800">
               <Verified className="h-5 w-5 shrink-0 p-1 text-yellow-500" />
             </div>
           )}
@@ -125,7 +124,7 @@ export function AvatarUser() {
         {user && (
           <>
             <Separator className="mb-4 mt-8" />
-            <p className="mb-1 text-sm text-slate-500 dark:text-slate-400">
+            <p className="mb-1 text-sm text-zinc-500 dark:text-zinc-400">
               Follow Sharuco on{" "}
             </p>
             <Link
@@ -137,7 +136,7 @@ export function AvatarUser() {
                 className={buttonVariants({
                   size: "sm",
                   variant: "ghost",
-                  className: "text-slate-700 dark:text-slate-400",
+                  className: "text-zinc-700 dark:text-zinc-400",
                 })}
               >
                 <Icons.gitHub className="h-5 w-5" />
@@ -153,7 +152,7 @@ export function AvatarUser() {
                 className={buttonVariants({
                   size: "sm",
                   variant: "ghost",
-                  className: "text-slate-700 dark:text-slate-400",
+                  className: "text-zinc-700 dark:text-zinc-400",
                 })}
               >
                 <Icons.twitter className="h-5 w-5 fill-current" />