├── .eslintrc.json
├── bun.lockb
├── app
    ├── favicon.ico
    ├── opengraph-image.png
    ├── api
    │   ├── auth
    │   │   └── [...nextauth]
    │   │   │   └── route.ts
    │   └── feedback
    │   │   └── route.ts
    ├── sitemap.ts
    ├── dashboard
    │   ├── steps
    │   │   └── page.tsx
    │   ├── layout.tsx
    │   ├── pricing
    │   │   └── page.tsx
    │   ├── page.tsx
    │   └── feedbacks
    │   │   └── [id]
    │   │       └── page.tsx
    ├── robots.ts
    ├── actions
    │   ├── deleteFeedback.ts
    │   ├── deleteProject.ts
    │   └── createProject.ts
    ├── global-error.tsx
    ├── not-found.tsx
    ├── globals.css
    ├── layout.tsx
    ├── privacy
    │   └── page.tsx
    ├── page.tsx
    └── about
    │   └── page.tsx
├── public
    ├── Logo.png
    ├── peerlist.png
    ├── process1.png
    ├── process2.png
    └── process3.png
├── env.example
├── prisma
    ├── migrations
    │   ├── migration_lock.toml
    │   ├── 20240807181025_refatored
    │   │   └── migration.sql
    │   ├── 20240807180653_added_foreign_key_in_feedback_model
    │   │   └── migration.sql
    │   ├── 20240806174843_added_project_schema
    │   │   └── migration.sql
    │   ├── 20240809085715_adding
    │   │   └── migration.sql
    │   ├── 20240807043409_added_schema_for_the_feedbacks_and_updated_at_constraints
    │   │   └── migration.sql
    │   ├── 20240807103708_fixed_the_feedback_schema
    │   │   └── migration.sql
    │   ├── 20240807105030_refactored_whole_schema
    │   │   └── migration.sql
    │   ├── 20240806032711_initial_migration_for_authentication
    │   │   └── migration.sql
    │   ├── 20240806042013_corrected_auth_table
    │   │   └── migration.sql
    │   └── 20240807181559_refactored
    │   │   └── migration.sql
    └── schema.prisma
├── postcss.config.mjs
├── lib
    ├── utils.ts
    ├── db.ts
    └── auth.ts
├── components
    ├── theme-provider.tsx
    ├── GetStartedButton.tsx
    ├── Announcement.tsx
    ├── ui
    │   ├── label.tsx
    │   ├── textarea.tsx
    │   ├── input.tsx
    │   ├── separator.tsx
    │   ├── progress.tsx
    │   ├── sonner.tsx
    │   ├── tooltip.tsx
    │   ├── avatar.tsx
    │   ├── rainbow-button.tsx
    │   ├── button.tsx
    │   ├── tabs.tsx
    │   ├── card.tsx
    │   ├── accordion.tsx
    │   ├── table.tsx
    │   ├── dialog.tsx
    │   ├── sheet.tsx
    │   ├── hero-video-dialog.tsx
    │   ├── select.tsx
    │   └── dropdown-menu.tsx
    ├── CopyToClipboard.tsx
    ├── HomeForm.tsx
    ├── HomeAvatars.tsx
    ├── DashboardCards.tsx
    ├── magicui
    │   ├── blur-fade.tsx
    │   ├── border-beam.tsx
    │   └── particles.tsx
    ├── ProjectDeleteButton.tsx
    ├── TechStack.tsx
    ├── steps-page.tsx
    ├── Accordian.tsx
    ├── FeaturesSection.tsx
    ├── CreateProject.tsx
    ├── feedback-view.tsx
    ├── Navbar.tsx
    ├── Footer.tsx
    ├── Pricing.tsx
    ├── HowToUse.tsx
    ├── AuthButtons.tsx
    ├── Sidebar.tsx
    └── feedback-table.tsx
├── components.json
├── .gitignore
├── tsconfig.json
├── next.config.mjs
├── package.json
├── README.md
└── tailwind.config.ts


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/bun.lockb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/avayyyyyyy/Opinify/HEAD/bun.lockb


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/avayyyyyyy/Opinify/HEAD/app/favicon.ico


--------------------------------------------------------------------------------
/public/Logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/avayyyyyyy/Opinify/HEAD/public/Logo.png


--------------------------------------------------------------------------------
/public/peerlist.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/avayyyyyyy/Opinify/HEAD/public/peerlist.png


--------------------------------------------------------------------------------
/public/process1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/avayyyyyyy/Opinify/HEAD/public/process1.png


--------------------------------------------------------------------------------
/public/process2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/avayyyyyyy/Opinify/HEAD/public/process2.png


--------------------------------------------------------------------------------
/public/process3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/avayyyyyyy/Opinify/HEAD/public/process3.png


--------------------------------------------------------------------------------
/app/opengraph-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/avayyyyyyy/Opinify/HEAD/app/opengraph-image.png


--------------------------------------------------------------------------------
/env.example:
--------------------------------------------------------------------------------
1 | NEXTAUTH_SECRET=
2 | DATABASE_URL=
3 | GOOGLE_CLIENT_ID=
4 | GOOGLE_CLIENT_SECRET=
5 | AUTH_TRUST_HOST=


--------------------------------------------------------------------------------
/app/api/auth/[...nextauth]/route.ts:
--------------------------------------------------------------------------------
1 | import { handlers } from "@/lib/auth";
2 | export const { GET, POST } = handlers;
3 | 


--------------------------------------------------------------------------------
/prisma/migrations/migration_lock.toml:
--------------------------------------------------------------------------------
1 | # Please do not edit this file manually
2 | # It should be added in your version-control system (i.e. Git)
3 | provider = "postgresql"


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     tailwindcss: {},
5 |   },
6 | };
7 | 
8 | export default config;
9 | 


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/app/sitemap.ts:
--------------------------------------------------------------------------------
 1 | import { MetadataRoute } from "next";
 2 | 
 3 | export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
 4 |   return [
 5 |     {
 6 |       url: `${process.env.AUTH_TRUST_HOST}`,
 7 |       lastModified: new Date(),
 8 |     },
 9 |   ];
10 | }
11 | 


--------------------------------------------------------------------------------
/prisma/migrations/20240807181025_refatored/migration.sql:
--------------------------------------------------------------------------------
1 | -- DropForeignKey
2 | ALTER TABLE "feedbacks" DROP CONSTRAINT "feedbacks_projectId_fkey";
3 | 
4 | -- AddForeignKey
5 | ALTER TABLE "feedbacks" ADD CONSTRAINT "feedbacks_projectId_fkey" FOREIGN KEY ("projectId") REFERENCES "projects"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
6 | 


--------------------------------------------------------------------------------
/prisma/migrations/20240807180653_added_foreign_key_in_feedback_model/migration.sql:
--------------------------------------------------------------------------------
1 | -- DropForeignKey
2 | ALTER TABLE "feedbacks" DROP CONSTRAINT "feedbacks_projectId_fkey";
3 | 
4 | -- AddForeignKey
5 | ALTER TABLE "feedbacks" ADD CONSTRAINT "feedbacks_projectId_fkey" FOREIGN KEY ("projectId") REFERENCES "projects"("id") ON DELETE CASCADE ON UPDATE CASCADE;
6 | 


--------------------------------------------------------------------------------
/components/theme-provider.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import { ThemeProvider as NextThemesProvider } from "next-themes";
 5 | import { type ThemeProviderProps } from "next-themes/dist/types";
 6 | 
 7 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
 8 |   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
 9 | }
10 | 


--------------------------------------------------------------------------------
/app/dashboard/steps/page.tsx:
--------------------------------------------------------------------------------
 1 | import { StepsPage } from "@/components/steps-page";
 2 | import { Metadata } from "next";
 3 | import React from "react";
 4 | 
 5 | export const metadata: Metadata = {
 6 |   title: "Steps",
 7 | };
 8 | 
 9 | const page = () => {
10 |   return (
11 |     <div className="mx-auto">
12 |       <StepsPage />
13 |     </div>
14 |   );
15 | };
16 | 
17 | export default page;
18 | 


--------------------------------------------------------------------------------
/app/robots.ts:
--------------------------------------------------------------------------------
 1 | import { MetadataRoute } from "next";
 2 | 
 3 | export default function robots(): MetadataRoute.Robots {
 4 |   return {
 5 |     rules: [
 6 |       {
 7 |         userAgent: "*",
 8 |         allow: ["/", "/about", "/privacy"],
 9 |         disallow: ["/dashboard", "/dashboard/feedbacks"],
10 |       },
11 |     ],
12 |     sitemap: `${process.env.AUTH_TRUST_HOST}sitemap.xml`,
13 |   };
14 | }
15 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "new-york",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.ts",
 8 |     "css": "app/globals.css",
 9 |     "baseColor": "zinc",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils"
16 |   }
17 | }


--------------------------------------------------------------------------------
/lib/db.ts:
--------------------------------------------------------------------------------
 1 | import { PrismaClient } from "@prisma/client";
 2 | 
 3 | const prismaClientSingleton = () => {
 4 |   return new PrismaClient();
 5 | };
 6 | 
 7 | declare const globalThis: {
 8 |   prismaGlobal: ReturnType<typeof prismaClientSingleton>;
 9 | } & typeof global;
10 | 
11 | const prisma = globalThis.prismaGlobal ?? prismaClientSingleton();
12 | 
13 | export default prisma;
14 | 
15 | if (process.env.NODE_ENV !== "production") globalThis.prismaGlobal = prisma;
16 | 


--------------------------------------------------------------------------------
/app/actions/deleteFeedback.ts:
--------------------------------------------------------------------------------
 1 | "use server";
 2 | 
 3 | import prisma from "@/lib/db";
 4 | 
 5 | export const deleteFeedback = async (id: string) => {
 6 |   try {
 7 |     // console.log("id: ", id);
 8 |     const deleteFeedback = await prisma.feedback.delete({
 9 |       where: {
10 |         id: id,
11 |       },
12 |     });
13 | 
14 |     // console.log("deleteFeedback: ", deleteFeedback);
15 | 
16 |     return { success: true };
17 |   } catch (error) {
18 |     return { success: false };
19 |   }
20 | };
21 | 


--------------------------------------------------------------------------------
/prisma/migrations/20240806174843_added_project_schema/migration.sql:
--------------------------------------------------------------------------------
 1 | -- CreateTable
 2 | CREATE TABLE "Project" (
 3 |     "id" TEXT NOT NULL,
 4 |     "name" TEXT NOT NULL,
 5 |     "url" TEXT NOT NULL,
 6 |     "description" TEXT NOT NULL,
 7 |     "userId" TEXT NOT NULL,
 8 | 
 9 |     CONSTRAINT "Project_pkey" PRIMARY KEY ("id")
10 | );
11 | 
12 | -- AddForeignKey
13 | ALTER TABLE "Project" ADD CONSTRAINT "Project_userId_fkey" FOREIGN KEY ("userId") REFERENCES "users"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
14 | 


--------------------------------------------------------------------------------
/components/GetStartedButton.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import React from "react";
 3 | import { Button } from "./ui/button";
 4 | import { MoveRight } from "lucide-react";
 5 | import { signIn } from "next-auth/react";
 6 | 
 7 | const GetStartedButton = () => {
 8 |   return (
 9 |     <div>
10 |       <Button onClick={() => signIn("google")} className="mb-8 border">
11 |         Get Started for free <MoveRight size={16} className="ml-2" />
12 |       </Button>
13 |     </div>
14 |   );
15 | };
16 | 
17 | export default GetStartedButton;
18 | 


--------------------------------------------------------------------------------
/app/dashboard/layout.tsx:
--------------------------------------------------------------------------------
 1 | import Sidebar from "@/components/Sidebar";
 2 | import { auth } from "@/lib/auth";
 3 | import { redirect } from "next/navigation";
 4 | import React from "react";
 5 | 
 6 | const layout = async ({ children }: { children: React.ReactNode }) => {
 7 |   const user = await auth();
 8 | 
 9 |   if (!user?.user?.email) {
10 |     return redirect("/");
11 |   }
12 | 
13 |   return (
14 |     <div className="md:flex block min-h-[80vh]">
15 |       <Sidebar />
16 |       {children}
17 |     </div>
18 |   );
19 | };
20 | 
21 | export default layout;
22 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | .env
31 | 
32 | # vercel
33 | .vercel
34 | 
35 | # typescript
36 | *.tsbuildinfo
37 | next-env.d.ts
38 | .env
39 | 


--------------------------------------------------------------------------------
/app/dashboard/pricing/page.tsx:
--------------------------------------------------------------------------------
 1 | import PricingPage from "@/components/Pricing";
 2 | import { auth } from "@/lib/auth";
 3 | import { Metadata } from "next";
 4 | import { redirect } from "next/navigation";
 5 | import React from "react";
 6 | 
 7 | export const metadata: Metadata = {
 8 |   title: "Pricing",
 9 | };
10 | 
11 | const page = async () => {
12 |   const user = await auth();
13 | 
14 |   if (!user) {
15 |     return redirect("/");
16 |   }
17 | 
18 |   return (
19 |     <div className="mx-auto">
20 |       <PricingPage />
21 |     </div>
22 |   );
23 | };
24 | 
25 | export default page;
26 | 


--------------------------------------------------------------------------------
/prisma/migrations/20240809085715_adding/migration.sql:
--------------------------------------------------------------------------------
 1 | -- DropForeignKey
 2 | ALTER TABLE "feedbacks" DROP CONSTRAINT "feedbacks_projectId_fkey";
 3 | 
 4 | -- DropForeignKey
 5 | ALTER TABLE "projects" DROP CONSTRAINT "projects_userId_fkey";
 6 | 
 7 | -- AddForeignKey
 8 | ALTER TABLE "projects" ADD CONSTRAINT "projects_userId_fkey" FOREIGN KEY ("userId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
 9 | 
10 | -- AddForeignKey
11 | ALTER TABLE "feedbacks" ADD CONSTRAINT "feedbacks_projectId_fkey" FOREIGN KEY ("projectId") REFERENCES "projects"("id") ON DELETE CASCADE ON UPDATE CASCADE;
12 | 


--------------------------------------------------------------------------------
/components/Announcement.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const Announcement = () => {
 4 |   return (
 5 |     <>
 6 |       <div className="bg-zinc-900 px-4 py-3 text-zinc-100">
 7 |         <div className="text-center flex items-center justify-center md:text-sm text-xs font-medium">
 8 |           {/* <span className="font-bold md:block hidden">Update:</span> */}
 9 |           <div className="inline-block ml-2">
10 |             Congratulations, everyone! We’ve added over 10 new themes to
11 |             customize your feedback form. 🎉
12 |           </div>
13 |         </div>
14 |       </div>
15 |     </>
16 |   );
17 | };
18 | 
19 | export default Announcement;
20 | 


--------------------------------------------------------------------------------
/lib/auth.ts:
--------------------------------------------------------------------------------
 1 | import NextAuth from "next-auth";
 2 | import { PrismaAdapter } from "@auth/prisma-adapter";
 3 | import Google from "next-auth/providers/google";
 4 | import prisma from "./db";
 5 | 
 6 | export const { handlers, auth, signIn, signOut } = NextAuth({
 7 |   adapter: PrismaAdapter(prisma),
 8 |   providers: [
 9 |     Google({
10 |       clientId: process.env.GOOGLE_CLIENT_ID,
11 |       clientSecret: process.env.GOOGLE_CLIENT_SECRET,
12 |     }),
13 |   ],
14 |   pages: {
15 |     error: "/",
16 |     signIn: "/",
17 |     signOut: "/",
18 |   },
19 |   session: {
20 |     strategy: "jwt",
21 |   },
22 |   trustHost: true,
23 |   secret: process.env.NEXTAUTH_SECRET!,
24 | });
25 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "lib": ["dom", "dom.iterable", "esnext"],
 4 |     "allowJs": true,
 5 |     "skipLibCheck": true,
 6 |     "strict": true,
 7 |     "noEmit": true,
 8 |     "esModuleInterop": true,
 9 |     "module": "esnext",
10 |     "moduleResolution": "bundler",
11 |     "resolveJsonModule": true,
12 |     "isolatedModules": true,
13 |     "jsx": "preserve",
14 |     "incremental": true,
15 |     "plugins": [
16 |       {
17 |         "name": "next"
18 |       }
19 |     ],
20 |     "paths": {
21 |       "@/*": ["./*"]
22 |     }
23 |   },
24 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
25 |   "exclude": ["node_modules"]
26 | }
27 | 


--------------------------------------------------------------------------------
/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as LabelPrimitive from "@radix-ui/react-label"
 5 | import { cva, type VariantProps } from "class-variance-authority"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const labelVariants = cva(
10 |   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11 | )
12 | 
13 | const Label = React.forwardRef<
14 |   React.ElementRef<typeof LabelPrimitive.Root>,
15 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
16 |     VariantProps<typeof labelVariants>
17 | >(({ className, ...props }, ref) => (
18 |   <LabelPrimitive.Root
19 |     ref={ref}
20 |     className={cn(labelVariants(), className)}
21 |     {...props}
22 |   />
23 | ))
24 | Label.displayName = LabelPrimitive.Root.displayName
25 | 
26 | export { Label }
27 | 


--------------------------------------------------------------------------------
/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | export interface TextareaProps
 6 |   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 7 | 
 8 | const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 9 |   ({ className, ...props }, ref) => {
10 |     return (
11 |       <textarea
12 |         className={cn(
13 |           "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
14 |           className
15 |         )}
16 |         ref={ref}
17 |         {...props}
18 |       />
19 |     )
20 |   }
21 | )
22 | Textarea.displayName = "Textarea"
23 | 
24 | export { Textarea }
25 | 


--------------------------------------------------------------------------------
/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | export interface InputProps
 6 |   extends React.InputHTMLAttributes<HTMLInputElement> {}
 7 | 
 8 | const Input = React.forwardRef<HTMLInputElement, InputProps>(
 9 |   ({ className, type, ...props }, ref) => {
10 |     return (
11 |       <input
12 |         type={type}
13 |         className={cn(
14 |           "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
15 |           className
16 |         )}
17 |         ref={ref}
18 |         {...props}
19 |       />
20 |     )
21 |   }
22 | )
23 | Input.displayName = "Input"
24 | 
25 | export { Input }
26 | 


--------------------------------------------------------------------------------
/components/ui/separator.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as SeparatorPrimitive from "@radix-ui/react-separator"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Separator = React.forwardRef<
 9 |   React.ElementRef<typeof SeparatorPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
11 | >(
12 |   (
13 |     { className, orientation = "horizontal", decorative = true, ...props },
14 |     ref
15 |   ) => (
16 |     <SeparatorPrimitive.Root
17 |       ref={ref}
18 |       decorative={decorative}
19 |       orientation={orientation}
20 |       className={cn(
21 |         "shrink-0 bg-border",
22 |         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
23 |         className
24 |       )}
25 |       {...props}
26 |     />
27 |   )
28 | )
29 | Separator.displayName = SeparatorPrimitive.Root.displayName
30 | 
31 | export { Separator }
32 | 


--------------------------------------------------------------------------------
/components/ui/progress.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as ProgressPrimitive from "@radix-ui/react-progress"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Progress = React.forwardRef<
 9 |   React.ElementRef<typeof ProgressPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
11 | >(({ className, value, ...props }, ref) => (
12 |   <ProgressPrimitive.Root
13 |     ref={ref}
14 |     className={cn(
15 |       "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
16 |       className
17 |     )}
18 |     {...props}
19 |   >
20 |     <ProgressPrimitive.Indicator
21 |       className="h-full w-full flex-1 bg-primary transition-all"
22 |       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
23 |     />
24 |   </ProgressPrimitive.Root>
25 | ))
26 | Progress.displayName = ProgressPrimitive.Root.displayName
27 | 
28 | export { Progress }
29 | 


--------------------------------------------------------------------------------
/components/ui/sonner.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { useTheme } from "next-themes"
 4 | import { Toaster as Sonner } from "sonner"
 5 | 
 6 | type ToasterProps = React.ComponentProps<typeof Sonner>
 7 | 
 8 | const Toaster = ({ ...props }: ToasterProps) => {
 9 |   const { theme = "system" } = useTheme()
10 | 
11 |   return (
12 |     <Sonner
13 |       theme={theme as ToasterProps["theme"]}
14 |       className="toaster group"
15 |       toastOptions={{
16 |         classNames: {
17 |           toast:
18 |             "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
19 |           description: "group-[.toast]:text-muted-foreground",
20 |           actionButton:
21 |             "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
22 |           cancelButton:
23 |             "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
24 |         },
25 |       }}
26 |       {...props}
27 |     />
28 |   )
29 | }
30 | 
31 | export { Toaster }
32 | 


--------------------------------------------------------------------------------
/components/CopyToClipboard.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import React from "react";
 3 | import {
 4 |   Tooltip,
 5 |   TooltipContent,
 6 |   TooltipProvider,
 7 |   TooltipTrigger,
 8 | } from "./ui/tooltip";
 9 | import { Button } from "./ui/button";
10 | import { Copy } from "lucide-react";
11 | import { toast } from "sonner";
12 | 
13 | const CopyToClipboard = ({ codeString }: { codeString: string }) => {
14 |   const handleCopy = () => {
15 |     navigator.clipboard.writeText(codeString);
16 |     toast.success("Copied to clipboard successfully 🎉");
17 |   };
18 | 
19 |   return (
20 |     <div>
21 |       <TooltipProvider delayDuration={0}>
22 |         <Tooltip>
23 |           <TooltipTrigger asChild>
24 |             <Button onClick={handleCopy} variant={"outline"} size={"icon"}>
25 |               <Copy size={16} />
26 |             </Button>
27 |           </TooltipTrigger>
28 |           <TooltipContent>
29 |             <div>Copy to clipboard</div>
30 |           </TooltipContent>
31 |         </Tooltip>
32 |       </TooltipProvider>
33 |     </div>
34 |   );
35 | };
36 | 
37 | export default CopyToClipboard;
38 | 


--------------------------------------------------------------------------------
/app/global-error.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import { Button } from "@/components/ui/button";
 3 | import Link from "next/link";
 4 | import React from "react";
 5 | 
 6 | interface ErrorPageProps {
 7 |   statusCode?: number;
 8 |   title?: string;
 9 |   message?: string;
10 | }
11 | 
12 | const ErrorPage: React.FC<ErrorPageProps> = ({
13 |   statusCode = 500,
14 |   title = "An error occurred",
15 |   message = "We're sorry, but something went wrong. Please try again later.",
16 | }) => {
17 |   return (
18 |     <div>
19 |       <div className="grid min-h-[80vh] place-content-center px-4">
20 |         <h1 className="text-4xl font-bold text-slate-300 mb-4">
21 |           {statusCode} | {title}
22 |         </h1>
23 |         <p className="text-slate-200 text-center mb-6">{message}</p>
24 |         <Button asChild className="mt-3 text-slate-200" variant="outline">
25 |           <Link href="/">Go Back Home 🏡</Link>
26 |         </Button>
27 |         <p className="text-slate-200 font-thin text-center mt-6">
28 |           - Opinify.in -
29 |         </p>
30 |       </div>
31 |     </div>
32 |   );
33 | };
34 | 
35 | export default ErrorPage;
36 | 


--------------------------------------------------------------------------------
/components/HomeForm.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import React, { FormEvent, useState } from "react";
 3 | import { Input } from "./ui/input";
 4 | import { Button } from "./ui/button";
 5 | import { toast } from "sonner";
 6 | 
 7 | const HomeForm = () => {
 8 |   const [email, setEmail] = useState("");
 9 |   const pattern = /[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,6}/gm;
10 | 
11 |   function handleSubmit(e: FormEvent) {
12 |     e.preventDefault();
13 |     if (email && pattern.test(email)) {
14 |       toast.success("Thanks for joining waitlist! We'll let you in soon... 🥳");
15 |       setEmail("");
16 |     } else {
17 |       toast.error("Please enter a valid email 🥲");
18 |     }
19 |   }
20 | 
21 |   return (
22 |     <div>
23 |       <form onSubmit={handleSubmit} className="flex flex-col gap-y-4 w-80">
24 |         <Input
25 |           onChange={(e) => {
26 |             setEmail(e.target.value);
27 |           }}
28 |           value={email}
29 |           type="email"
30 |           placeholder="Enter your email..."
31 |         />
32 |         <Button type="submit" variant={"default"} className="mb-8">
33 |           Wishlist
34 |         </Button>
35 |       </form>
36 |     </div>
37 |   );
38 | };
39 | 
40 | export default HomeForm;
41 | 


--------------------------------------------------------------------------------
/prisma/migrations/20240807043409_added_schema_for_the_feedbacks_and_updated_at_constraints/migration.sql:
--------------------------------------------------------------------------------
 1 | /*
 2 |   Warnings:
 3 | 
 4 |   - A unique constraint covering the columns `[url]` on the table `Project` will be added. If there are existing duplicate values, this will fail.
 5 |   - Added the required column `updatedAt` to the `Project` table without a default value. This is not possible if the table is not empty.
 6 | 
 7 | */
 8 | -- AlterTable
 9 | ALTER TABLE "Project" ADD COLUMN     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
10 | ADD COLUMN     "updatedAt" TIMESTAMP(3) NOT NULL;
11 | 
12 | -- CreateTable
13 | CREATE TABLE "feedbacks" (
14 |     "id" TEXT NOT NULL,
15 |     "project_id" TEXT NOT NULL,
16 |     "feedback" TEXT NOT NULL,
17 |     "rating" INTEGER NOT NULL DEFAULT 3,
18 |     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
19 |     "updatedAt" TIMESTAMP(3) NOT NULL,
20 | 
21 |     CONSTRAINT "feedbacks_pkey" PRIMARY KEY ("id")
22 | );
23 | 
24 | -- CreateIndex
25 | CREATE UNIQUE INDEX "Project_url_key" ON "Project"("url");
26 | 
27 | -- AddForeignKey
28 | ALTER TABLE "feedbacks" ADD CONSTRAINT "feedbacks_project_id_fkey" FOREIGN KEY ("project_id") REFERENCES "Project"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
29 | 


--------------------------------------------------------------------------------
/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const TooltipProvider = TooltipPrimitive.Provider
 9 | 
10 | const Tooltip = TooltipPrimitive.Root
11 | 
12 | const TooltipTrigger = TooltipPrimitive.Trigger
13 | 
14 | const TooltipContent = React.forwardRef<
15 |   React.ElementRef<typeof TooltipPrimitive.Content>,
16 |   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
17 | >(({ className, sideOffset = 4, ...props }, ref) => (
18 |   <TooltipPrimitive.Content
19 |     ref={ref}
20 |     sideOffset={sideOffset}
21 |     className={cn(
22 |       "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
23 |       className
24 |     )}
25 |     {...props}
26 |   />
27 | ))
28 | TooltipContent.displayName = TooltipPrimitive.Content.displayName
29 | 
30 | export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
31 | 


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |   images: {
 4 |     remotePatterns: [
 5 |       {
 6 |         protocol: "https",
 7 |         hostname: "utfs.io",
 8 |       },
 9 |       {
10 |         protocol: "https",
11 |         hostname: "res.cloudinary.com",
12 |       },
13 |       {
14 |         protocol: "https",
15 |         hostname: "cdn.freelogovectors.net",
16 |       },
17 |     ],
18 |    
19 |   },
20 |   async headers() {
21 |     return [
22 |       {
23 |         // matching all API routes
24 |         source: "/api/:path*",
25 |         headers: [
26 |           { key: "Access-Control-Allow-Credentials", value: "true" },
27 |           { key: "Access-Control-Allow-Origin", value: "*" },
28 |           {
29 |             key: "Access-Control-Allow-Methods",
30 |             value: "POST",
31 |           },
32 |           {
33 |             key: "Access-Control-Allow-Headers",
34 |             value:
35 |               "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version",
36 |           },
37 |         ],
38 |       },
39 |     ];
40 |   },
41 |   compiler: {
42 |     removeConsole: process.env.AUTH_TRUST_HOST !== "http://localhost:3000"  // Remove console.log in production
43 | }
44 | };
45 | 
46 | export default nextConfig;
47 | 


--------------------------------------------------------------------------------
/components/HomeAvatars.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Avatar, AvatarImage } from "./ui/avatar";
 3 | import prisma from "@/lib/db";
 4 | 
 5 | const getFiveUsers = async () => {
 6 |   const users = await prisma.user.findMany({
 7 |     take: 5,
 8 |     select: {
 9 |       image: true, //
10 |     },
11 |   });
12 |   return users;
13 | };
14 | 
15 | const allProjectCount = async () => {
16 |   const project = await prisma.project.findMany();
17 |   return project.length;
18 | };
19 | 
20 | const HomeAvatars = async () => {
21 |   const users = await getFiveUsers();
22 |   const projectLength = await allProjectCount();
23 | 
24 |   // console.log(projectLength);
25 | 
26 |   return (
27 |     <div className="flex flex-col">
28 |       <div className="z-0 flex mx-auto items-center -space-x-2 *:ring *:ring-white">
29 |         {users.map((e, i) => (
30 |           <Avatar key={i} className="z-0 size-8">
31 |             <AvatarImage src={e.image ?? ""} alt="user images" />
32 |           </Avatar>
33 |         ))}
34 |       </div>
35 |       <p className="mx-auto my-3 text-center text-slate-400">
36 |         More than{" "}
37 |         <span className="text-slate-200">{projectLength.toString()}</span>{" "}
38 |         websites are currently using Opinify!
39 |       </p>
40 |     </div>
41 |   );
42 | };
43 | 
44 | export default HomeAvatars;
45 | 


--------------------------------------------------------------------------------
/app/not-found.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import { Button } from "@/components/ui/button";
 3 | import Link from "next/link";
 4 | import { useRouter } from "next/navigation";
 5 | import React, { useEffect, useState } from "react";
 6 | 
 7 | const Page = () => {
 8 |   const router = useRouter();
 9 |   const [countdown, setCountdown] = useState(5);
10 | 
11 |   useEffect(() => {
12 |     const timer = setTimeout(() => {
13 |       router.push("/");
14 |     }, 5000);
15 | 
16 |     const interval = setInterval(() => {
17 |       setCountdown((prev) => prev - 1);
18 |     }, 1000);
19 | 
20 |     return () => {
21 |       clearTimeout(timer);
22 |       clearInterval(interval);
23 |     };
24 |   }, [router]);
25 | 
26 |   return (
27 |     <div>
28 |       <div className="grid min-h-[80vh] place-content-center px-4">
29 |         <h1 className="uppercase text-center tracking-widest text-slate-300">
30 |           404 | Page Not Found!
31 |         </h1>
32 |         <p className="text-slate-200 text-center mt-4">
33 |           Redirecting to Home 🏡 Page in {countdown} seconds...
34 |         </p>
35 |         {/* <Button asChild className="mt-3 text-slate-200" variant={"link"}>
36 |           <Link href={"/"}>Go Back Home 🏡</Link>
37 |         </Button> */}
38 |         <p className="text-slate-200 font-thin text-center mt-2">
39 |           - Opinify.in -
40 |         </p>
41 |       </div>
42 |     </div>
43 |   );
44 | };
45 | 
46 | export default Page;
47 | 


--------------------------------------------------------------------------------
/prisma/migrations/20240807103708_fixed_the_feedback_schema/migration.sql:
--------------------------------------------------------------------------------
 1 | /*
 2 |   Warnings:
 3 | 
 4 |   - You are about to drop the column `updatedAt` on the `Project` table. All the data in the column will be lost.
 5 |   - You are about to drop the column `project_id` on the `feedbacks` table. All the data in the column will be lost.
 6 |   - You are about to drop the column `updatedAt` on the `feedbacks` table. All the data in the column will be lost.
 7 |   - Added the required column `email` to the `feedbacks` table without a default value. This is not possible if the table is not empty.
 8 |   - Added the required column `name` to the `feedbacks` table without a default value. This is not possible if the table is not empty.
 9 |   - Added the required column `projectId` to the `feedbacks` table without a default value. This is not possible if the table is not empty.
10 | 
11 | */
12 | -- DropForeignKey
13 | ALTER TABLE "feedbacks" DROP CONSTRAINT "feedbacks_project_id_fkey";
14 | 
15 | -- AlterTable
16 | ALTER TABLE "Project" DROP COLUMN "updatedAt";
17 | 
18 | -- AlterTable
19 | ALTER TABLE "feedbacks" DROP COLUMN "project_id",
20 | DROP COLUMN "updatedAt",
21 | ADD COLUMN     "email" TEXT NOT NULL,
22 | ADD COLUMN     "name" TEXT NOT NULL,
23 | ADD COLUMN     "projectId" TEXT NOT NULL;
24 | 
25 | -- AddForeignKey
26 | ALTER TABLE "feedbacks" ADD CONSTRAINT "feedbacks_projectId_fkey" FOREIGN KEY ("projectId") REFERENCES "Project"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
27 | 


--------------------------------------------------------------------------------
/app/actions/deleteProject.ts:
--------------------------------------------------------------------------------
 1 | "use server";
 2 | 
 3 | import { auth } from "@/lib/auth";
 4 | import prisma from "@/lib/db";
 5 | 
 6 | export const deleteProject = async (id: string) => {
 7 |   try {
 8 |     const user = await auth();
 9 | 
10 |     if (!user?.user?.email) {
11 |       // console.log("User not authenticated");
12 |       return { success: false, error: "User not authenticated" };
13 |     }
14 | 
15 |     // Fetch the user ID based on email
16 |     const userRecord = await prisma.user.findUnique({
17 |       where: {
18 |         email: user.user.email,
19 |       },
20 |       select: {
21 |         id: true,
22 |       },
23 |     });
24 | 
25 |     if (!userRecord?.id) {
26 |       // console.log("User ID not found");
27 |       return { success: false, error: "User ID not found" };
28 |     }
29 | 
30 |     // Check if the project exists for the user
31 |     const project = await prisma.project.findUnique({
32 |       where: {
33 |         id: id,
34 |         userId: userRecord.id,
35 |       },
36 |     });
37 | 
38 |     if (!project) {
39 |       // console.log("Project not found");
40 |       return { success: false, error: "Project not found" };
41 |     }
42 | 
43 |     // Delete the project
44 |     const deletedProject = await prisma.project.delete({
45 |       where: {
46 |         id: id,
47 |       },
48 |     });
49 | 
50 |     // console.log("Deleted project:", deletedProject);
51 | 
52 |     return { success: true };
53 |   } catch (error) {
54 |     console.error("Error deleting project: ", error);
55 |     return { success: false, error: "Error deleting project" };
56 |   }
57 | };
58 | 


--------------------------------------------------------------------------------
/components/DashboardCards.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Button } from "./ui/button";
 3 | import Link from "next/link";
 4 | import DeleteProjectButton from "./ProjectDeleteButton";
 5 | 
 6 | const DashboardCards = ({
 7 |   id,
 8 |   title,
 9 |   description,
10 |   name,
11 | }: {
12 |   id: string;
13 |   title: string;
14 |   description: string;
15 |   name: string;
16 | }) => {
17 |   return (
18 |     <div className="border md:max-w-72 w-full px-4 flex flex-col transition-all border-white/20 hover:border-white/50 ease-in-out gap-y-2 py-3 rounded-md overflow-hidden mx-auto md:mx-0">
19 |       <div className="text-md block">{name}</div>
20 |       <hr />
21 |       <Link
22 |         href={title}
23 |         target="_blank"
24 |         className="text-xs text-blue-500 font-light"
25 |       >
26 |         {title.length > 35 ? `${title.slice(0, 35)}...` : title}
27 |       </Link>
28 |       <div className="block text-xs text-white/70 font-light">
29 |         {description.length > 40
30 |           ? `${description.slice(0, 40)}...`
31 |           : description}
32 |       </div>
33 |       {/* <div className="flex items-center gap-2">
34 |         {[...Array(5)].map((_, index) => (
35 |           <Star key={index} fill={index < stars ? "#fff" : "none"} />
36 |         ))}
37 |       </div> */}
38 |       <div className="w-full flex gap-4 items-center mt-2">
39 |         <Button asChild variant={"secondary"}>
40 |           <Link href={`/dashboard/feedbacks/${id}`}>View</Link>
41 |         </Button>
42 |         <DeleteProjectButton id={id} />
43 |       </div>
44 |     </div>
45 |   );
46 | };
47 | 
48 | export default DashboardCards;
49 | 


--------------------------------------------------------------------------------
/components/ui/avatar.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as AvatarPrimitive from "@radix-ui/react-avatar"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Avatar = React.forwardRef<
 9 |   React.ElementRef<typeof AvatarPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
11 | >(({ className, ...props }, ref) => (
12 |   <AvatarPrimitive.Root
13 |     ref={ref}
14 |     className={cn(
15 |       "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
16 |       className
17 |     )}
18 |     {...props}
19 |   />
20 | ))
21 | Avatar.displayName = AvatarPrimitive.Root.displayName
22 | 
23 | const AvatarImage = React.forwardRef<
24 |   React.ElementRef<typeof AvatarPrimitive.Image>,
25 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
26 | >(({ className, ...props }, ref) => (
27 |   <AvatarPrimitive.Image
28 |     ref={ref}
29 |     className={cn("aspect-square h-full w-full", className)}
30 |     {...props}
31 |   />
32 | ))
33 | AvatarImage.displayName = AvatarPrimitive.Image.displayName
34 | 
35 | const AvatarFallback = React.forwardRef<
36 |   React.ElementRef<typeof AvatarPrimitive.Fallback>,
37 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
38 | >(({ className, ...props }, ref) => (
39 |   <AvatarPrimitive.Fallback
40 |     ref={ref}
41 |     className={cn(
42 |       "flex h-full w-full items-center justify-center rounded-full bg-muted",
43 |       className
44 |     )}
45 |     {...props}
46 |   />
47 | ))
48 | AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
49 | 
50 | export { Avatar, AvatarImage, AvatarFallback }
51 | 


--------------------------------------------------------------------------------
/components/magicui/blur-fade.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { useRef } from "react";
 4 | import { AnimatePresence, motion, useInView, Variants } from "framer-motion";
 5 | 
 6 | interface BlurFadeProps {
 7 |   children: React.ReactNode;
 8 |   className?: string;
 9 |   variant?: {
10 |     hidden: { y: number };
11 |     visible: { y: number };
12 |   };
13 |   duration?: number;
14 |   delay?: number;
15 |   yOffset?: number;
16 |   inView?: boolean;
17 |   inViewMargin?: any;
18 |   blur?: string;
19 | }
20 | 
21 | export default function BlurFade({
22 |   children,
23 |   className,
24 |   variant,
25 |   duration = 0.4,
26 |   delay = 0,
27 |   yOffset = 6,
28 |   inView = false,
29 |   inViewMargin = "-50px",
30 |   blur = "6px",
31 | }: BlurFadeProps) {
32 |   const ref = useRef(null);
33 |   const inViewResult = useInView(ref, { once: true, margin: inViewMargin });
34 |   const isInView = !inView || inViewResult;
35 |   const defaultVariants: Variants = {
36 |     hidden: { y: yOffset, opacity: 0, filter: `blur(${blur})` },
37 |     visible: { y: -yOffset, opacity: 1, filter: `blur(0px)` },
38 |   };
39 |   const combinedVariants = variant || defaultVariants;
40 |   return (
41 |     <AnimatePresence>
42 |       <motion.div
43 |         ref={ref}
44 |         initial="hidden"
45 |         animate={isInView ? "visible" : "hidden"}
46 |         exit="hidden"
47 |         variants={combinedVariants}
48 |         transition={{
49 |           delay: 0.04 + delay,
50 |           duration,
51 |           ease: "easeOut",
52 |         }}
53 |         className={className}
54 |       >
55 |         {children}
56 |       </motion.div>
57 |     </AnimatePresence>
58 |   );
59 | }
60 | 


--------------------------------------------------------------------------------
/app/api/feedback/route.ts:
--------------------------------------------------------------------------------
 1 | import prisma from "@/lib/db";
 2 | import { NextRequest, NextResponse } from "next/server";
 3 | import { z } from "zod";
 4 | 
 5 | const feedbackSchema = z.object({
 6 |   name: z.string(),
 7 |   email: z.string().email(),
 8 |   feedback: z.string(),
 9 |   rating: z.number().int().min(1).max(5),
10 |   projectid: z.string(),
11 | });
12 | 
13 | export async function POST(req: NextRequest) {
14 |   try {
15 |     const feedback = await req.json();
16 | 
17 |     // console.log("Body: ", feedback);
18 | 
19 |     // Validate feedback data using zod
20 |     const validation = feedbackSchema.safeParse(feedback);
21 | 
22 |     // console.log("validation", validation);
23 | 
24 |     if (!validation.success) {
25 |       return NextResponse.json(
26 |         { success: false, error: "Invalid feedback data" },
27 |         { status: 400 }
28 |       );
29 |     }
30 | 
31 |     // Save feedback to database
32 |     const submitFeedback = await prisma.feedback.create({
33 |       data: {
34 |         name: validation.data.name,
35 |         email: validation.data.email,
36 |         feedback: validation.data.feedback,
37 |         rating: validation.data.rating,
38 |         projectId: validation.data.projectid,
39 |       },
40 |     });
41 | 
42 |     // console.log("submitFeedback: ", submitFeedback);
43 | 
44 |     return NextResponse.json(
45 |       {
46 |         success: true,
47 |         message: "Feedback received successfully",
48 |       },
49 |       { status: 200 }
50 |     );
51 |   } catch (error) {
52 |     return NextResponse.json(
53 |       { success: false, error: "Failed to process feedback" },
54 |       { status: 500 }
55 |     );
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/components/magicui/border-beam.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib/utils";
 2 | 
 3 | interface BorderBeamProps {
 4 |   className?: string;
 5 |   size?: number;
 6 |   duration?: number;
 7 |   borderWidth?: number;
 8 |   anchor?: number;
 9 |   colorFrom?: string;
10 |   colorTo?: string;
11 |   delay?: number;
12 | }
13 | 
14 | export const BorderBeam = ({
15 |   className,
16 |   size = 200,
17 |   duration = 15,
18 |   anchor = 90,
19 |   borderWidth = 1.5,
20 |   colorFrom = "#fff",
21 |   colorTo = "#ADB2BC",
22 |   delay = 0,
23 | }: BorderBeamProps) => {
24 |   return (
25 |     <div
26 |       style={
27 |         {
28 |           "--size": size,
29 |           "--duration": duration,
30 |           "--anchor": anchor,
31 |           "--border-width": borderWidth,
32 |           "--color-from": colorFrom,
33 |           "--color-to": colorTo,
34 |           "--delay": `-${delay}s`,
35 |         } as React.CSSProperties
36 |       }
37 |       className={cn(
38 |         "pointer-events-none absolute inset-0 rounded-[inherit] [border:calc(var(--border-width)*1px)_solid_transparent]",
39 | 
40 |         // mask styles
41 |         "![mask-clip:padding-box,border-box] ![mask-composite:intersect] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]",
42 | 
43 |         // pseudo styles
44 |         "after:absolute after:aspect-square after:w-[calc(var(--size)*1px)] after:animate-border-beam after:[animation-delay:var(--delay)] after:[background:linear-gradient(to_left,var(--color-from),var(--color-to),transparent)] after:[offset-anchor:calc(var(--anchor)*1%)_50%] after:[offset-path:rect(0_auto_auto_0_round_calc(var(--size)*1px))]",
45 |         className
46 |       )}
47 |     />
48 |   );
49 | };
50 | 


--------------------------------------------------------------------------------
/components/ui/rainbow-button.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | 
 5 | interface RainbowButtonProps
 6 |   extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
 7 | 
 8 | export function RainbowButton({ children, ...props }: RainbowButtonProps) {
 9 |   return (
10 |     <button
11 |       className={cn(
12 |         "h-fit w-full lg:w-fit mt-1 lg:mt-0 px-4 py-1 inline-flex items-center justify-center text-sm rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 relative group animate-rainbow cursor-pointer border-0 bg-[length:200%] text-primary-foreground [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent]",
13 | 
14 |         // before styles
15 |         "before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:animate-rainbow before:bg-[linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] before:bg-[length:200%] before:[filter:blur(calc(0.8*1rem))]",
16 | 
17 |         // light mode colors
18 |         "bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]",
19 | 
20 |         // dark mode colors
21 |         " dark:bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]"
22 |       )}
23 |       {...props}
24 |     >
25 |       {children}
26 |     </button>
27 |   );
28 | }
29 | 


--------------------------------------------------------------------------------
/app/actions/createProject.ts:
--------------------------------------------------------------------------------
 1 | "use server";
 2 | import { auth } from "@/lib/auth";
 3 | import prisma from "@/lib/db";
 4 | import { z } from "zod";
 5 | 
 6 | export const submitProject = async ({
 7 |   name,
 8 |   url,
 9 |   description,
10 | }: {
11 |   name: string;
12 |   url: string;
13 |   description: string;
14 | }) => {
15 |   const user = await auth();
16 | 
17 |   const findUser = await prisma.user.findUnique({
18 |     where: {
19 |       email: user?.user?.email!,
20 |     },
21 |   });
22 | 
23 |   const projects = await prisma.project.findMany({
24 |     where: {
25 |       userId: findUser?.id,
26 |     },
27 |   });
28 | 
29 |   if (projects.length >= 5) {
30 |     // console.log("Maximum project limit reached");
31 |     return { success: false };
32 |   }
33 | 
34 |   try {
35 |     const schema = z.object({
36 |       name: z.string(),
37 |       url: z.string().url(),
38 |       description: z.string().min(5),
39 |     });
40 | 
41 |     const data = schema.safeParse({
42 |       name,
43 |       url,
44 |       description,
45 |     });
46 | 
47 |     if (!data.success) {
48 |       // console.log("Invalid data");
49 |       throw new Error("Invalid data");
50 |     }
51 |     if (!findUser?.id) {
52 |       // console.log("User not found");
53 |       throw new Error("User not found");
54 |     }
55 | 
56 |     const dbSave = await prisma.project.create({
57 |       data: {
58 |         name: name,
59 |         url: url,
60 |         description: description,
61 |         userId: findUser?.id,
62 |       },
63 |     });
64 | 
65 |     if (!dbSave) {
66 |       // console.log("Failed to save data");
67 |       throw new Error("Failed to save data");
68 |     }
69 | 
70 |     // console.log("Project saved:", dbSave);
71 | 
72 |     return { success: true, projectId: dbSave.id };
73 |   } catch (error) {
74 |     // console.log("Error:", error);
75 |     return { success: false };
76 |   }
77 | };
78 | 


--------------------------------------------------------------------------------
/components/ProjectDeleteButton.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import {
 4 |   Dialog,
 5 |   DialogTrigger,
 6 |   DialogContent,
 7 |   DialogHeader,
 8 |   DialogTitle,
 9 |   DialogDescription,
10 |   DialogFooter,
11 | } from "@/components/ui/dialog";
12 | import { Button } from "@/components/ui/button";
13 | import { useState } from "react";
14 | import { Loader } from "lucide-react";
15 | import { deleteProject } from "@/app/actions/deleteProject";
16 | import { useRouter } from "next/navigation";
17 | 
18 | export default function DeleteProjectButton({ id }: { id: string }) {
19 |   const [loading, setLoading] = useState(false);
20 | 
21 |   const router = useRouter();
22 | 
23 |   const handleDelete = async () => {
24 |     setLoading(true);
25 |     const data = await deleteProject(id);
26 |     // // console.log("Delete Data: ", data);
27 |     if (data.success) {
28 |       setLoading(false);
29 |       router.refresh();
30 |     } else {
31 |       setLoading(false);
32 |     }
33 |   };
34 | 
35 |   return (
36 |     <Dialog>
37 |       <DialogTrigger asChild>
38 |         <Button variant="destructive">Delete</Button>
39 |       </DialogTrigger>
40 |       <DialogContent className="sm:max-w-[425px]">
41 |         <DialogHeader>
42 |           <DialogTitle>Delete Project</DialogTitle>
43 |           <DialogDescription>
44 |             Are you sure you want to delete this project? This action cannot be
45 |             undone.
46 |           </DialogDescription>
47 |         </DialogHeader>
48 |         <DialogFooter>
49 |           {loading ? (
50 |             <Button disabled variant="destructive">
51 |               <Loader className="animate-spin" size={16} />
52 |             </Button>
53 |           ) : (
54 |             <Button onClick={handleDelete} variant="destructive">
55 |               Delete
56 |             </Button>
57 |           )}
58 |         </DialogFooter>
59 |       </DialogContent>
60 |     </Dialog>
61 |   );
62 | }
63 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "opinify",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint",
10 |     "postinstall": "prisma generate"
11 |   },
12 |   "dependencies": {
13 |     "@auth/prisma-adapter": "^2.4.2",
14 |     "@prisma/client": "^5.17.0",
15 |     "@radix-ui/react-accordion": "^1.2.0",
16 |     "@radix-ui/react-avatar": "^1.1.0",
17 |     "@radix-ui/react-dialog": "^1.1.1",
18 |     "@radix-ui/react-dropdown-menu": "^2.1.1",
19 |     "@radix-ui/react-icons": "^1.3.0",
20 |     "@radix-ui/react-label": "^2.1.0",
21 |     "@radix-ui/react-progress": "^1.1.0",
22 |     "@radix-ui/react-select": "^2.1.1",
23 |     "@radix-ui/react-separator": "^1.1.0",
24 |     "@radix-ui/react-slot": "^1.1.0",
25 |     "@radix-ui/react-tabs": "^1.1.0",
26 |     "@radix-ui/react-tooltip": "^1.1.2",
27 |     "@types/papaparse": "^5.3.14",
28 |     "@types/react-syntax-highlighter": "^15.5.13",
29 |     "@vercel/analytics": "^1.3.1",
30 |     "@vercel/speed-insights": "^1.0.12",
31 |     "class-variance-authority": "^0.7.0",
32 |     "clsx": "^2.1.1",
33 |     "framer-motion": "^11.9.0",
34 |     "lucide-react": "^0.424.0",
35 |     "next": "14.2.5",
36 |     "next-auth": "^5.0.0-beta.20",
37 |     "next-themes": "^0.3.0",
38 |     "nextjs-toploader": "^1.6.12",
39 |     "papaparse": "^5.4.1",
40 |     "prisma": "^5.17.0",
41 |     "react": "^18.3.1",
42 |     "react-dom": "^18",
43 |     "react-markdown": "^9.0.1",
44 |     "react-syntax-highlighter": "^15.5.0",
45 |     "sonner": "^1.5.0",
46 |     "tailwind-merge": "^2.4.0",
47 |     "tailwindcss-animate": "^1.0.7",
48 |     "zod": "^3.23.8"
49 |   },
50 |   "devDependencies": {
51 |     "@types/node": "^20",
52 |     "@types/react": "^18",
53 |     "@types/react-dom": "^18",
54 |     "eslint": "^8",
55 |     "eslint-config-next": "14.2.5",
56 |     "postcss": "^8",
57 |     "tailwindcss": "^3.4.1",
58 |     "typescript": "^5"
59 |   }
60 | }
61 | 


--------------------------------------------------------------------------------
/app/dashboard/page.tsx:
--------------------------------------------------------------------------------
 1 | import CreateProject from "@/components/CreateProject";
 2 | import DashboardCards from "@/components/DashboardCards";
 3 | import { Button } from "@/components/ui/button";
 4 | import { auth } from "@/lib/auth";
 5 | import prisma from "@/lib/db";
 6 | import { Metadata } from "next";
 7 | import { redirect } from "next/navigation";
 8 | import React from "react";
 9 | 
10 | export const metadata: Metadata = {
11 |   title: "Dashboard",
12 | };
13 | 
14 | const Page = async () => {
15 |   const user = await auth();
16 | 
17 |   // console.log(user);
18 | 
19 |   if (!user) {
20 |     return redirect("/");
21 |   }
22 | 
23 |   const currentUser = await prisma.user.findUnique({
24 |     where: {
25 |       email: user?.user?.email!,
26 |     },
27 |   });
28 | 
29 |   const data = await prisma.project.findMany({
30 |     where: {
31 |       userId: currentUser?.id,
32 |     },
33 |   });
34 | 
35 |   // console.log(data);
36 | 
37 |   return (
38 |     <div className="w-full min-h-[80vh]">
39 |       <div className="flex justify-between items-center py-3 px-5">
40 |         {" "}
41 |         <h1 className="md:text-3xl text-xl font-semibold">Dashboard Page 📄</h1>
42 |         {data.length > 5 ? (
43 |           <Button disabled variant={"outline"}>
44 |             Limit Exceeded
45 |           </Button>
46 |         ) : null}
47 |       </div>
48 |       <hr />
49 |       <div className="p-3 flex flex-wrap gap-6">
50 |         {data && data.length > 0 ? (
51 |           data.map((data, index) => (
52 |             <DashboardCards
53 |               key={index}
54 |               id={data.id}
55 |               name={data.name}
56 |               title={data.url}
57 |               description={data.description}
58 |             />
59 |           ))
60 |         ) : (
61 |           <div className="flex flex-col justify-center mx-auto gap-y-3">
62 |             <div className="text-center mt-3 w-full">No projects found 🥲</div>
63 |             <CreateProject />
64 |           </div>
65 |         )}
66 |       </div>
67 |     </div>
68 |   );
69 | };
70 | 
71 | export default Page;
72 | 


--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           "bg-primary text-primary-foreground shadow hover:bg-primary/90",
14 |         destructive:
15 |           "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
16 |         outline:
17 |           "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
18 |         secondary:
19 |           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
20 |         ghost: "hover:bg-accent hover:text-accent-foreground",
21 |         link: "text-primary underline-offset-4 hover:underline",
22 |       },
23 |       size: {
24 |         default: "h-9 px-4 py-2",
25 |         sm: "h-8 rounded-md px-3 text-xs",
26 |         lg: "h-10 rounded-md px-8",
27 |         icon: "h-9 w-9",
28 |       },
29 |     },
30 |     defaultVariants: {
31 |       variant: "default",
32 |       size: "default",
33 |     },
34 |   }
35 | )
36 | 
37 | export interface ButtonProps
38 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
39 |     VariantProps<typeof buttonVariants> {
40 |   asChild?: boolean
41 | }
42 | 
43 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
44 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
45 |     const Comp = asChild ? Slot : "button"
46 |     return (
47 |       <Comp
48 |         className={cn(buttonVariants({ variant, size, className }))}
49 |         ref={ref}
50 |         {...props}
51 |       />
52 |     )
53 |   }
54 | )
55 | Button.displayName = "Button"
56 | 
57 | export { Button, buttonVariants }
58 | 


--------------------------------------------------------------------------------
/components/ui/tabs.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as TabsPrimitive from "@radix-ui/react-tabs"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Tabs = TabsPrimitive.Root
 9 | 
10 | const TabsList = React.forwardRef<
11 |   React.ElementRef<typeof TabsPrimitive.List>,
12 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
13 | >(({ className, ...props }, ref) => (
14 |   <TabsPrimitive.List
15 |     ref={ref}
16 |     className={cn(
17 |       "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
18 |       className
19 |     )}
20 |     {...props}
21 |   />
22 | ))
23 | TabsList.displayName = TabsPrimitive.List.displayName
24 | 
25 | const TabsTrigger = React.forwardRef<
26 |   React.ElementRef<typeof TabsPrimitive.Trigger>,
27 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
28 | >(({ className, ...props }, ref) => (
29 |   <TabsPrimitive.Trigger
30 |     ref={ref}
31 |     className={cn(
32 |       "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
33 |       className
34 |     )}
35 |     {...props}
36 |   />
37 | ))
38 | TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
39 | 
40 | const TabsContent = React.forwardRef<
41 |   React.ElementRef<typeof TabsPrimitive.Content>,
42 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
43 | >(({ className, ...props }, ref) => (
44 |   <TabsPrimitive.Content
45 |     ref={ref}
46 |     className={cn(
47 |       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
48 |       className
49 |     )}
50 |     {...props}
51 |   />
52 | ))
53 | TabsContent.displayName = TabsPrimitive.Content.displayName
54 | 
55 | export { Tabs, TabsList, TabsTrigger, TabsContent }
56 | 


--------------------------------------------------------------------------------
/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Card = React.forwardRef<
 6 |   HTMLDivElement,
 7 |   React.HTMLAttributes<HTMLDivElement>
 8 | >(({ className, ...props }, ref) => (
 9 |   <div
10 |     ref={ref}
11 |     className={cn(
12 |       "rounded-xl border bg-card text-card-foreground shadow",
13 |       className
14 |     )}
15 |     {...props}
16 |   />
17 | ))
18 | Card.displayName = "Card"
19 | 
20 | const CardHeader = React.forwardRef<
21 |   HTMLDivElement,
22 |   React.HTMLAttributes<HTMLDivElement>
23 | >(({ className, ...props }, ref) => (
24 |   <div
25 |     ref={ref}
26 |     className={cn("flex flex-col space-y-1.5 p-6", className)}
27 |     {...props}
28 |   />
29 | ))
30 | CardHeader.displayName = "CardHeader"
31 | 
32 | const CardTitle = React.forwardRef<
33 |   HTMLParagraphElement,
34 |   React.HTMLAttributes<HTMLHeadingElement>
35 | >(({ className, ...props }, ref) => (
36 |   <h3
37 |     ref={ref}
38 |     className={cn("font-semibold leading-none tracking-tight", className)}
39 |     {...props}
40 |   />
41 | ))
42 | CardTitle.displayName = "CardTitle"
43 | 
44 | const CardDescription = React.forwardRef<
45 |   HTMLParagraphElement,
46 |   React.HTMLAttributes<HTMLParagraphElement>
47 | >(({ className, ...props }, ref) => (
48 |   <p
49 |     ref={ref}
50 |     className={cn("text-sm text-muted-foreground", className)}
51 |     {...props}
52 |   />
53 | ))
54 | CardDescription.displayName = "CardDescription"
55 | 
56 | const CardContent = React.forwardRef<
57 |   HTMLDivElement,
58 |   React.HTMLAttributes<HTMLDivElement>
59 | >(({ className, ...props }, ref) => (
60 |   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
61 | ))
62 | CardContent.displayName = "CardContent"
63 | 
64 | const CardFooter = React.forwardRef<
65 |   HTMLDivElement,
66 |   React.HTMLAttributes<HTMLDivElement>
67 | >(({ className, ...props }, ref) => (
68 |   <div
69 |     ref={ref}
70 |     className={cn("flex items-center p-6 pt-0", className)}
71 |     {...props}
72 |   />
73 | ))
74 | CardFooter.displayName = "CardFooter"
75 | 
76 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
77 | 


--------------------------------------------------------------------------------
/components/ui/accordion.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as AccordionPrimitive from "@radix-ui/react-accordion"
 5 | import { ChevronDownIcon } from "@radix-ui/react-icons"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const Accordion = AccordionPrimitive.Root
10 | 
11 | const AccordionItem = React.forwardRef<
12 |   React.ElementRef<typeof AccordionPrimitive.Item>,
13 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
14 | >(({ className, ...props }, ref) => (
15 |   <AccordionPrimitive.Item
16 |     ref={ref}
17 |     className={cn("border-b", className)}
18 |     {...props}
19 |   />
20 | ))
21 | AccordionItem.displayName = "AccordionItem"
22 | 
23 | const AccordionTrigger = React.forwardRef<
24 |   React.ElementRef<typeof AccordionPrimitive.Trigger>,
25 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
26 | >(({ className, children, ...props }, ref) => (
27 |   <AccordionPrimitive.Header className="flex">
28 |     <AccordionPrimitive.Trigger
29 |       ref={ref}
30 |       className={cn(
31 |         "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
32 |         className
33 |       )}
34 |       {...props}
35 |     >
36 |       {children}
37 |       <ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
38 |     </AccordionPrimitive.Trigger>
39 |   </AccordionPrimitive.Header>
40 | ))
41 | AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
42 | 
43 | const AccordionContent = React.forwardRef<
44 |   React.ElementRef<typeof AccordionPrimitive.Content>,
45 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
46 | >(({ className, children, ...props }, ref) => (
47 |   <AccordionPrimitive.Content
48 |     ref={ref}
49 |     className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
50 |     {...props}
51 |   >
52 |     <div className={cn("pb-4 pt-0", className)}>{children}</div>
53 |   </AccordionPrimitive.Content>
54 | ))
55 | AccordionContent.displayName = AccordionPrimitive.Content.displayName
56 | 
57 | export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
58 | 


--------------------------------------------------------------------------------
/components/TechStack.tsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image"
 2 | 
 3 | const logos = [
 4 |   {
 5 |     name: 'Vercel',
 6 |     url: 'https://res.cloudinary.com/dfhp33ufc/image/upload/v1715881430/vercel_wordmark_dark_mhv8u8.svg',
 7 |   },
 8 |   {
 9 |     name: 'Nextjs',
10 |     url: 'https://res.cloudinary.com/dfhp33ufc/image/upload/v1715881475/nextjs_logo_dark_gfkf8m.svg',
11 |   },
12 |   {
13 |     name: 'Tailwind',
14 |     url: 'https://res.cloudinary.com/dfhp33ufc/image/upload/v1715881514/tailwind_logo_dark_qxqxqx.svg',
15 |   },
16 |   {
17 |     name: 'Prisma',
18 |     url: 'https://res.cloudinary.com/dfhp33ufc/image/upload/v1715881550/prisma_logo_dark_mnfcft.svg',
19 |   },
20 |   {
21 |     name: 'NextAuth',
22 |     url: 'https://res.cloudinary.com/dfhp33ufc/image/upload/v1715881585/nextauth_logo_dark_trfbod.svg',
23 |   },
24 |   {
25 |     name: 'Shadcn',
26 |     url: 'https://res.cloudinary.com/dfhp33ufc/image/upload/v1715881620/shadcn_logo_dark_gdrpqy.svg',
27 |   },
28 | ]
29 |   
30 |   const TechStack = () => {
31 |     return (
32 |       <div className="w-full py-12">
33 |         <div className="mx-auto w-full px-4 md:px-8">
34 |           <div
35 |             className="group relative mt-6 flex gap-6 overflow-hidden p-2"
36 |             style={{
37 |               maskImage:
38 |                 'linear-gradient(to left, transparent 0%, black 20%, black 80%, transparent 95%)',
39 |             }}
40 |           >
41 |             {Array(5)
42 |               .fill(null)
43 |               .map((index) => (
44 |                 <div
45 |                   key={index}
46 |                   className="flex shrink-0 animate-logo-cloud flex-row justify-around gap-6"
47 |                 >
48 |                   {logos.map((logo, key) => (
49 |                     <Image
50 |                       width={100}
51 |                       height={100}
52 |                       key={key}
53 |                       src={logo.url}
54 |                       className="h-10 w-28 px-2 brightness-0  dark:invert"
55 |                       alt={`${logo.name}`}
56 |                     />
57 |                   ))}
58 |                 </div>
59 |               ))}
60 |           </div>
61 |         </div>
62 |       </div>
63 |     )
64 |   }
65 |   
66 |   export default TechStack;
67 |   


--------------------------------------------------------------------------------
/prisma/migrations/20240807105030_refactored_whole_schema/migration.sql:
--------------------------------------------------------------------------------
 1 | /*
 2 |   Warnings:
 3 | 
 4 |   - You are about to drop the column `access_token` on the `accounts` table. All the data in the column will be lost.
 5 |   - You are about to drop the column `expires_at` on the `accounts` table. All the data in the column will be lost.
 6 |   - You are about to drop the column `id_token` on the `accounts` table. All the data in the column will be lost.
 7 |   - You are about to drop the column `refresh_token` on the `accounts` table. All the data in the column will be lost.
 8 |   - You are about to drop the column `session_state` on the `accounts` table. All the data in the column will be lost.
 9 |   - You are about to drop the column `token_type` on the `accounts` table. All the data in the column will be lost.
10 |   - You are about to drop the `Project` table. If the table is not empty, all the data it contains will be lost.
11 | 
12 | */
13 | -- DropForeignKey
14 | ALTER TABLE "Project" DROP CONSTRAINT "Project_userId_fkey";
15 | 
16 | -- DropForeignKey
17 | ALTER TABLE "feedbacks" DROP CONSTRAINT "feedbacks_projectId_fkey";
18 | 
19 | -- AlterTable
20 | ALTER TABLE "accounts" DROP COLUMN "access_token",
21 | DROP COLUMN "expires_at",
22 | DROP COLUMN "id_token",
23 | DROP COLUMN "refresh_token",
24 | DROP COLUMN "session_state",
25 | DROP COLUMN "token_type",
26 | ADD COLUMN     "accessToken" TEXT,
27 | ADD COLUMN     "expiresAt" INTEGER,
28 | ADD COLUMN     "idToken" TEXT,
29 | ADD COLUMN     "refreshToken" TEXT,
30 | ADD COLUMN     "sessionState" TEXT,
31 | ADD COLUMN     "tokenType" TEXT;
32 | 
33 | -- DropTable
34 | DROP TABLE "Project";
35 | 
36 | -- CreateTable
37 | CREATE TABLE "projects" (
38 |     "id" TEXT NOT NULL,
39 |     "name" TEXT NOT NULL,
40 |     "url" TEXT NOT NULL,
41 |     "description" TEXT NOT NULL,
42 |     "userId" TEXT NOT NULL,
43 |     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
44 | 
45 |     CONSTRAINT "projects_pkey" PRIMARY KEY ("id")
46 | );
47 | 
48 | -- CreateIndex
49 | CREATE UNIQUE INDEX "projects_url_key" ON "projects"("url");
50 | 
51 | -- AddForeignKey
52 | ALTER TABLE "projects" ADD CONSTRAINT "projects_userId_fkey" FOREIGN KEY ("userId") REFERENCES "users"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
53 | 
54 | -- AddForeignKey
55 | ALTER TABLE "feedbacks" ADD CONSTRAINT "feedbacks_projectId_fkey" FOREIGN KEY ("projectId") REFERENCES "projects"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
56 | 


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | * {
 6 |   margin: 0px;
 7 |   padding: 0px;
 8 |   box-sizing: border-box;
 9 | }
10 | 
11 | @layer base {
12 |   :root {
13 |     --background: 0 0% 100%;
14 |     --foreground: 240 10% 3.9%;
15 |     --card: 0 0% 100%;
16 |     --card-foreground: 240 10% 3.9%;
17 |     --popover: 0 0% 100%;
18 |     --popover-foreground: 240 10% 3.9%;
19 |     --primary: 240 5.9% 10%;
20 |     --primary-foreground: 0 0% 98%;
21 |     --secondary: 240 4.8% 95.9%;
22 |     --secondary-foreground: 240 5.9% 10%;
23 |     --muted: 240 4.8% 95.9%;
24 |     --muted-foreground: 240 3.8% 46.1%;
25 |     --accent: 240 4.8% 95.9%;
26 |     --accent-foreground: 240 5.9% 10%;
27 |     --destructive: 0 84.2% 60.2%;
28 |     --destructive-foreground: 0 0% 98%;
29 |     --border: 240 5.9% 90%;
30 |     --input: 240 5.9% 90%;
31 |     --ring: 240 5.9% 10%;
32 |     --radius: 0.5rem;
33 |     --chart-1: 12 76% 61%;
34 |     --chart-2: 173 58% 39%;
35 |     --chart-3: 197 37% 24%;
36 |     --chart-4: 43 74% 66%;
37 |     --chart-5: 27 87% 67%;
38 |     --color-1: 0 100% 63%;
39 |     --color-2: 270 100% 63%;
40 |     --color-3: 210 100% 63%;
41 |     --color-4: 195 100% 63%;
42 |     --color-5: 90 100% 63%;
43 |   }
44 | 
45 |   .dark {
46 |     --background: 240 10% 3.9%;
47 |     --foreground: 0 0% 98%;
48 |     --card: 240 10% 3.9%;
49 |     --card-foreground: 0 0% 98%;
50 |     --popover: 240 10% 3.9%;
51 |     --popover-foreground: 0 0% 98%;
52 |     --primary: 0 0% 98%;
53 |     --primary-foreground: 240 5.9% 10%;
54 |     --secondary: 240 3.7% 15.9%;
55 |     --secondary-foreground: 0 0% 98%;
56 |     --muted: 240 3.7% 15.9%;
57 |     --muted-foreground: 240 5% 64.9%;
58 |     --accent: 240 3.7% 15.9%;
59 |     --accent-foreground: 0 0% 98%;
60 |     --destructive: 0 62.8% 30.6%;
61 |     --destructive-foreground: 0 0% 98%;
62 |     --border: 240 3.7% 15.9%;
63 |     --input: 240 3.7% 15.9%;
64 |     --ring: 240 4.9% 83.9%;
65 |     --chart-1: 220 70% 50%;
66 |     --chart-2: 160 60% 45%;
67 |     --chart-3: 30 80% 55%;
68 |     --chart-4: 280 65% 60%;
69 |     --chart-5: 340 75% 55%;
70 |     --color-1: 0 100% 63%;
71 |     --color-2: 270 100% 63%;
72 |     --color-3: 210 100% 63%;
73 |     --color-4: 195 100% 63%;
74 |     --color-5: 90 100% 63%;
75 |   }
76 | }
77 | 
78 | @layer base {
79 |   * {
80 |     @apply border-border;
81 |   }
82 |   body {
83 |     @apply bg-background text-foreground;
84 |   }
85 | }
86 | 


--------------------------------------------------------------------------------
/prisma/migrations/20240806032711_initial_migration_for_authentication/migration.sql:
--------------------------------------------------------------------------------
 1 | -- CreateTable
 2 | CREATE TABLE "User" (
 3 |     "id" TEXT NOT NULL,
 4 |     "name" TEXT,
 5 |     "email" TEXT NOT NULL,
 6 |     "emailVerified" TIMESTAMP(3),
 7 |     "image" TEXT,
 8 |     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
 9 |     "updatedAt" TIMESTAMP(3) NOT NULL,
10 | 
11 |     CONSTRAINT "User_pkey" PRIMARY KEY ("id")
12 | );
13 | 
14 | -- CreateTable
15 | CREATE TABLE "Account" (
16 |     "userId" TEXT NOT NULL,
17 |     "type" TEXT NOT NULL,
18 |     "provider" TEXT NOT NULL,
19 |     "providerAccountId" TEXT NOT NULL,
20 |     "refresh_token" TEXT,
21 |     "access_token" TEXT,
22 |     "expires_at" INTEGER,
23 |     "token_type" TEXT,
24 |     "scope" TEXT,
25 |     "id_token" TEXT,
26 |     "session_state" TEXT,
27 |     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
28 |     "updatedAt" TIMESTAMP(3) NOT NULL,
29 | 
30 |     CONSTRAINT "Account_pkey" PRIMARY KEY ("provider","providerAccountId")
31 | );
32 | 
33 | -- CreateTable
34 | CREATE TABLE "Session" (
35 |     "sessionToken" TEXT NOT NULL,
36 |     "userId" TEXT NOT NULL,
37 |     "expires" TIMESTAMP(3) NOT NULL,
38 |     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
39 |     "updatedAt" TIMESTAMP(3) NOT NULL
40 | );
41 | 
42 | -- CreateTable
43 | CREATE TABLE "VerificationToken" (
44 |     "identifier" TEXT NOT NULL,
45 |     "token" TEXT NOT NULL,
46 |     "expires" TIMESTAMP(3) NOT NULL,
47 | 
48 |     CONSTRAINT "VerificationToken_pkey" PRIMARY KEY ("identifier","token")
49 | );
50 | 
51 | -- CreateTable
52 | CREATE TABLE "Authenticator" (
53 |     "credentialID" TEXT NOT NULL,
54 |     "userId" TEXT NOT NULL,
55 |     "providerAccountId" TEXT NOT NULL,
56 |     "credentialPublicKey" TEXT NOT NULL,
57 |     "counter" INTEGER NOT NULL,
58 |     "credentialDeviceType" TEXT NOT NULL,
59 |     "credentialBackedUp" BOOLEAN NOT NULL,
60 |     "transports" TEXT,
61 | 
62 |     CONSTRAINT "Authenticator_pkey" PRIMARY KEY ("userId","credentialID")
63 | );
64 | 
65 | -- CreateIndex
66 | CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
67 | 
68 | -- CreateIndex
69 | CREATE UNIQUE INDEX "Session_sessionToken_key" ON "Session"("sessionToken");
70 | 
71 | -- CreateIndex
72 | CREATE UNIQUE INDEX "Authenticator_credentialID_key" ON "Authenticator"("credentialID");
73 | 
74 | -- AddForeignKey
75 | ALTER TABLE "Account" ADD CONSTRAINT "Account_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
76 | 
77 | -- AddForeignKey
78 | ALTER TABLE "Session" ADD CONSTRAINT "Session_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
79 | 
80 | -- AddForeignKey
81 | ALTER TABLE "Authenticator" ADD CONSTRAINT "Authenticator_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
82 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Opinify.in
 2 | 
 3 | **Opinify.in** is a feedback collection platform that provides embeddable feedback forms for websites. Users can collect feedback directly from their websites and manage it through a centralized dashboard. This SaaS project is developed using React and TypeScript.
 4 | 
 5 | ## Features
 6 | 
 7 | - **Embeddable Feedback Forms**: Easily embed feedback forms on your website.
 8 | - **Centralized Dashboard**: View and manage all feedback from a single, intuitive dashboard.
 9 | - **Customizable Modal**: Customize the modal design to enhance the user experience. ( _🚨 Not implemented yet_)
10 | - **Real-time Updates**: Receive real-time updates and notifications for feedback forms and the dashboard.
11 | - **Analytics & Reporting**: Access detailed feedback reports and analytics insights. ( _🚨 Not implemented yet_)
12 | 
13 | ## Installation
14 | 
15 | ### Prerequisites
16 | 
17 | - Node.js (>=14.x)
18 | - npm (>=6.x) or yarn
19 | 
20 | ### Clone the Repository
21 | 
22 | ```bash
23 | git clone https://github.com/avayyyyyyy/opinify.git
24 | cd opinify
25 | ```
26 | 
27 | ### Install Dependencies
28 | 
29 | ```bash
30 | npm install
31 | # or
32 | yarn install
33 | # or
34 | bun install
35 | ```
36 | 
37 | ### Run the Development Server
38 | 
39 | ```bash
40 | npm run dev
41 | # or
42 | yarn dev
43 | # or
44 | bun dev
45 | ```
46 | 
47 | Open your browser and navigate to `http://localhost:3000` to see the application in action.
48 | 
49 | ## Configuration
50 | 
51 | - **Environment Variables**: Create a `.env` file in the root directory and set the required environment variables.
52 | 
53 |   ```env
54 |   NEXTAUTH_SECRET=
55 |   DATABASE_URL=
56 |   GOOGLE_CLIENT_ID=
57 |   GOOGLE_CLIENT_SECRET=
58 |   AUTH_TRUST_HOST=http://localhost:3000
59 |   ```
60 | 
61 | - **Feedback Form Integration**: Embed the feedback form into your website using the provided embed code.
62 | 
63 | ## Usage
64 | 
65 | 1. **Embedding Feedback Form**:
66 | 
67 |    - Go to your dashboard and create a new feedback form.
68 |    - Copy the provided embed code and paste it into your website's HTML where you want the feedback form to appear.
69 | 
70 | 2. **Viewing Feedback**:
71 | 
72 |    - Log in to the Opinify.in dashboard.
73 |    - Navigate to the 'Feedback' section to view and manage collected feedback.
74 | 
75 | ## Contributing
76 | 
77 | Contributions are welcome! Please follow these guidelines to contribute:
78 | 
79 | 1. Fork the repository.
80 | 2. Create a new branch (`git checkout -b feature/your-feature`).
81 | 3. Make your changes.
82 | 4. Commit your changes (`git commit -am 'Add new feature'`).
83 | 5. Push to the branch (`git push origin feature/your-feature`).
84 | 6. Create a new Pull Request.
85 | 
86 | ## License
87 | 
88 | Distributed under the MIT License. See `LICENSE` for more information.
89 | 
90 | ## Contact
91 | 
92 | Shubhankit Jain - [jabhi465@gmail.com](mailto:jabhi465@gmail.com)
93 | 
94 | Project Link: [https://opinify.in/](https://opinify.in/)
95 | 


--------------------------------------------------------------------------------
/components/steps-page.tsx:
--------------------------------------------------------------------------------
 1 | export function StepsPage() {
 2 |   return (
 3 |     <section className="w-full py-12 md:py-24 lg:py-32">
 4 |       <div className="container px-4 md:px-6">
 5 |         <div className="space-y-4 text-center">
 6 |           <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
 7 |             3 Steps to Leverage Opinify
 8 |           </h2>
 9 |           <p className="mx-auto max-w-[700px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
10 |             Follow these three simple steps to collect valuable feedback and
11 |             improve your website using Opinify.
12 |           </p>
13 |         </div>
14 |         <div className="mx-auto grid max-w-5xl grid-cols-1 gap-6 py-12 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8">
15 |           <div className="rounded-lg border bg-background p-6 shadow-sm">
16 |             <div className="flex items-center gap-4">
17 |               <div className="flex h-12 w-12 items-center justify-center rounded-md bg-primary text-primary-foreground">
18 |                 <span className="text-2xl font-bold">1</span>
19 |               </div>
20 |               <h3 className="text-xl font-semibold">Embed</h3>
21 |             </div>
22 |             <p className="mt-4 text-muted-foreground">
23 |               Add the Opinify widget to your website with a simple embed code to
24 |               start collecting feedback from your users.
25 |             </p>
26 |           </div>
27 |           <div className="rounded-lg border bg-background p-6 shadow-sm">
28 |             <div className="flex items-center gap-4">
29 |               <div className="flex h-12 w-12 items-center justify-center rounded-md bg-primary text-primary-foreground">
30 |                 <span className="text-2xl font-bold">2</span>
31 |               </div>
32 |               <h3 className="text-xl font-semibold">Collect</h3>
33 |             </div>
34 |             <p className="mt-4 text-muted-foreground">
35 |               Gather valuable insights from your users as they interact with
36 |               your website, helping you understand their needs and preferences.
37 |             </p>
38 |           </div>
39 |           <div className="rounded-lg border bg-background p-6 shadow-sm">
40 |             <div className="flex items-center gap-4">
41 |               <div className="flex h-12 w-12 items-center justify-center rounded-md bg-primary text-primary-foreground">
42 |                 <span className="text-2xl font-bold">3</span>
43 |               </div>
44 |               <h3 className="text-xl font-semibold">Improve</h3>
45 |             </div>
46 |             <p className="mt-4 text-muted-foreground">
47 |               Use the collected feedback to make data-driven improvements to
48 |               your website, enhancing the user experience and satisfaction.
49 |             </p>
50 |           </div>
51 |         </div>
52 |       </div>
53 |     </section>
54 |   );
55 | }
56 | 


--------------------------------------------------------------------------------
/components/Accordian.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import {
 3 |   Accordion,
 4 |   AccordionContent,
 5 |   AccordionItem,
 6 |   AccordionTrigger,
 7 | } from "@/components/ui/accordion";
 8 | 
 9 | const faqData = [
10 |   {
11 |     value: "item-1",
12 |     question: "What is Opinify?",
13 |     answer:
14 |       "Opinify is a feedback form integration website that is free to use and highly simplified.",
15 |   },
16 |   {
17 |     value: "item-2",
18 |     question: "How can Opinify improve user feedback collection?",
19 |     answer:
20 |       "Opinify improves user feedback collection by providing an easy-to-use and integrate feedback form, making it simple for users to give feedback.",
21 |   },
22 |   {
23 |     value: "item-3",
24 |     question: "What are the key features of Opinify?",
25 |     answer:
26 |       "Key features of Opinify include ease of use, seamless integration, and a simplified interface for collecting feedback from users.",
27 |   },
28 |   {
29 |     value: "item-4",
30 |     question:
31 |       "Is Opinify suitable for both small businesses and large enterprises?",
32 |     answer:
33 |       "Yes, Opinify is designed to be scalable and can accommodate the needs of both small businesses and large enterprises. Its simplicity makes it accessible for smaller teams, while its robust features can handle larger volumes of feedback for bigger organizations.",
34 |   },
35 |   {
36 |     value: "item-5",
37 |     question: "Can I customize the feedback form to match my brand?",
38 |     answer:
39 |       "As of now, Opinify only offers certain themes and color options that allow you to adjust the look and feel of the feedback form to align with your brand's visual identity. But in future you can modify it more like fonts, custom colors and layout to ensure a seamless integration with your website or application.",
40 |   },
41 | ];
42 | 
43 | const Accordian = () => {
44 |   return (
45 |     <div>
46 |       <div className="min-w-[75vw] mt-10 flex w-full flex-col items-center justify-center">
47 |         <h1 className="mb-2 text-center text-2xl font-light tracking-tighter text-transparent bg-clip-text bg-gradient-to-br from-white to-gray-400 md:text-3xl ">
48 |           FAQ&apos;s
49 |         </h1>
50 |         <p className="max-w-md mb-4 text-center text-sm text-gray-400 dark:text-gray-400">
51 |           Some common FAQ&apos;s about Opinify
52 |         </p>
53 |         <Accordion type="single" collapsible className="w-[80vw] text-sm ">
54 |           {faqData.map((item) => (
55 |             <AccordionItem key={item.value} value={item.value}>
56 |               <AccordionTrigger className="text-left">
57 |                 {item.question}
58 |               </AccordionTrigger>
59 |               <AccordionContent className="text-slate-400">
60 |                 {item.answer}
61 |               </AccordionContent>
62 |             </AccordionItem>
63 |           ))}
64 |         </Accordion>
65 |       </div>
66 |     </div>
67 |   );
68 | };
69 | 
70 | export default Accordian;
71 | 


--------------------------------------------------------------------------------
/prisma/schema.prisma:
--------------------------------------------------------------------------------
  1 | datasource db {
  2 |   provider = "postgresql"
  3 |   url      = env("DATABASE_URL")
  4 | }
  5 | 
  6 | generator client {
  7 |   provider = "prisma-client-js"
  8 | }
  9 | 
 10 | model Authenticator {
 11 |   credentialID         String  @unique
 12 |   userId               String
 13 |   providerAccountId    String
 14 |   credentialPublicKey  String
 15 |   counter              Int
 16 |   credentialDeviceType String
 17 |   credentialBackedUp   Boolean
 18 |   transports           String?
 19 | 
 20 |   user User @relation(fields: [userId], references: [id], onDelete: Cascade)
 21 | 
 22 |   @@id([userId, credentialID])
 23 | }
 24 | 
 25 | model Account {
 26 |   userId            String
 27 |   type              String
 28 |   provider          String
 29 |   providerAccountId String
 30 |   refresh_token     String?
 31 |   access_token      String?
 32 |   expires_at        Int?
 33 |   token_type        String?
 34 |   scope             String?
 35 |   id_token          String?
 36 |   session_state     String?
 37 | 
 38 |   createdAt DateTime @default(now())
 39 |   updatedAt DateTime @updatedAt
 40 | 
 41 |   user User @relation(fields: [userId], references: [id], onDelete: Cascade)
 42 | 
 43 |   @@id([provider, providerAccountId])
 44 | }
 45 | 
 46 | model Session {
 47 |   sessionToken String   @unique
 48 |   userId       String
 49 |   expires      DateTime
 50 |   user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
 51 | 
 52 |   createdAt DateTime @default(now())
 53 |   updatedAt DateTime @updatedAt
 54 | }
 55 | 
 56 | model User {
 57 |   id            String          @id @default(cuid())
 58 |   name          String?
 59 |   email         String          @unique
 60 |   emailVerified DateTime?
 61 |   image         String?
 62 |   accounts      Account[]
 63 |   sessions      Session[]
 64 |   projects      Project[]
 65 |   Authenticator Authenticator[]
 66 | 
 67 |   createdAt DateTime @default(now())
 68 |   updatedAt DateTime @updatedAt
 69 | 
 70 |   @@map("users")
 71 | }
 72 | 
 73 | model Project {
 74 |   id          String     @id @default(cuid())
 75 |   name        String
 76 |   url         String     @unique
 77 |   description String
 78 |   userId      String
 79 |   user        User       @relation(fields: [userId], references: [id], onDelete: Cascade)
 80 |   feedbacks   Feedback[]
 81 |   createdAt   DateTime   @default(now())
 82 | 
 83 |   @@map("projects")
 84 | }
 85 | 
 86 | model Feedback {
 87 |   id        String   @id @default(cuid())
 88 |   name      String
 89 |   email     String
 90 |   feedback  String
 91 |   rating    Int      @default(3)
 92 |   createdAt DateTime @default(now())
 93 |   projectId String
 94 |   Project   Project  @relation(fields: [projectId], references: [id], onDelete: Cascade)
 95 | 
 96 |   @@map("feedbacks")
 97 | }
 98 | 
 99 | model VerificationToken {
100 |   identifier String
101 |   token      String
102 |   expires    DateTime
103 | 
104 |   @@id([identifier, token])
105 | }
106 | 


--------------------------------------------------------------------------------
/prisma/migrations/20240806042013_corrected_auth_table/migration.sql:
--------------------------------------------------------------------------------
 1 | /*
 2 |   Warnings:
 3 | 
 4 |   - You are about to drop the `Account` table. If the table is not empty, all the data it contains will be lost.
 5 |   - You are about to drop the `Authenticator` table. If the table is not empty, all the data it contains will be lost.
 6 |   - You are about to drop the `Session` table. If the table is not empty, all the data it contains will be lost.
 7 |   - You are about to drop the `User` table. If the table is not empty, all the data it contains will be lost.
 8 |   - You are about to drop the `VerificationToken` table. If the table is not empty, all the data it contains will be lost.
 9 | 
10 | */
11 | -- DropForeignKey
12 | ALTER TABLE "Account" DROP CONSTRAINT "Account_userId_fkey";
13 | 
14 | -- DropForeignKey
15 | ALTER TABLE "Authenticator" DROP CONSTRAINT "Authenticator_userId_fkey";
16 | 
17 | -- DropForeignKey
18 | ALTER TABLE "Session" DROP CONSTRAINT "Session_userId_fkey";
19 | 
20 | -- DropTable
21 | DROP TABLE "Account";
22 | 
23 | -- DropTable
24 | DROP TABLE "Authenticator";
25 | 
26 | -- DropTable
27 | DROP TABLE "Session";
28 | 
29 | -- DropTable
30 | DROP TABLE "User";
31 | 
32 | -- DropTable
33 | DROP TABLE "VerificationToken";
34 | 
35 | -- CreateTable
36 | CREATE TABLE "accounts" (
37 |     "id" TEXT NOT NULL,
38 |     "user_id" TEXT NOT NULL,
39 |     "type" TEXT NOT NULL,
40 |     "provider" TEXT NOT NULL,
41 |     "provider_account_id" TEXT NOT NULL,
42 |     "refresh_token" TEXT,
43 |     "access_token" TEXT,
44 |     "expires_at" INTEGER,
45 |     "token_type" TEXT,
46 |     "scope" TEXT,
47 |     "id_token" TEXT,
48 |     "session_state" TEXT,
49 | 
50 |     CONSTRAINT "accounts_pkey" PRIMARY KEY ("id")
51 | );
52 | 
53 | -- CreateTable
54 | CREATE TABLE "sessions" (
55 |     "id" TEXT NOT NULL,
56 |     "session_token" TEXT NOT NULL,
57 |     "user_id" TEXT NOT NULL,
58 |     "expires" TIMESTAMP(3) NOT NULL,
59 | 
60 |     CONSTRAINT "sessions_pkey" PRIMARY KEY ("id")
61 | );
62 | 
63 | -- CreateTable
64 | CREATE TABLE "users" (
65 |     "id" TEXT NOT NULL,
66 |     "name" TEXT,
67 |     "email" TEXT,
68 |     "email_verified" TIMESTAMP(3),
69 |     "image" TEXT,
70 | 
71 |     CONSTRAINT "users_pkey" PRIMARY KEY ("id")
72 | );
73 | 
74 | -- CreateTable
75 | CREATE TABLE "verificationtokens" (
76 |     "identifier" TEXT NOT NULL,
77 |     "token" TEXT NOT NULL,
78 |     "expires" TIMESTAMP(3) NOT NULL
79 | );
80 | 
81 | -- CreateIndex
82 | CREATE UNIQUE INDEX "accounts_provider_provider_account_id_key" ON "accounts"("provider", "provider_account_id");
83 | 
84 | -- CreateIndex
85 | CREATE UNIQUE INDEX "sessions_session_token_key" ON "sessions"("session_token");
86 | 
87 | -- CreateIndex
88 | CREATE UNIQUE INDEX "users_email_key" ON "users"("email");
89 | 
90 | -- CreateIndex
91 | CREATE UNIQUE INDEX "verificationtokens_identifier_token_key" ON "verificationtokens"("identifier", "token");
92 | 
93 | -- AddForeignKey
94 | ALTER TABLE "accounts" ADD CONSTRAINT "accounts_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
95 | 
96 | -- AddForeignKey
97 | ALTER TABLE "sessions" ADD CONSTRAINT "sessions_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
98 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
  1 | import type { Config } from "tailwindcss";
  2 | 
  3 | const config: Config = {
  4 |   darkMode: ["class"],
  5 |   content: [
  6 |     "./pages/**/*.{ts,tsx}",
  7 |     "./components/**/*.{ts,tsx}",
  8 |     "./app/**/*.{ts,tsx}",
  9 |     "./src/**/*.{ts,tsx}",
 10 |   ],
 11 |   prefix: "",
 12 |   theme: {
 13 |   	container: {
 14 |   		center: true,
 15 |   		padding: '2rem',
 16 |   		screens: {
 17 |   			'2xl': '1400px'
 18 |   		}
 19 |   	},
 20 |   	extend: {
 21 |   		animation: {
 22 |   			'border-beam': 'border-beam calc(var(--duration)*1s) infinite linear',
 23 |   			'accordion-down': 'accordion-down 0.2s ease-out',
 24 |   			'accordion-up': 'accordion-up 0.2s ease-out',
 25 |   			'logo-cloud': 'logo-cloud 30s linear infinite',
 26 |   			rainbow: 'rainbow var(--speed, 2s) infinite linear'
 27 |   		},
 28 |   		keyframes: {
 29 |   			'border-beam': {
 30 |   				'100%': {
 31 |   					'offset-distance': '100%'
 32 |   				}
 33 |   			},
 34 |   			'accordion-down': {
 35 |   				from: {
 36 |   					height: '0'
 37 |   				},
 38 |   				to: {
 39 |   					height: 'var(--radix-accordion-content-height)'
 40 |   				}
 41 |   			},
 42 |   			'accordion-up': {
 43 |   				from: {
 44 |   					height: 'var(--radix-accordion-content-height)'
 45 |   				},
 46 |   				to: {
 47 |   					height: '0'
 48 |   				}
 49 |   			},
 50 |   			'logo-cloud': {
 51 |   				from: {
 52 |   					transform: 'translateX(0)'
 53 |   				},
 54 |   				to: {
 55 |   					transform: 'translateX(calc(-100% - 4rem))'
 56 |   				}
 57 |   			},
 58 |   			rainbow: {
 59 |   				'0%': {
 60 |   					'background-position': '0%'
 61 |   				},
 62 |   				'100%': {
 63 |   					'background-position': '200%'
 64 |   				}
 65 |   			}
 66 |   		},
 67 |   		colors: {
 68 |   			border: 'hsl(var(--border))',
 69 |   			input: 'hsl(var(--input))',
 70 |   			ring: 'hsl(var(--ring))',
 71 |   			background: 'hsl(var(--background))',
 72 |   			foreground: 'hsl(var(--foreground))',
 73 |   			primary: {
 74 |   				DEFAULT: 'hsl(var(--primary))',
 75 |   				foreground: 'hsl(var(--primary-foreground))'
 76 |   			},
 77 |   			secondary: {
 78 |   				DEFAULT: 'hsl(var(--secondary))',
 79 |   				foreground: 'hsl(var(--secondary-foreground))'
 80 |   			},
 81 |   			destructive: {
 82 |   				DEFAULT: 'hsl(var(--destructive))',
 83 |   				foreground: 'hsl(var(--destructive-foreground))'
 84 |   			},
 85 |   			muted: {
 86 |   				DEFAULT: 'hsl(var(--muted))',
 87 |   				foreground: 'hsl(var(--muted-foreground))'
 88 |   			},
 89 |   			accent: {
 90 |   				DEFAULT: 'hsl(var(--accent))',
 91 |   				foreground: 'hsl(var(--accent-foreground))'
 92 |   			},
 93 |   			popover: {
 94 |   				DEFAULT: 'hsl(var(--popover))',
 95 |   				foreground: 'hsl(var(--popover-foreground))'
 96 |   			},
 97 |   			card: {
 98 |   				DEFAULT: 'hsl(var(--card))',
 99 |   				foreground: 'hsl(var(--card-foreground))'
100 |   			},
101 |   			'color-1': 'hsl(var(--color-1))',
102 |   			'color-2': 'hsl(var(--color-2))',
103 |   			'color-3': 'hsl(var(--color-3))',
104 |   			'color-4': 'hsl(var(--color-4))',
105 |   			'color-5': 'hsl(var(--color-5))'
106 |   		},
107 |   		borderRadius: {
108 |   			lg: 'var(--radius)',
109 |   			md: 'calc(var(--radius) - 2px)',
110 |   			sm: 'calc(var(--radius) - 4px)'
111 |   		}
112 |   	}
113 |   },
114 |   plugins: [require("tailwindcss-animate")],
115 | };
116 | 
117 | export default config;
118 | 


--------------------------------------------------------------------------------
/components/ui/table.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | 
  3 | import { cn } from "@/lib/utils"
  4 | 
  5 | const Table = React.forwardRef<
  6 |   HTMLTableElement,
  7 |   React.HTMLAttributes<HTMLTableElement>
  8 | >(({ className, ...props }, ref) => (
  9 |   <div className="relative w-full overflow-auto">
 10 |     <table
 11 |       ref={ref}
 12 |       className={cn("w-full caption-bottom text-sm", className)}
 13 |       {...props}
 14 |     />
 15 |   </div>
 16 | ))
 17 | Table.displayName = "Table"
 18 | 
 19 | const TableHeader = React.forwardRef<
 20 |   HTMLTableSectionElement,
 21 |   React.HTMLAttributes<HTMLTableSectionElement>
 22 | >(({ className, ...props }, ref) => (
 23 |   <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
 24 | ))
 25 | TableHeader.displayName = "TableHeader"
 26 | 
 27 | const TableBody = React.forwardRef<
 28 |   HTMLTableSectionElement,
 29 |   React.HTMLAttributes<HTMLTableSectionElement>
 30 | >(({ className, ...props }, ref) => (
 31 |   <tbody
 32 |     ref={ref}
 33 |     className={cn("[&_tr:last-child]:border-0", className)}
 34 |     {...props}
 35 |   />
 36 | ))
 37 | TableBody.displayName = "TableBody"
 38 | 
 39 | const TableFooter = React.forwardRef<
 40 |   HTMLTableSectionElement,
 41 |   React.HTMLAttributes<HTMLTableSectionElement>
 42 | >(({ className, ...props }, ref) => (
 43 |   <tfoot
 44 |     ref={ref}
 45 |     className={cn(
 46 |       "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
 47 |       className
 48 |     )}
 49 |     {...props}
 50 |   />
 51 | ))
 52 | TableFooter.displayName = "TableFooter"
 53 | 
 54 | const TableRow = React.forwardRef<
 55 |   HTMLTableRowElement,
 56 |   React.HTMLAttributes<HTMLTableRowElement>
 57 | >(({ className, ...props }, ref) => (
 58 |   <tr
 59 |     ref={ref}
 60 |     className={cn(
 61 |       "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
 62 |       className
 63 |     )}
 64 |     {...props}
 65 |   />
 66 | ))
 67 | TableRow.displayName = "TableRow"
 68 | 
 69 | const TableHead = React.forwardRef<
 70 |   HTMLTableCellElement,
 71 |   React.ThHTMLAttributes<HTMLTableCellElement>
 72 | >(({ className, ...props }, ref) => (
 73 |   <th
 74 |     ref={ref}
 75 |     className={cn(
 76 |       "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
 77 |       className
 78 |     )}
 79 |     {...props}
 80 |   />
 81 | ))
 82 | TableHead.displayName = "TableHead"
 83 | 
 84 | const TableCell = React.forwardRef<
 85 |   HTMLTableCellElement,
 86 |   React.TdHTMLAttributes<HTMLTableCellElement>
 87 | >(({ className, ...props }, ref) => (
 88 |   <td
 89 |     ref={ref}
 90 |     className={cn(
 91 |       "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
 92 |       className
 93 |     )}
 94 |     {...props}
 95 |   />
 96 | ))
 97 | TableCell.displayName = "TableCell"
 98 | 
 99 | const TableCaption = React.forwardRef<
100 |   HTMLTableCaptionElement,
101 |   React.HTMLAttributes<HTMLTableCaptionElement>
102 | >(({ className, ...props }, ref) => (
103 |   <caption
104 |     ref={ref}
105 |     className={cn("mt-4 text-sm text-muted-foreground", className)}
106 |     {...props}
107 |   />
108 | ))
109 | TableCaption.displayName = "TableCaption"
110 | 
111 | export {
112 |   Table,
113 |   TableHeader,
114 |   TableBody,
115 |   TableFooter,
116 |   TableHead,
117 |   TableRow,
118 |   TableCell,
119 |   TableCaption,
120 | }
121 | 


--------------------------------------------------------------------------------
/components/FeaturesSection.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   Palette,
  3 |   CloudLightning,
  4 |   BarChart,
  5 |   Users,
  6 |   Bot,
  7 |   MonitorSmartphone,
  8 | } from "lucide-react";
  9 | 
 10 | interface Feature {
 11 |   id: number;
 12 |   name: string;
 13 |   description: string;
 14 |   icon: JSX.Element;
 15 | }
 16 | 
 17 | const iconSize = 16;
 18 | 
 19 | const FeaturesData: Feature[] = [
 20 |   {
 21 |     id: 1,
 22 |     name: "Instant Feedback Collection",
 23 |     description:
 24 |       "Seamlessly gather user feedback in real-time to capture their opinions and suggestions immediately.",
 25 |     icon: <CloudLightning size={iconSize} />,
 26 |   },
 27 |   {
 28 |     id: 2,
 29 |     name: "Custom Feedback Widgets",
 30 |     description:
 31 |       "Design feedback widgets that blend perfectly with your website’s aesthetics and user experience.",
 32 |     icon: <Palette size={iconSize} />,
 33 |   },
 34 |   {
 35 |     id: 3,
 36 |     name: "Comprehensive Feedback Analytics",
 37 |     description:
 38 |       "Analyze feedback trends and patterns with detailed reports to make informed decisions.",
 39 |     icon: <BarChart size={iconSize} />,
 40 |   },
 41 |   {
 42 |     id: 4,
 43 |     name: "Multi-platform Integration",
 44 |     description:
 45 |       "Integrate feedback collection across various platforms, including web, email, and mobile apps.",
 46 |     icon: <MonitorSmartphone size={iconSize} />,
 47 |   },
 48 |   {
 49 |     id: 5,
 50 |     name: "Feedback Categorization",
 51 |     description:
 52 |       "Organize feedback into categories for better management and actionable insights.",
 53 |     icon: <Users size={iconSize} />,
 54 |   },
 55 |   {
 56 |     id: 6,
 57 |     name: "Automated Feedback Follow-ups",
 58 |     description:
 59 |       "Set up automated responses to acknowledge and follow up on user feedback promptly.",
 60 |     icon: <Bot size={iconSize} />,
 61 |   },
 62 | ];
 63 | 
 64 | const FeaturesGrid = () => {
 65 |   return (
 66 |     <div>
 67 |       <div className="mt-2 px-3 md:grid flex flex-col w-full grid-cols-2 gap-12 md:grid-cols-2 lg:grid-cols-3 pt-10">
 68 |         {FeaturesData.map((feature) => {
 69 |           return (
 70 |             <div key={feature.id} className="width-fit text-left">
 71 |               <div className="flex items-center gap-2">
 72 |                 {" "}
 73 |                 <div className="mb-2 w-fit rounded-lg bg-slate-700 p-1 text-center text-white ">
 74 |                   {feature.icon}
 75 |                 </div>
 76 |                 <div className="text-md mb-1 font-normal text-gray-900 dark:text-gray-100">
 77 |                   {feature.name}
 78 |                 </div>
 79 |               </div>
 80 |               <div className="font-regular max-w-sm text-xs text-gray-600  dark:text-gray-400">
 81 |                 {feature.description}
 82 |               </div>
 83 |             </div>
 84 |           );
 85 |         })}
 86 |       </div>
 87 |     </div>
 88 |   );
 89 | };
 90 | 
 91 | const FeatureSections = () => {
 92 |   return (
 93 |     <div className="my-12 min-w-[90vw] flex w-full flex-col items-center justify-center">
 94 |       <h1 className="mb-2 text-center text-2xl font-light tracking-tighter text-transparent bg-clip-text bg-gradient-to-br from-white to-gray-400 md:text-3xl ">
 95 |         Opinify is Not Like Other Feedback App.
 96 |       </h1>
 97 |       <p className="max-w-md text-center text-sm text-gray-600 dark:text-gray-400">
 98 |         Opinify is a free to use, and highly simplified feedback form
 99 |         integration website.
100 |       </p>
101 |       <FeaturesGrid />
102 |     </div>
103 |   );
104 | };
105 | 
106 | export default FeatureSections;
107 | 


--------------------------------------------------------------------------------
/prisma/migrations/20240807181559_refactored/migration.sql:
--------------------------------------------------------------------------------
 1 | /*
 2 |   Warnings:
 3 | 
 4 |   - You are about to drop the column `email_verified` on the `users` table. All the data in the column will be lost.
 5 |   - You are about to drop the `accounts` table. If the table is not empty, all the data it contains will be lost.
 6 |   - You are about to drop the `sessions` table. If the table is not empty, all the data it contains will be lost.
 7 |   - You are about to drop the `verificationtokens` table. If the table is not empty, all the data it contains will be lost.
 8 |   - Added the required column `updatedAt` to the `users` table without a default value. This is not possible if the table is not empty.
 9 |   - Made the column `email` on table `users` required. This step will fail if there are existing NULL values in that column.
10 | 
11 | */
12 | -- DropForeignKey
13 | ALTER TABLE "accounts" DROP CONSTRAINT "accounts_user_id_fkey";
14 | 
15 | -- DropForeignKey
16 | ALTER TABLE "sessions" DROP CONSTRAINT "sessions_user_id_fkey";
17 | 
18 | -- AlterTable
19 | ALTER TABLE "users" DROP COLUMN "email_verified",
20 | ADD COLUMN     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
21 | ADD COLUMN     "emailVerified" TIMESTAMP(3),
22 | ADD COLUMN     "updatedAt" TIMESTAMP(3) NOT NULL,
23 | ALTER COLUMN "email" SET NOT NULL;
24 | 
25 | -- DropTable
26 | DROP TABLE "accounts";
27 | 
28 | -- DropTable
29 | DROP TABLE "sessions";
30 | 
31 | -- DropTable
32 | DROP TABLE "verificationtokens";
33 | 
34 | -- CreateTable
35 | CREATE TABLE "Authenticator" (
36 |     "credentialID" TEXT NOT NULL,
37 |     "userId" TEXT NOT NULL,
38 |     "providerAccountId" TEXT NOT NULL,
39 |     "credentialPublicKey" TEXT NOT NULL,
40 |     "counter" INTEGER NOT NULL,
41 |     "credentialDeviceType" TEXT NOT NULL,
42 |     "credentialBackedUp" BOOLEAN NOT NULL,
43 |     "transports" TEXT,
44 | 
45 |     CONSTRAINT "Authenticator_pkey" PRIMARY KEY ("userId","credentialID")
46 | );
47 | 
48 | -- CreateTable
49 | CREATE TABLE "Account" (
50 |     "userId" TEXT NOT NULL,
51 |     "type" TEXT NOT NULL,
52 |     "provider" TEXT NOT NULL,
53 |     "providerAccountId" TEXT NOT NULL,
54 |     "refresh_token" TEXT,
55 |     "access_token" TEXT,
56 |     "expires_at" INTEGER,
57 |     "token_type" TEXT,
58 |     "scope" TEXT,
59 |     "id_token" TEXT,
60 |     "session_state" TEXT,
61 |     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
62 |     "updatedAt" TIMESTAMP(3) NOT NULL,
63 | 
64 |     CONSTRAINT "Account_pkey" PRIMARY KEY ("provider","providerAccountId")
65 | );
66 | 
67 | -- CreateTable
68 | CREATE TABLE "Session" (
69 |     "sessionToken" TEXT NOT NULL,
70 |     "userId" TEXT NOT NULL,
71 |     "expires" TIMESTAMP(3) NOT NULL,
72 |     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
73 |     "updatedAt" TIMESTAMP(3) NOT NULL
74 | );
75 | 
76 | -- CreateTable
77 | CREATE TABLE "VerificationToken" (
78 |     "identifier" TEXT NOT NULL,
79 |     "token" TEXT NOT NULL,
80 |     "expires" TIMESTAMP(3) NOT NULL,
81 | 
82 |     CONSTRAINT "VerificationToken_pkey" PRIMARY KEY ("identifier","token")
83 | );
84 | 
85 | -- CreateIndex
86 | CREATE UNIQUE INDEX "Authenticator_credentialID_key" ON "Authenticator"("credentialID");
87 | 
88 | -- CreateIndex
89 | CREATE UNIQUE INDEX "Session_sessionToken_key" ON "Session"("sessionToken");
90 | 
91 | -- AddForeignKey
92 | ALTER TABLE "Authenticator" ADD CONSTRAINT "Authenticator_userId_fkey" FOREIGN KEY ("userId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
93 | 
94 | -- AddForeignKey
95 | ALTER TABLE "Account" ADD CONSTRAINT "Account_userId_fkey" FOREIGN KEY ("userId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
96 | 
97 | -- AddForeignKey
98 | ALTER TABLE "Session" ADD CONSTRAINT "Session_userId_fkey" FOREIGN KEY ("userId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
99 | 


--------------------------------------------------------------------------------
/components/CreateProject.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import React, { useState } from "react";
  3 | import { Label } from "./ui/label";
  4 | import { Textarea } from "./ui/textarea";
  5 | import {
  6 |   Dialog,
  7 |   DialogContent,
  8 |   DialogFooter,
  9 |   DialogHeader,
 10 |   DialogTitle,
 11 |   DialogTrigger,
 12 | } from "./ui/dialog";
 13 | import { Button } from "./ui/button";
 14 | import { Input } from "./ui/input";
 15 | import { Loader, PlusSquareIcon, SquarePlus } from "lucide-react";
 16 | import { submitProject } from "@/app/actions/createProject";
 17 | import { toast } from "sonner";
 18 | import { useRouter } from "next/navigation";
 19 | 
 20 | const CreateProject = () => {
 21 |   const [name, setName] = useState("");
 22 |   const [url, setUrl] = useState("");
 23 |   const [description, setDescription] = useState("");
 24 |   const [loading, setLoading] = useState(false);
 25 | 
 26 |   const router = useRouter();
 27 | 
 28 |   const handleSubmit = async (e: React.FormEvent) => {
 29 |     setLoading(true);
 30 |     e.preventDefault();
 31 |     const formData = {
 32 |       name,
 33 |       url,
 34 |       description,
 35 |     };
 36 |     const data = await submitProject(formData);
 37 |     if (data.success) {
 38 |       router.push(`dashboard/feedbacks/${data.projectId}`);
 39 |       setName("");
 40 |       setUrl("");
 41 |       setDescription("");
 42 |       setLoading(false);
 43 |     } else {
 44 |       toast.error("Failed to create project 😢");
 45 |       setLoading(false);
 46 |     }
 47 |   };
 48 | 
 49 |   return (
 50 |     <Dialog>
 51 |       <DialogTrigger asChild>
 52 |         <Button size={"sm"} className="flex items-center gap-2 w-full">
 53 |           Create Project <SquarePlus size={16} />
 54 |         </Button>
 55 |       </DialogTrigger>
 56 |       <DialogContent className="md:max-w-[500px] max-w-[80vw] rounded-md">
 57 |         <DialogHeader>
 58 |           <DialogTitle>Create Project</DialogTitle>
 59 |         </DialogHeader>
 60 |         <form onSubmit={handleSubmit} className="grid gap-4 py-4">
 61 |           <div className="grid gap-2">
 62 |             <Label htmlFor="name">Project Name: </Label>
 63 |             <Input
 64 |               id="name"
 65 |               placeholder="Enter project name"
 66 |               value={name}
 67 |               onChange={(e) => setName(e.target.value)}
 68 |             />
 69 |           </div>
 70 |           <div className="grid gap-2">
 71 |             <Label htmlFor="url">Project URL:</Label>
 72 |             <span className="text-[10px] text-red-600">
 73 |               URL should be unique...
 74 |             </span>
 75 |             <Input
 76 |               id="url"
 77 |               placeholder="Enter project URL: https://shubhcodes.me/"
 78 |               value={url}
 79 |               onChange={(e) => setUrl(e.target.value)}
 80 |             />
 81 |           </div>
 82 |           <div className="grid gap-2">
 83 |             <Label htmlFor="description">Project Description:</Label>
 84 |             <span className="text-[10px] text-red-600">
 85 |               5 minimum characters required...
 86 |             </span>
 87 |             <Textarea
 88 |               id="description"
 89 |               placeholder="Enter project description"
 90 |               value={description}
 91 |               onChange={(e) => setDescription(e.target.value)}
 92 |             />
 93 |           </div>
 94 |           <DialogFooter>
 95 |             {loading ? (
 96 |               <Button disabled className="w-full">
 97 |                 <Loader size={16} className="animate-spin" />
 98 |               </Button>
 99 |             ) : (
100 |               <Button type="submit" className="w-full">
101 |                 Create Project
102 |                 <PlusSquareIcon size={16} className="ml-1" />
103 |               </Button>
104 |             )}
105 |           </DialogFooter>
106 |         </form>
107 |       </DialogContent>
108 |     </Dialog>
109 |   );
110 | };
111 | 
112 | export default CreateProject;
113 | 


--------------------------------------------------------------------------------
/components/feedback-view.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import {
  4 |   Dialog,
  5 |   DialogTrigger,
  6 |   DialogContent,
  7 |   DialogFooter,
  8 | } from "@/components/ui/dialog";
  9 | import { Button } from "@/components/ui/button";
 10 | import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
 11 | import { Separator } from "@/components/ui/separator";
 12 | import { deleteFeedback } from "@/app/actions/deleteFeedback";
 13 | import { Loader } from "lucide-react";
 14 | import { useState } from "react";
 15 | import { useRouter } from "next/navigation";
 16 | 
 17 | type FeedbackViewProps = {
 18 |   name: string;
 19 |   email: string;
 20 |   rating: number;
 21 |   feedback: string;
 22 |   projectId: string;
 23 |   submitted: string;
 24 |   avatarSrc?: string;
 25 | };
 26 | 
 27 | export function FeedbackView({
 28 |   name,
 29 |   email,
 30 |   rating,
 31 |   feedback,
 32 |   projectId,
 33 |   submitted,
 34 | }: FeedbackViewProps) {
 35 |   const [loading, setLoading] = useState(false);
 36 |   const router = useRouter();
 37 | 
 38 |   const handleDelete = async () => {
 39 |     setLoading(true);
 40 |     const { success } = await deleteFeedback(projectId);
 41 |     if (success) {
 42 |       setLoading(false);
 43 |       router.refresh();
 44 |     } else {
 45 |       setLoading(false);
 46 |     }
 47 |   };
 48 | 
 49 |   return (
 50 |     <Dialog>
 51 |       <DialogTrigger asChild>
 52 |         <Button variant="outline">View Review</Button>
 53 |       </DialogTrigger>
 54 |       <DialogContent className="md:w-full w-[95vw] p-6 md:p-8 bg-background rounded-lg shadow-lg">
 55 |         <div className="flex items-center justify-between mb-6">
 56 |           <div className="flex items-center gap-4">
 57 |             <Avatar className="w-10 h-10">
 58 |               <AvatarImage
 59 |                 src={`https://ui-avatars.com/api/?name=${name}`}
 60 |                 alt={name}
 61 |               />
 62 |               <AvatarFallback>{name.charAt(0)}</AvatarFallback>
 63 |             </Avatar>
 64 |             <div className="grid gap-0.5">
 65 |               <h3 className="font-semibold">{name}</h3>
 66 |               <p className="text-sm text-muted-foreground">{email}</p>
 67 |             </div>
 68 |           </div>
 69 |           <div className="flex items-center gap-0.5 text-primary">
 70 |             {Array.from({ length: 5 }).map((_, index) => (
 71 |               <StarIcon
 72 |                 key={index}
 73 |                 className={`w-5 h-5 fill-current ${
 74 |                   index < rating ? "text-yellow-500" : "text-gray-300"
 75 |                 }`}
 76 |               />
 77 |             ))}
 78 |           </div>
 79 |         </div>
 80 |         <Separator />
 81 |         <div className="py-6 text-sm leading-loose overflow-x-hidden max-h-60 whitespace-pre-wrap text-wrap hyphens-auto text-muted-foreground hypens">
 82 |           <p>
 83 |             <span className="font-medium text-white">Feedback:</span> {feedback}
 84 |           </p>
 85 |         </div>
 86 |         <div className="flex items-center justify-between text-sm text-muted-foreground">
 87 |           {/* <p>
 88 |             <span className="font-medium text-white">Project ID:</span>{" "}
 89 |             {projectId}
 90 |           </p> */}
 91 |           <p>
 92 |             <span className="font-medium text-white">Submitted:</span>{" "}
 93 |             {submitted}
 94 |           </p>
 95 |         </div>
 96 |         <Separator />
 97 |         <DialogFooter>
 98 |           {loading ? (
 99 |             <Button>
100 |               <Loader size={16} className="animate-spin" />
101 |             </Button>
102 |           ) : (
103 |             <Button onClick={handleDelete}>Delete</Button>
104 |           )}
105 |         </DialogFooter>
106 |       </DialogContent>
107 |     </Dialog>
108 |   );
109 | }
110 | 
111 | function StarIcon(props: React.SVGProps<SVGSVGElement>) {
112 |   return (
113 |     <svg
114 |       {...props}
115 |       xmlns="http://www.w3.org/2000/svg"
116 |       width="24"
117 |       height="24"
118 |       viewBox="0 0 24 24"
119 |       fill="none"
120 |       stroke="currentColor"
121 |       strokeWidth="2"
122 |       strokeLinecap="round"
123 |       strokeLinejoin="round"
124 |     >
125 |       <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
126 |     </svg>
127 |   );
128 | }
129 | 


--------------------------------------------------------------------------------
/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as DialogPrimitive from "@radix-ui/react-dialog"
  5 | import { Cross2Icon } from "@radix-ui/react-icons"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | const Dialog = DialogPrimitive.Root
 10 | 
 11 | const DialogTrigger = DialogPrimitive.Trigger
 12 | 
 13 | const DialogPortal = DialogPrimitive.Portal
 14 | 
 15 | const DialogClose = DialogPrimitive.Close
 16 | 
 17 | const DialogOverlay = React.forwardRef<
 18 |   React.ElementRef<typeof DialogPrimitive.Overlay>,
 19 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 20 | >(({ className, ...props }, ref) => (
 21 |   <DialogPrimitive.Overlay
 22 |     ref={ref}
 23 |     className={cn(
 24 |       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 25 |       className
 26 |     )}
 27 |     {...props}
 28 |   />
 29 | ))
 30 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 31 | 
 32 | const DialogContent = React.forwardRef<
 33 |   React.ElementRef<typeof DialogPrimitive.Content>,
 34 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 35 | >(({ className, children, ...props }, ref) => (
 36 |   <DialogPortal>
 37 |     <DialogOverlay />
 38 |     <DialogPrimitive.Content
 39 |       ref={ref}
 40 |       className={cn(
 41 |         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
 42 |         className
 43 |       )}
 44 |       {...props}
 45 |     >
 46 |       {children}
 47 |       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
 48 |         <Cross2Icon className="h-4 w-4" />
 49 |         <span className="sr-only">Close</span>
 50 |       </DialogPrimitive.Close>
 51 |     </DialogPrimitive.Content>
 52 |   </DialogPortal>
 53 | ))
 54 | DialogContent.displayName = DialogPrimitive.Content.displayName
 55 | 
 56 | const DialogHeader = ({
 57 |   className,
 58 |   ...props
 59 | }: React.HTMLAttributes<HTMLDivElement>) => (
 60 |   <div
 61 |     className={cn(
 62 |       "flex flex-col space-y-1.5 text-center sm:text-left",
 63 |       className
 64 |     )}
 65 |     {...props}
 66 |   />
 67 | )
 68 | DialogHeader.displayName = "DialogHeader"
 69 | 
 70 | const DialogFooter = ({
 71 |   className,
 72 |   ...props
 73 | }: React.HTMLAttributes<HTMLDivElement>) => (
 74 |   <div
 75 |     className={cn(
 76 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 77 |       className
 78 |     )}
 79 |     {...props}
 80 |   />
 81 | )
 82 | DialogFooter.displayName = "DialogFooter"
 83 | 
 84 | const DialogTitle = React.forwardRef<
 85 |   React.ElementRef<typeof DialogPrimitive.Title>,
 86 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 87 | >(({ className, ...props }, ref) => (
 88 |   <DialogPrimitive.Title
 89 |     ref={ref}
 90 |     className={cn(
 91 |       "text-lg font-semibold leading-none tracking-tight",
 92 |       className
 93 |     )}
 94 |     {...props}
 95 |   />
 96 | ))
 97 | DialogTitle.displayName = DialogPrimitive.Title.displayName
 98 | 
 99 | const DialogDescription = React.forwardRef<
100 |   React.ElementRef<typeof DialogPrimitive.Description>,
101 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
102 | >(({ className, ...props }, ref) => (
103 |   <DialogPrimitive.Description
104 |     ref={ref}
105 |     className={cn("text-sm text-muted-foreground", className)}
106 |     {...props}
107 |   />
108 | ))
109 | DialogDescription.displayName = DialogPrimitive.Description.displayName
110 | 
111 | export {
112 |   Dialog,
113 |   DialogPortal,
114 |   DialogOverlay,
115 |   DialogTrigger,
116 |   DialogClose,
117 |   DialogContent,
118 |   DialogHeader,
119 |   DialogFooter,
120 |   DialogTitle,
121 |   DialogDescription,
122 | }
123 | 


--------------------------------------------------------------------------------
/app/dashboard/feedbacks/[id]/page.tsx:
--------------------------------------------------------------------------------
  1 | import { FeedbackTable } from "@/components/feedback-table";
  2 | import { auth } from "@/lib/auth";
  3 | import prisma from "@/lib/db";
  4 | import { redirect } from "next/navigation";
  5 | import React from "react";
  6 | import EmbedCodeTabs from "@/components/CodeTabs"; // Adjust the path as needed
  7 | import { Metadata } from "next";
  8 | import Markdown from "react-markdown";
  9 | 
 10 | interface Params {
 11 |   params: { id: string };
 12 | }
 13 | 
 14 | async function getProjectName(id: string) {
 15 |   const isValidID = await prisma.project.findUnique({
 16 |     where: {
 17 |       id: id,
 18 |     },
 19 |   });
 20 | 
 21 |   if (!isValidID) {
 22 |     return redirect("/error");
 23 |   }
 24 |   const projectName = await prisma.project.findUnique({
 25 |     where: {
 26 |       id: id,
 27 |     },
 28 |     select: {
 29 |       name: true,
 30 |     },
 31 |   });
 32 |   return projectName?.name;
 33 | }
 34 | 
 35 | export async function generateMetadata({ params }: Params): Promise<Metadata> {
 36 |   const projectName = await getProjectName(params.id);
 37 |   return {
 38 |     title: projectName || "Project Page",
 39 |   };
 40 | }
 41 | 
 42 | const Page = async ({ params }: Params) => {
 43 |   try {
 44 |     const user = await auth();
 45 | 
 46 |     if (!user) {
 47 |       return redirect("/");
 48 |     }
 49 | 
 50 |     const feedbacks = await prisma.feedback.findMany({
 51 |       where: {
 52 |         projectId: params.id,
 53 |       },
 54 |     });
 55 | 
 56 |     feedbacks.forEach((feedback) => {
 57 |       feedback.createdAt = new Date(feedback.createdAt);
 58 |     });
 59 | 
 60 |     console.log("feedbacks: ", feedbacks);
 61 |     let projectName = await getProjectName(params.id);
 62 |     // console.log("id: ", params.id);
 63 | 
 64 |     return (
 65 |       <div className="w-screen h-full overflow-y-scroll">
 66 |         {/* <div className="p-4 border rounded-lg m-2">
 67 |           <div className="text-2xl font-bold mb-2">
 68 |             What our expert thinks about you website 🤖
 69 |           </div>
 70 |           <div className="text-sm text-zinc-400">
 71 |             <Markdown>
 72 |               {`"general_feedback": "The provided feedback data seems to lack substance and clarity. Most of the feedback entries appear to be test data with repetitive or nonsensical content. ", "specific_feedback": ["- **Feedback Content:**  The 'feedback' field often contains repeated strings (\"clzl2hbzl0002xqbah92ket38\") or meaningless sequences (\"jnjnjnjnjnjnj\"), which makes it difficult to derive any meaningful insights.  ", "- **User Information:**  Multiple entries share the same email address (\"jabhi465@gmail.com\"), potentially indicating test submissions or inaccurate data collection.", "- **Data Relevance:**  Without context about the website itself, it's challenging to provide specific recommendations based on the feedback. ", "- **Actionable Insights:**  To extract valuable guidance, focus on gathering specific and descriptive feedback from real users about their experience on the website. "], "recommendation": "Encourage users to provide detailed feedback on specific aspects of the website, such as design, usability, content, or functionality. This will help you identify areas for improvement and enhance the overall user experience."`}
 73 |             </Markdown>
 74 |           </div>
 75 |         </div> */}
 76 |         <div className="flex text-sm gap-x-2 m-2 border border-red-800 text-red-400 rounded-lg p-4">
 77 |           <div
 78 |             className="font-bold
 79 |            shrink-0"
 80 |           >
 81 |             🚨 Note:
 82 |           </div>
 83 |           <div className="">
 84 |             Please embed the updated widget code from below and paste it in your
 85 |             website. Thank you!
 86 |           </div>
 87 |         </div>
 88 |         <div className="m-2">
 89 |           {feedbacks.length > 0 ? (
 90 |             <FeedbackTable
 91 |               initialFeedback={feedbacks}
 92 |               initialSort={{
 93 |                 key: "createdAt",
 94 |                 order: "desc",
 95 |               }}
 96 |             />
 97 |           ) : (
 98 |             <h1 className="text-center my-6">No feedbacks found 🥲...</h1>
 99 |           )}
100 |         </div>
101 |         <EmbedCodeTabs id={params.id} websiteNameFromParent={projectName!} />
102 |       </div>
103 |     );
104 |   } catch (error) {
105 |     console.error("Error fetching feedbacks:", error);
106 |     return <div>Error fetching feedbacks</div>;
107 |   }
108 | };
109 | 
110 | export default Page;
111 | 


--------------------------------------------------------------------------------
/components/Navbar.tsx:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import Link from "next/link";
  3 | import { MenuIcon, ChartArea, ReceiptIndianRupee, Info } from "lucide-react";
  4 | import {
  5 |   Sheet,
  6 |   SheetContent,
  7 |   SheetDescription,
  8 |   SheetHeader,
  9 |   SheetTitle,
 10 |   SheetTrigger,
 11 | } from "./ui/sheet";
 12 | import { Button } from "./ui/button";
 13 | import { Card, CardContent } from "./ui/card";
 14 | import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
 15 | import AuthButtons, {
 16 |   MobileSheetButtonsWithAuth,
 17 |   MobileSheetButtonsWithoutAuth,
 18 | } from "./AuthButtons";
 19 | import { auth } from "@/lib/auth";
 20 | 
 21 | // Extracted navigation items for better maintainability
 22 | const NAV_ITEMS = [
 23 |   { href: "/dashboard", icon: ChartArea, label: "Dashboard" },
 24 |   { href: "/dashboard/pricing", icon: ReceiptIndianRupee, label: "Pricing" },
 25 |   { href: "/about", icon: Info, label: "About" },
 26 | ] as const;
 27 | 
 28 | // Extracted into a separate component for better organization
 29 | const UserCard = ({ user }: { user: any }) => (
 30 |   <Card className="w-full max-w-sm bg-card rounded-lg">
 31 |     <CardContent className="p-3 grid gap-4">
 32 |       <div className="flex items-center gap-4">
 33 |         <Avatar className="h-6 w-6">
 34 |           <AvatarImage src={user?.user?.image ?? ""} alt="userImage" />
 35 |           <AvatarFallback>{user?.user?.name?.[0]}</AvatarFallback>
 36 |         </Avatar>
 37 |         <div className="grid gap-1">
 38 |           <div className="font-semibold text-sm">
 39 |             {truncateText(user?.user?.name, 18)}
 40 |           </div>
 41 |           <div className="text-muted-foreground text-xs">
 42 |             {truncateText(user?.user?.email, 18)}
 43 |           </div>
 44 |         </div>
 45 |       </div>
 46 |     </CardContent>
 47 |   </Card>
 48 | );
 49 | 
 50 | // Helper function for text truncation
 51 | const truncateText = (text: string | undefined, limit: number): string => {
 52 |   if (!text) return "";
 53 |   return text.length > limit ? `${text.slice(0, limit)}...` : text;
 54 | };
 55 | 
 56 | // Navigation buttons component
 57 | const NavigationButtons = () => (
 58 |   <>
 59 |     {NAV_ITEMS.map(({ href, icon: Icon, label }) => (
 60 |       <Button key={href} className="w-full" asChild variant="outline">
 61 |         <Link
 62 |           className="flex items-center px-3 py-2 text-black transition-colors duration-300 transform rounded-lg dark:text-white/80 hover:bg-black dark:hover:bg-gray-50/10 hover:text-white/50"
 63 |           href={href}
 64 |         >
 65 |           <Icon size={16} />
 66 |           <span className="mx-2 text-sm font-medium">{label}</span>
 67 |         </Link>
 68 |       </Button>
 69 |     ))}
 70 |   </>
 71 | );
 72 | 
 73 | const MobileMenu = ({ user }: { user: any }) => (
 74 |   <Sheet>
 75 |     <SheetTrigger className="md:hidden block">
 76 |       <MenuIcon className="w-6 h-6" />
 77 |     </SheetTrigger>
 78 |     <SheetContent className="z-[200]" side="left">
 79 |       <SheetHeader>
 80 |         <SheetTitle className="mb-6 font-normal text-lg text-start">
 81 |           Opinify - Menu
 82 |         </SheetTitle>
 83 |         <SheetDescription className="flex flex-col justify-between h-[88vh]">
 84 |           <div>
 85 |             {user ? (
 86 |               <div className="mb-4 flex flex-col gap-2">
 87 |                 <NavigationButtons />
 88 |                 <MobileSheetButtonsWithAuth />
 89 |               </div>
 90 |             ) : (
 91 |               <MobileSheetButtonsWithoutAuth />
 92 |             )}
 93 |           </div>
 94 |           {user && <UserCard user={user} />}
 95 |         </SheetDescription>
 96 |       </SheetHeader>
 97 |     </SheetContent>
 98 |   </Sheet>
 99 | );
100 | 
101 | const Navbar = async () => {
102 |   const user = await auth();
103 | 
104 |   return (
105 |     <div className="flex h-full bg-zinc-900 mx-auto bg-clip-padding backdrop-filter z-[100] backdrop-blur-sm bg-opacity-30 items-center md:px-16 px-6 justify-between py-6 border-b-2 border-zinc-800 sticky top-0">
106 |       <div className="flex items-center gap-4">
107 |         <MobileMenu user={user} />
108 |         <Link
109 |           href="/"
110 |           className="text-xl font-light text-transparent z-[200] bg-gradient-to-br from-white to-gray-300 bg-clip-text"
111 |         >
112 |           Opinify
113 |         </Link>
114 |       </div>
115 | 
116 |       <div className="flex items-center gap-4 my-auto">
117 |         <AuthButtons />
118 |       </div>
119 |     </div>
120 |   );
121 | };
122 | 
123 | export default Navbar;
124 | 


--------------------------------------------------------------------------------
/components/Footer.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const GitHubIcon = (props: React.ComponentPropsWithoutRef<"svg">) => {
 4 |   return (
 5 |     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
 6 |       <path
 7 |         fillRule="evenodd"
 8 |         clipRule="evenodd"
 9 |         d="M10 1.667c-4.605 0-8.334 3.823-8.334 8.544 0 3.78 2.385 6.974 5.698 8.106.417.075.573-.182.573-.406 0-.203-.011-.875-.011-1.592-2.093.397-2.635-.522-2.802-1.002-.094-.246-.5-1.005-.854-1.207-.291-.16-.708-.556-.01-.567.656-.01 1.124.62 1.281.876.75 1.292 1.948.93 2.427.705.073-.555.291-.93.531-1.143-1.854-.213-3.791-.95-3.791-4.218 0-.929.322-1.698.854-2.296-.083-.214-.375-1.09.083-2.265 0 0 .698-.224 2.292.876a7.576 7.576 0 0 1 2.083-.288c.709 0 1.417.096 2.084.288 1.593-1.11 2.291-.875 2.291-.875.459 1.174.167 2.05.084 2.263.53.599.854 1.357.854 2.297 0 3.278-1.948 4.005-3.802 4.219.302.266.563.78.563 1.58 0 1.143-.011 2.061-.011 2.35 0 .224.156.491.573.405a8.365 8.365 0 0 0 4.11-3.116 8.707 8.707 0 0 0 1.567-4.99c0-4.721-3.73-8.545-8.334-8.545Z"
10 |       />
11 |     </svg>
12 |   );
13 | };
14 | 
15 | const XIcon = (props: React.ComponentPropsWithoutRef<"svg">) => {
16 |   return (
17 |     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
18 |       <path d="M11.1527 8.92804L16.2525 3H15.044L10.6159 8.14724L7.07919 3H3L8.34821 10.7835L3 17H4.20855L8.88474 11.5643L12.6198 17H16.699L11.1524 8.92804H11.1527ZM9.49748 10.8521L8.95559 10.077L4.644 3.90978H6.50026L9.97976 8.88696L10.5216 9.66202L15.0446 16.1316H13.1883L9.49748 10.8524V10.8521Z" />
19 |     </svg>
20 |   );
21 | };
22 | 
23 | const DiscordIcon = (props: React.ComponentPropsWithoutRef<"svg">) => {
24 |   return (
25 |     <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
26 |       <path d="M16.238 4.515a14.842 14.842 0 0 0-3.664-1.136.055.055 0 0 0-.059.027 10.35 10.35 0 0 0-.456.938 13.702 13.702 0 0 0-4.115 0 9.479 9.479 0 0 0-.464-.938.058.058 0 0 0-.058-.027c-1.266.218-2.497.6-3.664 1.136a.052.052 0 0 0-.024.02C1.4 8.023.76 11.424 1.074 14.782a.062.062 0 0 0 .024.042 14.923 14.923 0 0 0 4.494 2.272.058.058 0 0 0 .064-.02c.346-.473.654-.972.92-1.496a.057.057 0 0 0-.032-.08 9.83 9.83 0 0 1-1.404-.669.058.058 0 0 1-.029-.046.058.058 0 0 1 .023-.05c.094-.07.189-.144.279-.218a.056.056 0 0 1 .058-.008c2.946 1.345 6.135 1.345 9.046 0a.056.056 0 0 1 .059.007c.09.074.184.149.28.22a.058.058 0 0 1 .023.049.059.059 0 0 1-.028.046 9.224 9.224 0 0 1-1.405.669.058.058 0 0 0-.033.033.056.056 0 0 0 .002.047c.27.523.58 1.022.92 1.495a.056.056 0 0 0 .062.021 14.878 14.878 0 0 0 4.502-2.272.055.055 0 0 0 .016-.018.056.056 0 0 0 .008-.023c.375-3.883-.63-7.256-2.662-10.246a.046.046 0 0 0-.023-.021Zm-9.223 8.221c-.887 0-1.618-.814-1.618-1.814s.717-1.814 1.618-1.814c.908 0 1.632.821 1.618 1.814 0 1-.717 1.814-1.618 1.814Zm5.981 0c-.887 0-1.618-.814-1.618-1.814s.717-1.814 1.618-1.814c.908 0 1.632.821 1.618 1.814 0 1-.71 1.814-1.618 1.814Z" />
27 |     </svg>
28 |   );
29 | };
30 | 
31 | const SocialLink = ({
32 |   href,
33 |   icon: Icon,
34 |   children,
35 | }: {
36 |   href: string;
37 |   icon: React.ComponentType<{ className?: string }>;
38 |   children: React.ReactNode;
39 | }) => {
40 |   return (
41 |     <a href={href} target="_blank" rel="noreferrer" className="group">
42 |       <span className="sr-only">{children}</span>
43 |       <Icon className="h-5 w-5 fill-zinc-700 transition group-hover:fill-gray-100 dark:group-hover:fill-gray-200" />
44 |     </a>
45 |   );
46 | };
47 | 
48 | const Footer = () => {
49 |   return (
50 |     <div className="flex w-full z-[100000] flex-col items-center px-10 justify-between gap-5 border-t border-gray-900/5 py-8 sm:flex-row dark:border-white/5">
51 |       <p className="text-xs text-gray-600 dark:text-gray-100">
52 |         Copyright © {new Date().getFullYear()}{" "}
53 |         <a
54 |           href="https://shubhcodes.me"
55 |           className=" text-zinc-500 underline hover:text-zinc-500 "
56 |         >
57 |           ShubhCodes
58 |         </a>
59 |         <span className="mx-2">|</span>
60 |         <a
61 |           href="https://opinify.in/privacy"
62 |           className=" text-zinc-500 underline hover:text-zinc-500 "
63 |         >
64 |           Privacy Policy
65 |         </a>{" "}
66 |       </p>
67 |       <div className="flex gap-4">
68 |         <SocialLink href="https://x.com/opinifyin" icon={XIcon}>
69 |           Follow me on X
70 |         </SocialLink>
71 |         <SocialLink
72 |           href="https://github.com/avayyyyyyy/Opinify"
73 |           icon={GitHubIcon}
74 |         >
75 |           Follow me on GitHub
76 |         </SocialLink>
77 |       </div>
78 |     </div>
79 |   );
80 | };
81 | 
82 | export default Footer;
83 | 
84 | // Made with ❤️ by ShubhCodes.
85 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
  1 | import { SpeedInsights } from "@vercel/speed-insights/next";
  2 | import { Toaster } from "@/components/ui/sonner";
  3 | import { ThemeProvider } from "@/components/theme-provider";
  4 | import type { Metadata } from "next";
  5 | import { Analytics } from "@vercel/analytics/react";
  6 | import { Poppins } from "next/font/google";
  7 | import "./globals.css";
  8 | import Navbar from "@/components/Navbar";
  9 | import Footer from "@/components/Footer";
 10 | import { SessionProvider } from "next-auth/react";
 11 | import Head from "next/head";
 12 | import NextTopLoader from "nextjs-toploader";
 13 | import Announcement from "@/components/Announcement";
 14 | 
 15 | const inter = Poppins({
 16 |   subsets: ["latin"],
 17 |   weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
 18 | });
 19 | 
 20 | export const metadata: Metadata = {
 21 |   metadataBase: new URL("https://www.opinify.in"),
 22 |   title: {
 23 |     default:
 24 |       "Opinify: Real-Time Feedback Platform | Enhance Customer Engagement",
 25 |     template: "%s - Opinify.in",
 26 |   },
 27 |   description:
 28 |     "Enhance customer engagement with Opinify's real-time feedback platform. Collect, manage, and analyze user insights to drive data-driven improvements.",
 29 |   twitter: {
 30 |     card: "summary_large_image",
 31 |     title: "Opinify: Real-Time Feedback Platform | Enhance Customer Engagement",
 32 |     description:
 33 |       "Enhance customer engagement with Opinify's real-time feedback platform. Collect, manage, and analyze user insights to drive data-driven improvements.",
 34 |     images: ["https://utfs.io/f/9e53247a-090e-4b56-ae1e-03c9e4bff653-md47.png"],
 35 |   },
 36 |   openGraph: {
 37 |     title: "Opinify: Real-Time Feedback Platform | Enhance Customer Engagement",
 38 |     description:
 39 |       "Enhance customer engagement with Opinify's real-time feedback platform. Collect, manage, and analyze user insights to drive data-driven improvements.",
 40 |     url: "https://www.opinify.in",
 41 |     siteName: "Opinify",
 42 |     images: [
 43 |       {
 44 |         url: "https://utfs.io/f/9e53247a-090e-4b56-ae1e-03c9e4bff653-md47.png",
 45 |         width: 1200,
 46 |         height: 630,
 47 |       },
 48 |     ],
 49 |     locale: "en_US",
 50 |     type: "website",
 51 |   },
 52 |   other: {
 53 |     "schema-org": JSON.stringify({
 54 |       "@context": "https://schema.org",
 55 |       "@type": "WebSite",
 56 |       name: "Opinify",
 57 |       url: "https://www.opinify.in",
 58 |       potentialAction: {
 59 |         "@type": "SearchAction",
 60 |         target: "https://www.opinify.in/search?q={search_term_string}",
 61 |         "query-input": "required name=search_term_string",
 62 |       },
 63 |     }),
 64 |   },
 65 | };
 66 | 
 67 | declare global {
 68 |   namespace JSX {
 69 |     interface IntrinsicElements {
 70 |       "widget-web-component": React.DetailedHTMLProps<
 71 |         React.HTMLAttributes<HTMLElement>,
 72 |         HTMLElement
 73 |       > & {
 74 |         projectid: string;
 75 |         theme: string;
 76 |       };
 77 |     }
 78 |   }
 79 | }
 80 | 
 81 | export default async function RootLayout({
 82 |   children,
 83 | }: Readonly<{
 84 |   children: React.ReactNode;
 85 | }>) {
 86 |   return (
 87 |     <html lang="en">
 88 |       <Head>
 89 |         <link rel="icon" href="/favicon.ico" />
 90 |       </Head>
 91 |       <body className={`${inter.className}`}>
 92 |         <NextTopLoader
 93 |           color="#fff"
 94 |           showSpinner={false}
 95 |           initialPosition={0.08}
 96 |           height={2}
 97 |         />
 98 |         <Announcement />
 99 |         <SessionProvider>
100 |           <ThemeProvider
101 |             attribute="class"
102 |             defaultTheme="dark"
103 |             enableSystem
104 |             disableTransitionOnChange
105 |           >
106 |             <Navbar />
107 |             <div className="z-[10] overflow-x-hidden">{children}</div>
108 |             <Footer />
109 |             <Toaster richColors closeButton duration={4000} />
110 |           </ThemeProvider>
111 |           <Analytics />
112 |           <SpeedInsights />
113 |         </SessionProvider>
114 |         <div
115 |           style={{
116 |             position: "fixed",
117 |             bottom: "70px",
118 |             right: "20px",
119 |             zIndex: 100000000000,
120 |           }}
121 |         >
122 |           <widget-web-component
123 |             theme="urbanWhisper"
124 |             website-name="Opinify.in 🚀"
125 |             projectid="clzqmvwjs0001ownulyf1v7iv"
126 |           ></widget-web-component>
127 |         </div>
128 |         <script async src="https://widget.opinify.in/widget.umd.js"></script>
129 |       </body>
130 |     </html>
131 |   );
132 | }
133 | 


--------------------------------------------------------------------------------
/components/Pricing.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import { AnimatePresence, motion } from "framer-motion";
  3 | import { Check } from "lucide-react";
  4 | import { toast } from "sonner";
  5 | 
  6 | const pricingPlans = [
  7 |   {
  8 |     name: "Basic",
  9 |     description:
 10 |       "Get started with essential feedback tools for small businesses.",
 11 |     monthlyPrice: "Free",
 12 |     link: "https://opinify.com/",
 13 |     features: [
 14 |       "Limited to 5 projects",
 15 |       "Custom feedback forms",
 16 |       "No analytics",
 17 |       "Limited feedback storage",
 18 |       "Integration with popular CRM tools",
 19 |       "Standard email support",
 20 |     ],
 21 |   },
 22 |   {
 23 |     name: "Pro",
 24 |     description:
 25 |       "Advanced features and dedicated support for growing enterprises.",
 26 |     monthlyPrice: 4999,
 27 |     link: "https://opinify.com/",
 28 |     features: [
 29 |       "Unlimited projects",
 30 |       "Everything in Basic plan",
 31 |       "Advanced analytics and reporting",
 32 |       "Unlimited feedback storage",
 33 |       "Customizable integration options",
 34 |       "Priority support and training",
 35 |     ],
 36 |   },
 37 | ];
 38 | 
 39 | const Pricing = () => {
 40 |   return (
 41 |     <section className="relative w-full overflow-hidden text-center flex flex-col justify-center py-12 text-black lg:px-2 lg:py-12">
 42 |       <div className="relative flex flex-col items-center justify-center gap-4">
 43 |         {/* <p className="text-red-100 w-fit  bg-red-600 px-2 py-1 text-xs mt-10 mx-auto rounded-full">
 44 |           Feature not implemented yet... 🥲
 45 |         </p> */}
 46 |         <div className="flex w-[80%] flex-col items-start justify-center space-y-4 md:items-center">
 47 |           <div className="mb-2 inline-block mx-auto rounded-full bg-zinc-100 px-2 py-[0.20rem] text-xs font-medium uppercase text-zinc-500 dark:bg-zinc-200">
 48 |             Pricing
 49 |           </div>
 50 |           <p className="mt-2 text-3xl font-bold tracking-tight text-gray-800 sm:text-4xl dark:text-gray-200">
 51 |             Fair pricing, unfair advantage.
 52 |           </p>
 53 |           <p className="text-md max-w-xl text-gray-700 md:text-center dark:text-gray-300">
 54 |             Get started with Opinify today and take your webite to the next
 55 |             level.
 56 |           </p>
 57 |         </div>
 58 |       </div>
 59 |       <div className="relative mt-10 mx-auto flex md:max-w-[50vw] max-w-[80vw] flex-col gap-8 lg:flex-row lg:gap-4">
 60 |         {pricingPlans.map((plan, index) => (
 61 |           <div
 62 |             key={index}
 63 |             className="w-full rounded-xl border-[1px] border-gray-300 p-6 text-left dark:border-gray-600"
 64 |           >
 65 |             <p className="mb-1 mt-0 text-sm font-medium uppercase text-zinc-200">
 66 |               {plan.name}
 67 |             </p>
 68 |             <p className="my-0 mb-6 text-sm text-gray-400">
 69 |               {plan.description}
 70 |             </p>
 71 |             <div className="mb-8 overflow-hidden">
 72 |               <AnimatePresence mode="wait">
 73 |                 <motion.p
 74 |                   key="price"
 75 |                   initial={{ y: -50, opacity: 0 }}
 76 |                   animate={{ y: 0, opacity: 1 }}
 77 |                   transition={{ type: "spring", stiffness: 100 }}
 78 |                   className="my-0 text-3xl font-semibold text-gray-900 dark:text-gray-100"
 79 |                 >
 80 |                   {plan.monthlyPrice === "Free" ? (
 81 |                     <>
 82 |                       <span>₹0</span>
 83 |                     </>
 84 |                   ) : (
 85 |                     <span>₹{plan.monthlyPrice}</span>
 86 |                   )}
 87 |                   <span className="text-sm font-medium">/month</span>
 88 |                 </motion.p>
 89 |               </AnimatePresence>
 90 |               <motion.button
 91 |                 whileTap={{ scale: 0.985 }}
 92 |                 onClick={() => {
 93 |                   toast.error("Feature not implemented yet... 🥲");
 94 |                 }}
 95 |                 className="mt-8 w-full rounded-lg bg-zinc-700 py-2 text-sm font-medium text-white hover:bg-zinc-700/90"
 96 |               >
 97 |                 {plan.monthlyPrice === "Free"
 98 |                   ? "Already Basic Member 🥳"
 99 |                   : "Buy Pro 🚀"}
100 |               </motion.button>
101 |             </div>
102 |             {plan.features.map((feature, idx) => (
103 |               <div key={idx} className="mb-3 flex items-center gap-2">
104 |                 <Check className="text-zinc-400" size={18} />
105 |                 <span className="text-sm text-gray-300">{feature}</span>
106 |               </div>
107 |             ))}
108 |           </div>
109 |         ))}
110 |       </div>
111 |     </section>
112 |   );
113 | };
114 | 
115 | export default function PricingPage() {
116 |   return <Pricing />;
117 | }
118 | 


--------------------------------------------------------------------------------
/components/ui/sheet.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as SheetPrimitive from "@radix-ui/react-dialog"
  5 | import { Cross2Icon } from "@radix-ui/react-icons"
  6 | import { cva, type VariantProps } from "class-variance-authority"
  7 | 
  8 | import { cn } from "@/lib/utils"
  9 | 
 10 | const Sheet = SheetPrimitive.Root
 11 | 
 12 | const SheetTrigger = SheetPrimitive.Trigger
 13 | 
 14 | const SheetClose = SheetPrimitive.Close
 15 | 
 16 | const SheetPortal = SheetPrimitive.Portal
 17 | 
 18 | const SheetOverlay = React.forwardRef<
 19 |   React.ElementRef<typeof SheetPrimitive.Overlay>,
 20 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
 21 | >(({ className, ...props }, ref) => (
 22 |   <SheetPrimitive.Overlay
 23 |     className={cn(
 24 |       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 25 |       className
 26 |     )}
 27 |     {...props}
 28 |     ref={ref}
 29 |   />
 30 | ))
 31 | SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 32 | 
 33 | const sheetVariants = cva(
 34 |   "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
 35 |   {
 36 |     variants: {
 37 |       side: {
 38 |         top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
 39 |         bottom:
 40 |           "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
 41 |         left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
 42 |         right:
 43 |           "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
 44 |       },
 45 |     },
 46 |     defaultVariants: {
 47 |       side: "right",
 48 |     },
 49 |   }
 50 | )
 51 | 
 52 | interface SheetContentProps
 53 |   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
 54 |     VariantProps<typeof sheetVariants> {}
 55 | 
 56 | const SheetContent = React.forwardRef<
 57 |   React.ElementRef<typeof SheetPrimitive.Content>,
 58 |   SheetContentProps
 59 | >(({ side = "right", className, children, ...props }, ref) => (
 60 |   <SheetPortal>
 61 |     <SheetOverlay />
 62 |     <SheetPrimitive.Content
 63 |       ref={ref}
 64 |       className={cn(sheetVariants({ side }), className)}
 65 |       {...props}
 66 |     >
 67 |       <SheetPrimitive.Close className="absolute right-4 top-6 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
 68 |         <Cross2Icon className="h-4 w-4" />
 69 |         <span className="sr-only">Close</span>
 70 |       </SheetPrimitive.Close>
 71 |       {children}
 72 |     </SheetPrimitive.Content>
 73 |   </SheetPortal>
 74 | ))
 75 | SheetContent.displayName = SheetPrimitive.Content.displayName
 76 | 
 77 | const SheetHeader = ({
 78 |   className,
 79 |   ...props
 80 | }: React.HTMLAttributes<HTMLDivElement>) => (
 81 |   <div
 82 |     className={cn(
 83 |       "flex flex-col space-y-2 text-center sm:text-left",
 84 |       className
 85 |     )}
 86 |     {...props}
 87 |   />
 88 | )
 89 | SheetHeader.displayName = "SheetHeader"
 90 | 
 91 | const SheetFooter = ({
 92 |   className,
 93 |   ...props
 94 | }: React.HTMLAttributes<HTMLDivElement>) => (
 95 |   <div
 96 |     className={cn(
 97 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 98 |       className
 99 |     )}
100 |     {...props}
101 |   />
102 | )
103 | SheetFooter.displayName = "SheetFooter"
104 | 
105 | const SheetTitle = React.forwardRef<
106 |   React.ElementRef<typeof SheetPrimitive.Title>,
107 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
108 | >(({ className, ...props }, ref) => (
109 |   <SheetPrimitive.Title
110 |     ref={ref}
111 |     className={cn("text-lg font-semibold text-foreground", className)}
112 |     {...props}
113 |   />
114 | ))
115 | SheetTitle.displayName = SheetPrimitive.Title.displayName
116 | 
117 | const SheetDescription = React.forwardRef<
118 |   React.ElementRef<typeof SheetPrimitive.Description>,
119 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
120 | >(({ className, ...props }, ref) => (
121 |   <SheetPrimitive.Description
122 |     ref={ref}
123 |     className={cn("text-sm text-muted-foreground", className)}
124 |     {...props}
125 |   />
126 | ))
127 | SheetDescription.displayName = SheetPrimitive.Description.displayName
128 | 
129 | export {
130 |   Sheet,
131 |   SheetPortal,
132 |   SheetOverlay,
133 |   SheetTrigger,
134 |   SheetClose,
135 |   SheetContent,
136 |   SheetHeader,
137 |   SheetFooter,
138 |   SheetTitle,
139 |   SheetDescription,
140 | }
141 | 


--------------------------------------------------------------------------------
/components/HowToUse.tsx:
--------------------------------------------------------------------------------
  1 | import Image from "next/image";
  2 | import React from "react";
  3 | import process1 from "../public/process1.png";
  4 | import process2 from "../public/process2.png";
  5 | import process3 from "../public/process3.png";
  6 | import { ArrowRight } from "lucide-react";
  7 | import { Button } from "./ui/button";
  8 | import Link from "next/link";
  9 | import HeroVideoDialog from "./ui/hero-video-dialog";
 10 | 
 11 | const HowToUse = () => {
 12 |   return (
 13 |     <>
 14 |       <div className="min-w-[90vw] md:mt-10 flex w-full flex-col items-center justify-center">
 15 |         <h1 className="mb-2 text-center w-[60vw] md:w-fit text-2xl font-light tracking-tighter text-transparent bg-clip-text bg-gradient-to-br from-white to-gray-400 md:text-3xl ">
 16 |           How to Use Opinify?
 17 |         </h1>
 18 |         <p className="max-w-md text-center mb-4 text-sm text-gray-400 dark:text-gray-400">
 19 |           Click on the video below to know how to use Opinify.
 20 |         </p>
 21 |         <div className=" aspect-video p-4 rounded-lg md:w-[60vw] w-[80vw]">
 22 |           <HeroVideoDialog
 23 |             className=""
 24 |             animationStyle="top-in-bottom-out"
 25 |             videoSrc="https://www.youtube.com/embed/xF6oBcf18Hs?si=ZdVx1J_lmQmpym2q"
 26 |             thumbnailSrc="https://utfs.io/f/ZeS8ew97fvPDdqm7OoJIVfagUN25oEvtDLj9xFGmbKHS6rZc"
 27 |             thumbnailAlt="How To Use Opinify - Tutorial"
 28 |           />
 29 |         </div>
 30 |       </div>
 31 |     </>
 32 |   );
 33 | };
 34 | 
 35 | export default HowToUse;
 36 | 
 37 | // Previous Code:
 38 | 
 39 | {
 40 |   /* <div>
 41 |         <div className="min-w-[90vw] mt-10 flex w-full flex-col items-center justify-center">
 42 |           <h1 className="mb-2 text-center w-[60vw] md:w-fit text-2xl font-light tracking-tighter text-transparent bg-clip-text bg-gradient-to-br from-white to-gray-400 md:text-3xl ">
 43 |             How to Use Opinify?
 44 |           </h1>
 45 |           <p className="max-w-md text-center text-sm text-gray-400 dark:text-gray-400">
 46 |             For video tutorial{" "}
 47 |             <Link
 48 |               className="text-slate-200 font-semibold hover:underline"
 49 |               target="_blank"
 50 |               href={"https://youtu.be/xF6oBcf18Hs"}
 51 |             >
 52 |               Click Here ▶️
 53 |             </Link>
 54 |           </p>
 55 |           <div className="md:flex md:flex-row flex flex-col m-auto md:gap-x-10 mt-6">
 56 |             <div className="flex flex-col justify-center items-center">
 57 |               <div className="max-w-md font-semibold text-center text-lg text-gray-400 dark:text-gray-100">
 58 |                 Process 1
 59 |               </div>
 60 |               <div className="max-w-md text-center text-xs text-gray-300 dark:text-gray-300 mb-4">
 61 |                 Enter Website details
 62 |               </div>
 63 |               <Image
 64 |                 className="rounded-md p-2 md:hover:scale-105 duration-150"
 65 |                 src={process1}
 66 |                 width={300}
 67 |                 height={300}
 68 |                 alt="image"
 69 |               />
 70 |             </div>
 71 |             <ArrowRight className="md:m-auto md:rotate-0 text-slate-200 rounded-full border p-1 border-white rotate-90 my-4 mx-auto" />
 72 |             <div>
 73 |               <div className="max-w-md font-semibold text-center text-lg text-gray-400 dark:text-gray-100">
 74 |                 Process 2
 75 |               </div>
 76 |               <div className="max-w-md text-center text-xs text-gray-300 dark:text-gray-300 mb-4">
 77 |                 Create Project
 78 |               </div>
 79 |               <Image
 80 |                 className="rounded-md p-2 md:mt-20 mx-auto md:hover:scale-105 duration-150"
 81 |                 src={process2}
 82 |                 width={120}
 83 |                 height={120}
 84 |                 alt="image"
 85 |               />
 86 |             </div>
 87 |             <ArrowRight className="md:m-auto md:rotate-0 text-slate-200 rounded-full border p-1 border-white rotate-90 my-4 mx-auto" />
 88 |             <div>
 89 |               <div className="max-w-md font-semibold text-center text-lg text-gray-400 dark:text-gray-100">
 90 |                 Process 3
 91 |               </div>
 92 |               <div className="max-w-md text-center text-xs text-gray-300 dark:text-gray-300 mb-4">
 93 |                 Embed Code
 94 |               </div>
 95 |               <Image
 96 |                 className="rounded-md hidden md:block p-2 md:hover:scale-105 duration-150"
 97 |                 src={process3}
 98 |                 width={350}
 99 |                 height={350}
100 |                 alt="image"
101 |               />
102 |               <Image
103 |                 className="rounded-md md:hidden p-2 md:hover:scale-105 duration-150"
104 |                 src={process3}
105 |                 width={300}
106 |                 height={300}
107 |                 alt="image"
108 |               />
109 |             </div>
110 |           </div>
111 |         </div>
112 |       </div> */
113 | }
114 | 


--------------------------------------------------------------------------------
/components/AuthButtons.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import React, { useEffect, useState } from "react";
  3 | import { Button } from "./ui/button";
  4 | import { signIn, signOut, useSession } from "next-auth/react";
  5 | import CreateProject from "./CreateProject";
  6 | import Link from "next/link";
  7 | import { RainbowButton } from "./ui/rainbow-button";
  8 | import { GithubIcon } from "lucide-react";
  9 | 
 10 | const AuthButtons = () => {
 11 |   const { data, status } = useSession();
 12 |   const [fetching, setFetching] = useState(true);
 13 |   const [stars, setStars] = useState(0);
 14 | 
 15 |   useEffect(() => {
 16 |     if (status !== "loading") {
 17 |       setFetching(false);
 18 |     }
 19 |   }, [status]);
 20 | 
 21 |   useEffect(() => {
 22 |     function fetchStars() {
 23 |       fetch("https://api.github.com/repos/avayyyyyyy/opinify")
 24 |         .then((res) => res.json())
 25 |         .then((data) => {
 26 |           console.log(data);
 27 |           setStars(data.stargazers_count);
 28 |         });
 29 |     }
 30 |     fetchStars();
 31 | 
 32 |     return () => {
 33 |       setStars(0);
 34 |     };
 35 |   }, []);
 36 | 
 37 |   if (fetching) {
 38 |     return (
 39 |       <Button
 40 |         variant={"ghost"}
 41 |         className="text-sm animate-pulse md:block hidden"
 42 |       >
 43 |         loading...
 44 |       </Button>
 45 |     );
 46 |   }
 47 | 
 48 |   return (
 49 |     <>
 50 |       {data?.user?.email ? (
 51 |         <div className="flex gap-3 md:items-center md:flex-row flex-col text-start">
 52 |           <Button className="w-full hidden md:block" asChild variant="outline">
 53 |             <Link href={"/dashboard"}>Dashboard</Link>
 54 |           </Button>
 55 |           <div className="my-auto mt-2 md:mt-0">
 56 |             <CreateProject />
 57 |           </div>
 58 |           <Button
 59 |             className="w-full hidden md:block"
 60 |             onClick={() => signOut()}
 61 |             variant="destructive"
 62 |           >
 63 |             Sign out
 64 |           </Button>
 65 |         </div>
 66 |       ) : (
 67 |         <div className="hidden md:flex items-center gap-2">
 68 |           <Button onClick={() => signIn("google")} variant="secondary">
 69 |             Sign in
 70 |           </Button>
 71 |           <Link href="https://github.com/avayyyyyyy/opinify">
 72 |             <RainbowButton>
 73 |               <div className="flex items-center justify-center">
 74 |                 <GithubIcon size={16} className="mr-1" />
 75 |                 Stars on gihtub{" "}
 76 |                 <span className="font-semibold ml-1">🌟 {stars}</span>
 77 |               </div>
 78 |             </RainbowButton>
 79 |           </Link>
 80 |         </div>
 81 |       )}
 82 |     </>
 83 |   );
 84 | };
 85 | 
 86 | export default AuthButtons;
 87 | 
 88 | export const MobileSheetButtonsWithAuth = () => {
 89 |   const [stars, setStars] = useState(0);
 90 | 
 91 |   useEffect(() => {
 92 |     function fetchStars() {
 93 |       fetch("https://api.github.com/repos/avayyyyyyy/opinify")
 94 |         .then((res) => res.json())
 95 |         .then((data) => {
 96 |           console.log(data);
 97 |           setStars(data.stargazers_count);
 98 |         });
 99 |     }
100 |     fetchStars();
101 | 
102 |     return () => {
103 |       setStars(0);
104 |     };
105 |   }, []);
106 | 
107 |   return (
108 |     <div className="flex gap-3 md:items-center md:flex-row flex-col text-start">
109 |       {/* <div className="">
110 |         <CreateProject />
111 |       </div> */}
112 |       <Button
113 |         className="w-full"
114 |         onClick={() => signOut()}
115 |         variant="destructive"
116 |       >
117 |         Sign out
118 |       </Button>
119 |       <Link href="https://github.com/avayyyyyyy/opinify">
120 |         <RainbowButton>
121 |           <div className="flex items-center justify-center ">
122 |             <GithubIcon size={16} className="mr-1" />
123 |             Stars on gihtub{" "}
124 |             <span className="font-semibold ml-1">🌟 {stars}</span>
125 |           </div>
126 |         </RainbowButton>
127 |       </Link>
128 |     </div>
129 |   );
130 | };
131 | 
132 | export const MobileSheetButtonsWithoutAuth = () => {
133 |   const [stars, setStars] = useState(0);
134 | 
135 |   useEffect(() => {
136 |     function fetchStars() {
137 |       fetch("https://api.github.com/repos/avayyyyyyy/opinify")
138 |         .then((res) => res.json())
139 |         .then((data) => {
140 |           setStars(data.stargazers_count);
141 |         });
142 |     }
143 |     fetchStars();
144 | 
145 |     return () => {
146 |       setStars(0);
147 |     };
148 |   }, []);
149 | 
150 |   return (
151 |     <div className="flex flex-col gap-2">
152 |       <Button onClick={() => signIn("google")} variant="secondary">
153 |         Sign in
154 |       </Button>
155 |       <Link href="https://github.com/avayyyyyyy/opinify">
156 |         <RainbowButton>
157 |           <div className="flex items-center justify-center w-full">
158 |             <GithubIcon size={16} className="mr-1" />
159 |             Stars on gihtub{" "}
160 |             <span className="font-semibold ml-1">🌟 {stars}</span>
161 |           </div>
162 |         </RainbowButton>
163 |       </Link>
164 |     </div>
165 |   );
166 | };
167 | 


--------------------------------------------------------------------------------
/components/ui/hero-video-dialog.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useState } from "react";
  4 | import { AnimatePresence, motion } from "framer-motion";
  5 | import { Play, XIcon } from "lucide-react";
  6 | 
  7 | import { cn } from "@/lib/utils";
  8 | 
  9 | type AnimationStyle =
 10 |   | "from-bottom"
 11 |   | "from-center"
 12 |   | "from-top"
 13 |   | "from-left"
 14 |   | "from-right"
 15 |   | "fade"
 16 |   | "top-in-bottom-out"
 17 |   | "left-in-right-out";
 18 | 
 19 | interface HeroVideoProps {
 20 |   animationStyle?: AnimationStyle;
 21 |   videoSrc: string;
 22 |   thumbnailSrc: string;
 23 |   thumbnailAlt?: string;
 24 |   className?: string;
 25 | }
 26 | 
 27 | const animationVariants = {
 28 |   "from-bottom": {
 29 |     initial: { y: "100%", opacity: 0 },
 30 |     animate: { y: 0, opacity: 1 },
 31 |     exit: { y: "100%", opacity: 0 },
 32 |   },
 33 |   "from-center": {
 34 |     initial: { scale: 0.5, opacity: 0 },
 35 |     animate: { scale: 1, opacity: 1 },
 36 |     exit: { scale: 0.5, opacity: 0 },
 37 |   },
 38 |   "from-top": {
 39 |     initial: { y: "-100%", opacity: 0 },
 40 |     animate: { y: 0, opacity: 1 },
 41 |     exit: { y: "-100%", opacity: 0 },
 42 |   },
 43 |   "from-left": {
 44 |     initial: { x: "-100%", opacity: 0 },
 45 |     animate: { x: 0, opacity: 1 },
 46 |     exit: { x: "-100%", opacity: 0 },
 47 |   },
 48 |   "from-right": {
 49 |     initial: { x: "100%", opacity: 0 },
 50 |     animate: { x: 0, opacity: 1 },
 51 |     exit: { x: "100%", opacity: 0 },
 52 |   },
 53 |   fade: {
 54 |     initial: { opacity: 0 },
 55 |     animate: { opacity: 1 },
 56 |     exit: { opacity: 0 },
 57 |   },
 58 |   "top-in-bottom-out": {
 59 |     initial: { y: "-100%", opacity: 0 },
 60 |     animate: { y: 0, opacity: 1 },
 61 |     exit: { y: "100%", opacity: 0 },
 62 |   },
 63 |   "left-in-right-out": {
 64 |     initial: { x: "-100%", opacity: 0 },
 65 |     animate: { x: 0, opacity: 1 },
 66 |     exit: { x: "100%", opacity: 0 },
 67 |   },
 68 | };
 69 | 
 70 | export default function HeroVideoDialog({
 71 |   animationStyle = "from-center",
 72 |   videoSrc,
 73 |   thumbnailSrc,
 74 |   thumbnailAlt = "Video thumbnail",
 75 |   className,
 76 | }: HeroVideoProps) {
 77 |   const [isVideoOpen, setIsVideoOpen] = useState(false);
 78 |   const selectedAnimation = animationVariants[animationStyle];
 79 | 
 80 |   return (
 81 |     <div className={cn("relative", className)}>
 82 |       <div
 83 |         className="relative cursor-pointer group"
 84 |         onClick={() => setIsVideoOpen(true)}
 85 |       >
 86 |         <img
 87 |           src={thumbnailSrc}
 88 |           alt={thumbnailAlt}
 89 |           width={1920}
 90 |           height={1080}
 91 |           className="w-full transition-all duration-200 group-hover:brightness-[0.8] ease-out rounded-md shadow-lg border"
 92 |         />
 93 |         <div className="absolute inset-0 flex items-center justify-center group-hover:scale-100 scale-[0.9] transition-all duration-200 ease-out rounded-2xl">
 94 |           <div className="bg-primary/10 flex items-center justify-center rounded-full backdrop-blur-md size-28">
 95 |             <div
 96 |               className={`flex items-center justify-center bg-gradient-to-b from-primary/30 to-primary shadow-md rounded-full size-20 transition-all ease-out duration-200 relative group-hover:scale-[1.2] scale-100`}
 97 |             >
 98 |               <Play
 99 |                 className="size-8 text-white fill-white group-hover:scale-105 scale-100 transition-transform duration-200 ease-out"
100 |                 style={{
101 |                   filter:
102 |                     "drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06))",
103 |                 }}
104 |               />
105 |             </div>
106 |           </div>
107 |         </div>
108 |       </div>
109 |       <AnimatePresence>
110 |         {isVideoOpen && (
111 |           <motion.div
112 |             initial={{ opacity: 0 }}
113 |             animate={{ opacity: 1 }}
114 |             onClick={() => setIsVideoOpen(false)}
115 |             exit={{ opacity: 0 }}
116 |             className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-md"
117 |           >
118 |             <motion.div
119 |               {...selectedAnimation}
120 |               transition={{ type: "spring", damping: 30, stiffness: 300 }}
121 |               className="relative w-full max-w-4xl aspect-video mx-4 md:mx-0"
122 |             >
123 |               <motion.button className="absolute -top-16 right-0 text-white text-xl bg-neutral-900/50 ring-1 backdrop-blur-md rounded-full p-2 dark:bg-neutral-100/50 dark:text-black">
124 |                 <XIcon className="size-5" />
125 |               </motion.button>
126 |               <div className="size-full border-2 border-white/30 rounded-md overflow-hidden isolate z-[1] relative">
127 |                 <iframe
128 |                   src={videoSrc}
129 |                   className="size-full rounded-md"
130 |                   allowFullScreen
131 |                   allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
132 |                 ></iframe>
133 |               </div>
134 |             </motion.div>
135 |           </motion.div>
136 |         )}
137 |       </AnimatePresence>
138 |     </div>
139 |   );
140 | }
141 | 


--------------------------------------------------------------------------------
/components/Sidebar.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   ChartArea,
  3 |   CircleHelp,
  4 |   FileSignature,
  5 |   Info,
  6 |   ReceiptIndianRupee,
  7 | } from "lucide-react";
  8 | import Link from "next/link";
  9 | import React from "react";
 10 | import { Progress } from "@/components/ui/progress";
 11 | import { Card, CardContent } from "./ui/card";
 12 | import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
 13 | import { auth } from "@/lib/auth";
 14 | import prisma from "@/lib/db";
 15 | import { redirect } from "next/navigation";
 16 | 
 17 | const Sidebar = async () => {
 18 |   const user = await auth();
 19 | 
 20 |   const findUser = await prisma.user.findUnique({
 21 |     where: {
 22 |       email: user?.user?.email!,
 23 |     },
 24 |   });
 25 | 
 26 |   if (!user) {
 27 |     return redirect("/");
 28 |   }
 29 | 
 30 |   const projects = await prisma.project.findMany({
 31 |     where: {
 32 |       userId: findUser?.id,
 33 |     },
 34 |   });
 35 | 
 36 |   const progressLimit = (projects?.length * 100) / 5;
 37 | 
 38 |   // console.log(progressLimit);
 39 | 
 40 |   return (
 41 |     <div>
 42 |       <aside className="md:flex hidden overflow-x-hidden flex-col w-64 h-full px-5 pt-3 overflow-y-auto bg-white border-r rtl:border-r-0 rtl:border-l dark:bg-black dark:border-balck">
 43 |         <div className="flex flex-col pb-8 justify-between flex-1">
 44 |           <nav className="-mx-3 space-y-6 ">
 45 |             <div className="space-y-3 ">
 46 |               <label className="px-3 flex gap-1 items-center text-xs text-black uppercase dark:text-white/50">
 47 |                 Features <FileSignature size={12} />
 48 |               </label>
 49 |               <hr />
 50 | 
 51 |               <Link
 52 |                 className="flex items-center px-3 py-2 text-black transition-colors duration-300 transform rounded-lg dark:text-white/80 hover:bg-balck dark:hover:bg-balck  dark:hover:bg-gray-50/10 hover:text-white/50"
 53 |                 href="/dashboard"
 54 |               >
 55 |                 <ChartArea size={16} />
 56 | 
 57 |                 <span className="mx-2 text-sm font-medium">Dashboard</span>
 58 |               </Link>
 59 |               <Link
 60 |                 className="flex items-center px-3 py-2 text-black transition-colors duration-300 transform rounded-lg dark:text-white/80 hover:bg-balck dark:hover:bg-balck  dark:hover:bg-gray-50/10 hover:text-white/50"
 61 |                 href="/dashboard/pricing"
 62 |               >
 63 |                 <ReceiptIndianRupee size={16} />
 64 | 
 65 |                 <span className="mx-2 text-sm font-medium">Pricing</span>
 66 |               </Link>
 67 |               <Link
 68 |                 className="flex items-center px-3 py-2 text-black transition-colors duration-300 transform rounded-lg dark:text-white/80 hover:bg-balck dark:hover:bg-balck  dark:hover:bg-gray-50/10 hover:text-white/50"
 69 |                 href="/about"
 70 |               >
 71 |                 <Info size={16} />
 72 | 
 73 |                 <span className="mx-2 text-sm font-medium">About</span>
 74 |               </Link>
 75 |               {/* <Link
 76 |                 className="flex items-center px-3 py-2 text-black transition-colors duration-300 transform rounded-lg dark:text-white/80 hover:bg-balck dark:hover:bg-balck  dark:hover:bg-gray-50/10 hover:text-white/50"
 77 |                 href="/dashboard/steps"
 78 |               >
 79 |                 <CircleHelp size={16} />
 80 |                 <span className="mx-2 text-sm font-medium">How to use?</span>
 81 |               </Link> */}
 82 |             </div>
 83 |           </nav>
 84 |           <div>
 85 |             <div className="py-2">
 86 |               <div className="flex justify-between">
 87 |                 {" "}
 88 |                 <label className="flex gap-1 py-2 items-center text-xs text-black uppercase dark:text-white/50">
 89 |                   Project Limit
 90 |                 </label>
 91 |                 <label className="flex gap-1 py-2 items-center text-xs text-black uppercase dark:text-white/50">
 92 |                   {projects?.length} / 5
 93 |                 </label>
 94 |               </div>
 95 |               <hr />
 96 |               <Progress className="mb-2" value={progressLimit} />
 97 |             </div>
 98 |             <div>
 99 |               <Card className="w-full max-w-sm bg-card rounded-lg">
100 |                 <CardContent className="p-3 grid gap-4">
101 |                   <div className="flex items-center gap-4">
102 |                     <Avatar className="h-6 w-6">
103 |                       <AvatarImage
104 |                         src={user?.user?.image ?? ""}
105 |                         alt="userImage"
106 |                       />
107 |                       <AvatarFallback>{user?.user?.name?.[0]}</AvatarFallback>
108 |                     </Avatar>
109 |                     <div className="grid gap-1">
110 |                       <div className="font-semibold text-sm">
111 |                         {user?.user?.name?.length! > 18
112 |                           ? `${user?.user?.name?.slice(0, 18)}...`
113 |                           : user?.user?.name}
114 |                       </div>
115 |                       <div className="text-muted-foreground text-xs">
116 |                         {user?.user?.email?.length! > 18
117 |                           ? `${user?.user?.email?.slice(0, 18)}...`
118 |                           : user?.user?.email}
119 |                       </div>
120 |                     </div>
121 |                   </div>
122 |                 </CardContent>
123 |               </Card>
124 |             </div>
125 |           </div>
126 |         </div>
127 |       </aside>
128 |     </div>
129 |   );
130 | };
131 | 
132 | export default Sidebar;
133 | 


--------------------------------------------------------------------------------
/app/privacy/page.tsx:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { Metadata } from "next";
  3 | import Link from "next/link";
  4 | 
  5 | export const metadata: Metadata = {
  6 |   title: "Privacy Policy",
  7 | };
  8 | 
  9 | const PrivacyPolicy = () => {
 10 |   return (
 11 |     <div>
 12 |       <section className="py-12 px-4 bg-black sm:py-16 lg:py-20">
 13 |         <div className="px-4 mx-auto max-w-7xl sm:px-10 lg:px-8">
 14 |           <div className="max-w-3xl mx-auto xl:max-w-4xl">
 15 |             <p className="text-sm font-bold tracking-widest text-gray-400 uppercase">
 16 |               Privacy Policy
 17 |             </p>
 18 | 
 19 |             <h1 className="text-3xl font-bold text-white mt-7 sm:text-4xl xl:text-5xl">
 20 |               Privacy Policy of Opinify.in
 21 |             </h1>
 22 |             <p className="text-sm font-normal text-gray-400 mt-7">
 23 |               Effective Date:{" "}
 24 |               {new Date().toLocaleString("default", { month: "long" })},{" "}
 25 |               {new Date().getFullYear()}
 26 |             </p>
 27 | 
 28 |             <div className="mt-10">
 29 |               <p className="text-base font-normal leading-7 text-gray-300">
 30 |                 At Opinify.in, we prioritize the privacy and security of our
 31 |                 user&apos;s data. This Privacy Policy outlines how we collect,
 32 |                 use, and safeguard your personal information when you use our
 33 |                 platform.
 34 |               </p>
 35 | 
 36 |               <h2 className="mt-12 text-3xl font-bold text-white">
 37 |                 Information We Collect
 38 |               </h2>
 39 |               <p className="mt-6 text-base font-normal leading-7 text-gray-300">
 40 |                 When you interact with Opinify.in, we may collect various types
 41 |                 of information:
 42 |               </p>
 43 |               <ul className="pl-5 mt-6 space-y-1 text-base font-normal leading-7 text-gray-300 list-disc">
 44 |                 <li>
 45 |                   <span className="font-bold text-white">
 46 |                     Personal Information:
 47 |                   </span>{" "}
 48 |                   Information like your name, email address, and contact details
 49 |                   when you register or contact us.
 50 |                 </li>
 51 |                 <li>
 52 |                   <span className="font-bold text-white">Usage Data:</span>{" "}
 53 |                   Information related to how you interact with our platform,
 54 |                   including pages visited and actions taken.
 55 |                 </li>
 56 |                 <li>
 57 |                   <span className="font-bold text-white">Cookies:</span> We use
 58 |                   cookies to enhance user experience, track usage, and store
 59 |                   preferences.
 60 |                 </li>
 61 |               </ul>
 62 | 
 63 |               <h2 className="mt-12 text-3xl font-bold text-white">
 64 |                 How We Use Your Information
 65 |               </h2>
 66 |               <p className="mt-6 text-base font-normal leading-7 text-gray-300">
 67 |                 The data we collect is used for the following purposes:
 68 |               </p>
 69 |               <ul className="pl-5 mt-6 space-y-1 text-base font-normal leading-7 text-gray-300 list-disc">
 70 |                 <li>
 71 |                   To improve our services and ensure a better user experience.
 72 |                 </li>
 73 |                 <li>To respond to your queries or support requests.</li>
 74 |                 <li>
 75 |                   To send important updates or promotional content (you can
 76 |                   opt-out anytime).
 77 |                 </li>
 78 |               </ul>
 79 | 
 80 |               <h2 className="mt-12 text-3xl font-bold text-white">
 81 |                 Data Security
 82 |               </h2>
 83 |               <p className="mt-6 text-base font-normal leading-7 text-gray-300">
 84 |                 We implement a range of security measures to protect your
 85 |                 personal information from unauthorized access, alteration, or
 86 |                 disclosure.
 87 |               </p>
 88 | 
 89 |               <h2 className="mt-12 text-3xl font-bold text-white">
 90 |                 Your Rights
 91 |               </h2>
 92 |               <p className="mt-6 text-base font-normal leading-7 text-gray-300">
 93 |                 You have the right to access, modify, or delete your personal
 94 |                 information at any time. If you wish to exercise these rights,
 95 |                 please contact us at jabhi465@gmail.com.
 96 |               </p>
 97 | 
 98 |               <blockquote className="pl-5 mt-8 border-l-2 border-white">
 99 |                 <p className="text-lg italic font-medium text-white">
100 |                   We are committed to ensuring your privacy and security. For
101 |                   any questions or concerns regarding this Privacy Policy,
102 |                   please don’t hesitate to reach out.
103 |                 </p>
104 |               </blockquote>
105 | 
106 |               <h2 className="mt-16 text-3xl font-bold text-white">
107 |                 Contact Us
108 |               </h2>
109 |               <p className="mt-6 text-base font-normal leading-7 text-gray-300">
110 |                 If you have any questions about our Privacy Policy or practices,
111 |                 feel free to{" "}
112 |                 <Link
113 |                   className="hover:underline text-white"
114 |                   href={"mailto:jabhi465@gmail.com"}
115 |                 >
116 |                   contact us
117 |                 </Link>
118 |                 . We&apos;re always here to help and ensure your privacy is
119 |                 protected.
120 |               </p>
121 |             </div>
122 |           </div>
123 |         </div>
124 |       </section>
125 |     </div>
126 |   );
127 | };
128 | 
129 | export default PrivacyPolicy;
130 | 


--------------------------------------------------------------------------------
/components/ui/select.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import {
  5 |   CaretSortIcon,
  6 |   CheckIcon,
  7 |   ChevronDownIcon,
  8 |   ChevronUpIcon,
  9 | } from "@radix-ui/react-icons"
 10 | import * as SelectPrimitive from "@radix-ui/react-select"
 11 | 
 12 | import { cn } from "@/lib/utils"
 13 | 
 14 | const Select = SelectPrimitive.Root
 15 | 
 16 | const SelectGroup = SelectPrimitive.Group
 17 | 
 18 | const SelectValue = SelectPrimitive.Value
 19 | 
 20 | const SelectTrigger = React.forwardRef<
 21 |   React.ElementRef<typeof SelectPrimitive.Trigger>,
 22 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 23 | >(({ className, children, ...props }, ref) => (
 24 |   <SelectPrimitive.Trigger
 25 |     ref={ref}
 26 |     className={cn(
 27 |       "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
 28 |       className
 29 |     )}
 30 |     {...props}
 31 |   >
 32 |     {children}
 33 |     <SelectPrimitive.Icon asChild>
 34 |       <CaretSortIcon className="h-4 w-4 opacity-50" />
 35 |     </SelectPrimitive.Icon>
 36 |   </SelectPrimitive.Trigger>
 37 | ))
 38 | SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 39 | 
 40 | const SelectScrollUpButton = React.forwardRef<
 41 |   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
 42 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
 43 | >(({ className, ...props }, ref) => (
 44 |   <SelectPrimitive.ScrollUpButton
 45 |     ref={ref}
 46 |     className={cn(
 47 |       "flex cursor-default items-center justify-center py-1",
 48 |       className
 49 |     )}
 50 |     {...props}
 51 |   >
 52 |     <ChevronUpIcon />
 53 |   </SelectPrimitive.ScrollUpButton>
 54 | ))
 55 | SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
 56 | 
 57 | const SelectScrollDownButton = React.forwardRef<
 58 |   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
 59 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
 60 | >(({ className, ...props }, ref) => (
 61 |   <SelectPrimitive.ScrollDownButton
 62 |     ref={ref}
 63 |     className={cn(
 64 |       "flex cursor-default items-center justify-center py-1",
 65 |       className
 66 |     )}
 67 |     {...props}
 68 |   >
 69 |     <ChevronDownIcon />
 70 |   </SelectPrimitive.ScrollDownButton>
 71 | ))
 72 | SelectScrollDownButton.displayName =
 73 |   SelectPrimitive.ScrollDownButton.displayName
 74 | 
 75 | const SelectContent = React.forwardRef<
 76 |   React.ElementRef<typeof SelectPrimitive.Content>,
 77 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 78 | >(({ className, children, position = "popper", ...props }, ref) => (
 79 |   <SelectPrimitive.Portal>
 80 |     <SelectPrimitive.Content
 81 |       ref={ref}
 82 |       className={cn(
 83 |         "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 84 |         position === "popper" &&
 85 |           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 86 |         className
 87 |       )}
 88 |       position={position}
 89 |       {...props}
 90 |     >
 91 |       <SelectScrollUpButton />
 92 |       <SelectPrimitive.Viewport
 93 |         className={cn(
 94 |           "p-1",
 95 |           position === "popper" &&
 96 |             "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
 97 |         )}
 98 |       >
 99 |         {children}
100 |       </SelectPrimitive.Viewport>
101 |       <SelectScrollDownButton />
102 |     </SelectPrimitive.Content>
103 |   </SelectPrimitive.Portal>
104 | ))
105 | SelectContent.displayName = SelectPrimitive.Content.displayName
106 | 
107 | const SelectLabel = React.forwardRef<
108 |   React.ElementRef<typeof SelectPrimitive.Label>,
109 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
110 | >(({ className, ...props }, ref) => (
111 |   <SelectPrimitive.Label
112 |     ref={ref}
113 |     className={cn("px-2 py-1.5 text-sm font-semibold", className)}
114 |     {...props}
115 |   />
116 | ))
117 | SelectLabel.displayName = SelectPrimitive.Label.displayName
118 | 
119 | const SelectItem = React.forwardRef<
120 |   React.ElementRef<typeof SelectPrimitive.Item>,
121 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
122 | >(({ className, children, ...props }, ref) => (
123 |   <SelectPrimitive.Item
124 |     ref={ref}
125 |     className={cn(
126 |       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
127 |       className
128 |     )}
129 |     {...props}
130 |   >
131 |     <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
132 |       <SelectPrimitive.ItemIndicator>
133 |         <CheckIcon className="h-4 w-4" />
134 |       </SelectPrimitive.ItemIndicator>
135 |     </span>
136 |     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
137 |   </SelectPrimitive.Item>
138 | ))
139 | SelectItem.displayName = SelectPrimitive.Item.displayName
140 | 
141 | const SelectSeparator = React.forwardRef<
142 |   React.ElementRef<typeof SelectPrimitive.Separator>,
143 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
144 | >(({ className, ...props }, ref) => (
145 |   <SelectPrimitive.Separator
146 |     ref={ref}
147 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
148 |     {...props}
149 |   />
150 | ))
151 | SelectSeparator.displayName = SelectPrimitive.Separator.displayName
152 | 
153 | export {
154 |   Select,
155 |   SelectGroup,
156 |   SelectValue,
157 |   SelectTrigger,
158 |   SelectContent,
159 |   SelectLabel,
160 |   SelectItem,
161 |   SelectSeparator,
162 |   SelectScrollUpButton,
163 |   SelectScrollDownButton,
164 | }
165 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
  1 | import Accordian from "@/components/Accordian";
  2 | import FeatureSections from "@/components/FeaturesSection";
  3 | import GetStartedButton from "@/components/GetStartedButton";
  4 | import HomeAvatars from "@/components/HomeAvatars";
  5 | import HowToUse from "@/components/HowToUse";
  6 | import BlurFade from "@/components/magicui/blur-fade";
  7 | import { BorderBeam } from "@/components/magicui/border-beam";
  8 | import Particles from "@/components/magicui/particles";
  9 | import TechStack from "@/components/TechStack";
 10 | import { auth } from "@/lib/auth";
 11 | import Image from "next/image";
 12 | import Link from "next/link";
 13 | import { redirect } from "next/navigation";
 14 | 
 15 | export default async function Home() {
 16 |   let time = 0.25;
 17 | 
 18 |   const data = await auth();
 19 | 
 20 |   if (data?.user?.email) {
 21 |     redirect("/dashboard");
 22 |   }
 23 | 
 24 |   return (
 25 |     <>
 26 |       <main className="flex z-10 flex-col bg-black items-center mx-auto md:p-24 px-24 py-10 md:py-4">
 27 |         <Particles
 28 |           className="absolute inset-0"
 29 |           quantity={100}
 30 |           ease={80}
 31 |           color={"#ffffff"}
 32 |           refresh
 33 |         />
 34 |         <BlurFade
 35 |           delay={time * 0.5}
 36 |           inView
 37 |           className="flex items-center justify-center m-auto"
 38 |         >
 39 |           <Link
 40 |             href={
 41 |               "https://peerlist.io/avayyyyyyy/project/opinify--feedback-collection-saas"
 42 |             }
 43 |           >
 44 |             <Image
 45 |               src={"/peerlist.png"}
 46 |               width={150}
 47 |               height={150}
 48 |               alt="peerlist"
 49 |               className="w-28 h-28 md:h-40 md:w-40"
 50 |             />
 51 |           </Link>
 52 |         </BlurFade>
 53 |         <BlurFade
 54 |           delay={time * 1}
 55 |           inView
 56 |           className="flex items-center justify-center"
 57 |         >
 58 |           <div className="lg:text-6xl md:w-[70vw] text-2xl text-center md:text-5xl w-[80vw] shrink-0 text-white mb-8 ">
 59 |             Your Go-To Platform for Instant Feedbacks{" "}
 60 |             <span className="text-black">🚀</span>
 61 |           </div>
 62 |         </BlurFade>
 63 |         <BlurFade
 64 |           delay={time * 2}
 65 |           inView
 66 |           className="flex items-center justify-center"
 67 |         >
 68 |           <p className="md:text-base md:w-[40vw] text-xs font-light text-center text-white mb-8">
 69 |             Effortlessly embed feedback forms on your website and access
 70 |             detailed, real time insights through our{" "}
 71 |             <span className="font-bold">Opinify dashboard</span>.
 72 |           </p>
 73 |         </BlurFade>
 74 |         <BlurFade
 75 |           delay={time * 3}
 76 |           inView
 77 |           className="flex items-center justify-center"
 78 |         >
 79 |           <GetStartedButton />
 80 |           {/* <HomeForm /> */}
 81 |         </BlurFade>
 82 |         <BlurFade
 83 |           delay={time * 4}
 84 |           inView
 85 |           className=" items-center justify-center flex mb-2"
 86 |         >
 87 |           <HomeAvatars />
 88 |         </BlurFade>
 89 |         <BlurFade
 90 |           delay={time * 5}
 91 |           inView
 92 |           className=" items-center justify-center hidden md:flex"
 93 |         >
 94 |           <div className="relative flex md:max-w-6xl justify-center overflow-hidden">
 95 |             <Image
 96 |               src="https://utfs.io/f/eaab3c99-701a-4c0c-b2e9-c7c88901dad2-6ie4x0.png"
 97 |               alt="hero-section"
 98 |               width={1400}
 99 |               height={1400}
100 |               className="h-full rounded-xl object-cover w-[1600px]"
101 |               style={{
102 |                 maskImage: `linear-gradient(to top, transparent, black 20%)`,
103 |               }}
104 |             />
105 |             <BorderBeam
106 |               className="rounded-md"
107 |               size={250}
108 |               duration={12}
109 |               delay={9}
110 |             />
111 |           </div>
112 |         </BlurFade>
113 | 
114 |         <BlurFade
115 |           delay={time * 5}
116 |           inView
117 |           className="flex md:hidden items-center justify-center w-[90vw]"
118 |         >
119 |           <Image
120 |             src="https://utfs.io/f/eaab3c99-701a-4c0c-b2e9-c7c88901dad2-6ie4x0.png"
121 |             alt="hero-section"
122 |             width={1400}
123 |             height={1400}
124 |             className="h-full rounded-xl object-cover"
125 |             style={{
126 |               maskImage: `linear-gradient(to top, transparent, black 20%)`,
127 |             }}
128 |           />
129 |           <BorderBeam
130 |             className="rounded-md"
131 |             size={150}
132 |             duration={12}
133 |             delay={9}
134 |           />
135 |         </BlurFade>
136 |         {/* <BlurFade
137 |           delay={time * 1}
138 |           inView
139 |           className=""
140 |         >
141 |           <TechStack />
142 |         </BlurFade> */}
143 |         <BlurFade
144 |           delay={time * 6}
145 |           inView
146 |           className="flex md:hidden items-center justify-center"
147 |         >
148 |           <FeatureSections />
149 |         </BlurFade>
150 |         <BlurFade
151 |           delay={time * 1}
152 |           inView
153 |           className="md:flex hidden  items-center justify-center"
154 |         >
155 |           <FeatureSections />
156 |         </BlurFade>
157 |         <BlurFade delay={time * 1} inView className="flex justify-between">
158 |           <HowToUse />
159 |         </BlurFade>
160 |         <BlurFade
161 |           delay={time * 1}
162 |           inView
163 |           className="flex justify-center md:mb-10 mb-5"
164 |         >
165 |           <Accordian />
166 |         </BlurFade>
167 |         <BlurFade
168 |           delay={time * 1}
169 |           inView
170 |           className="flex justify-center md:mb-10 mb-5"
171 |         >
172 |           <div className="min-w-[75vw] mt-10 flex w-full flex-col items-center justify-center">
173 |             <Link href="/about" className="hover:underline text-white">
174 |               <h1 className="mb-2 text-center text-2xl font-light tracking-tighter text-transparent bg-clip-text bg-gradient-to-br from-white to-gray-400 md:text-3xl ">
175 |                 Click Here to Know More About Us
176 |               </h1>
177 |             </Link>
178 |             {/* <p className="max-w-md text-center mb-2 text-sm text-gray-400 dark:text-gray-400">
179 |               About Page
180 |             </p> */}
181 |           </div>
182 |         </BlurFade>
183 |       </main>
184 |     </>
185 |   );
186 | }
187 | 


--------------------------------------------------------------------------------
/app/about/page.tsx:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import Image from "next/image";
  3 | import Link from "next/link";
  4 | import { Metadata } from "next";
  5 | 
  6 | export const metadata: Metadata = {
  7 |   title: "About",
  8 | };
  9 | 
 10 | const Article1 = () => {
 11 |   return (
 12 |     <div>
 13 |       <section className="py-12 px-4 bg-black sm:py-16 lg:py-20">
 14 |         <div className="px-4 mx-auto max-w-7xl sm:px-10 lg:px-8">
 15 |           <div className="max-w-3xl mx-auto xl:max-w-4xl">
 16 |             <p className="text-sm font-bold tracking-widest text-gray-400 uppercase">
 17 |               About Page
 18 |             </p>
 19 | 
 20 |             <h1 className="text-3xl font-bold text-white mt-7 sm:text-4xl xl:text-5xl">
 21 |               What is Opinify.in?
 22 |             </h1>
 23 |             <p className="text-sm font-normal text-gray-400 mt-7">
 24 |               {new Date().toLocaleString("default", { month: "long" })},{" "}
 25 |               {new Date().getFullYear()}
 26 |             </p>
 27 | 
 28 |             <div className="mt-10">
 29 |               <p className="text-base font-normal leading-7 text-gray-300">
 30 |                 Welcome to Opinify.in, your go-to solution for effortless and
 31 |                 efficient feedback collection. In today’s fast-paced digital
 32 |                 world, understanding user experience and gathering actionable
 33 |                 insights is crucial for success. Opinify.in is here to simplify
 34 |                 that process, offering a powerful platform to collect, manage,
 35 |                 and analyze feedback directly from your website.
 36 |               </p>
 37 |               <Image
 38 |                 src="https://utfs.io/f/9e53247a-090e-4b56-ae1e-03c9e4bff653-md47.png"
 39 |                 className="mx-auto my-8"
 40 |                 alt="About Hero"
 41 |                 width={1000}
 42 |                 height={500}
 43 |                 loading="lazy"
 44 |               />
 45 |               <h2 className="mt-12 text-3xl font-bold text-white">
 46 |                 Our Technology
 47 |               </h2>
 48 |               <p className="mt-6 text-base font-normal leading-7 text-gray-300">
 49 |                 Our platform is built with a modern and robust tech stack to
 50 |                 ensure a seamless and reliable experience:
 51 |               </p>
 52 |               <ul className="pl-5 mt-6 space-y-1 text-base font-normal leading-7 text-gray-300 list-disc">
 53 |                 <li>
 54 |                   <span className="font-bold text-white">React.js:</span> For
 55 |                   building a dynamic and responsive user interface.
 56 |                 </li>
 57 |                 <li>
 58 |                   <span className="font-bold text-white">Next.js:</span> To
 59 |                   offer server-side rendering and static site generation for
 60 |                   improved performance and SEO.
 61 |                 </li>
 62 |                 <li>
 63 |                   <span className="font-bold text-white">TypeScript:</span>{" "}
 64 |                   Ensuring type safety and better development experience.
 65 |                 </li>
 66 |                 <li>
 67 |                   <span className="font-bold text-white">PostgreSQL:</span> A
 68 |                   powerful and scalable database to handle your data needs
 69 |                   efficiently.
 70 |                 </li>
 71 |                 <li>
 72 |                   <span className="font-bold text-white">Prisma:</span> For an
 73 |                   intuitive and flexible database access layer.
 74 |                 </li>
 75 |                 <li>
 76 |                   <span className="font-bold text-white">NextAuth:</span> To
 77 |                   manage authentication and user sessions securely.
 78 |                 </li>
 79 |               </ul>
 80 |               <h2 className="mt-12 text-3xl font-bold text-white">
 81 |                 Our Mission
 82 |               </h2>
 83 |               <p className="mt-6 text-base font-normal leading-7 text-gray-300">
 84 |                 At Opinify.in, we are dedicated to helping businesses and
 85 |                 developers harness the power of user feedback. Our mission is to
 86 |                 provide a tool that not only simplifies the feedback collection
 87 |                 process but also delivers meaningful insights that can drive
 88 |                 growth and innovation. By leveraging advanced technology and
 89 |                 user-centric design, we aim to transform the way you engage with
 90 |                 your audience and improve your offerings.
 91 |               </p>
 92 |               <blockquote className="pl-5 mt-8 border-l-2 border-white">
 93 |                 <p className="text-lg italic font-medium text-white">
 94 |                   Join the Opinify.in community today and discover how our
 95 |                   platform can help you turn user feedback into actionable
 96 |                   strategies for success. Experience a new level of insight and
 97 |                   efficiency with Opinify.in.
 98 |                 </p>
 99 |               </blockquote>
100 |               <div className="relative mt-16">
101 |                 {/* <div className="absolute -inset-2">
102 |                   <div
103 |                     className="w-full h-full mx-auto opacity-30 blur-lg filter"
104 |                     style={{
105 |                       background:
106 |                         "linear-gradient(90deg, #44ff9a -0.55%, #44b0ff 22.86%, #8b44ff 48.36%, #ff6644 73.33%, #ebff70 99.34%)",
107 |                     }}
108 |                   ></div>
109 |                 </div> */}
110 | 
111 |                 {/* <div className="relative rounded-xl">
112 |                   <Image
113 |                     src="https://www.auraui.com/aiimage/boystudy.png"
114 |                     alt="AuroraUI components"
115 |                     layout="responsive"
116 |                     width={1100}
117 |                     height={800}
118 |                     className="rounded-md"
119 |                   />
120 |                 </div> */}
121 |               </div>
122 |               <h2 className="mt-16 text-3xl font-bold text-white">
123 |                 Still Something on Your Mind?
124 |               </h2>
125 |               <p className="mt-6 text-base font-normal leading-7 text-gray-300">
126 |                 We believe in the power of communication and are always here to
127 |                 help. If you have any questions, suggestions, or need further
128 |                 assistance, don’t hesitate to reach out. Whether you’re curious
129 |                 about how Opinify.in works, need help integrating it into your
130 |                 website, or simply want to share your thoughts, we’re all ears.
131 |                 Your feedback is as important to us as it is to you.
132 |               </p>
133 |               <blockquote className="pl-5 mt-8 border-l-2 border-white">
134 |                 <p className="text-lg italic font-medium text-white/70">
135 |                   Let’s{" "}
136 |                   <Link
137 |                     className="hover:underline text-white"
138 |                     href={"https://x.com/shubhcodes"}
139 |                     target="_"
140 |                   >
141 |                     connect
142 |                   </Link>{" "}
143 |                   and make the most out of your feedback journey with
144 |                   Opinify.in.
145 |                 </p>
146 |               </blockquote>
147 |             </div>
148 |           </div>
149 |         </div>
150 |       </section>
151 |     </div>
152 |   );
153 | };
154 | 
155 | export default Article1;
156 | 


--------------------------------------------------------------------------------
/components/ui/dropdown-menu.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
  5 | import {
  6 |   CheckIcon,
  7 |   ChevronRightIcon,
  8 |   DotFilledIcon,
  9 | } from "@radix-ui/react-icons"
 10 | 
 11 | import { cn } from "@/lib/utils"
 12 | 
 13 | const DropdownMenu = DropdownMenuPrimitive.Root
 14 | 
 15 | const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
 16 | 
 17 | const DropdownMenuGroup = DropdownMenuPrimitive.Group
 18 | 
 19 | const DropdownMenuPortal = DropdownMenuPrimitive.Portal
 20 | 
 21 | const DropdownMenuSub = DropdownMenuPrimitive.Sub
 22 | 
 23 | const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
 24 | 
 25 | const DropdownMenuSubTrigger = React.forwardRef<
 26 |   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
 27 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
 28 |     inset?: boolean
 29 |   }
 30 | >(({ className, inset, children, ...props }, ref) => (
 31 |   <DropdownMenuPrimitive.SubTrigger
 32 |     ref={ref}
 33 |     className={cn(
 34 |       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
 35 |       inset && "pl-8",
 36 |       className
 37 |     )}
 38 |     {...props}
 39 |   >
 40 |     {children}
 41 |     <ChevronRightIcon className="ml-auto h-4 w-4" />
 42 |   </DropdownMenuPrimitive.SubTrigger>
 43 | ))
 44 | DropdownMenuSubTrigger.displayName =
 45 |   DropdownMenuPrimitive.SubTrigger.displayName
 46 | 
 47 | const DropdownMenuSubContent = React.forwardRef<
 48 |   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
 49 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 50 | >(({ className, ...props }, ref) => (
 51 |   <DropdownMenuPrimitive.SubContent
 52 |     ref={ref}
 53 |     className={cn(
 54 |       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 55 |       className
 56 |     )}
 57 |     {...props}
 58 |   />
 59 | ))
 60 | DropdownMenuSubContent.displayName =
 61 |   DropdownMenuPrimitive.SubContent.displayName
 62 | 
 63 | const DropdownMenuContent = React.forwardRef<
 64 |   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
 65 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
 66 | >(({ className, sideOffset = 4, ...props }, ref) => (
 67 |   <DropdownMenuPrimitive.Portal>
 68 |     <DropdownMenuPrimitive.Content
 69 |       ref={ref}
 70 |       sideOffset={sideOffset}
 71 |       className={cn(
 72 |         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
 73 |         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 74 |         className
 75 |       )}
 76 |       {...props}
 77 |     />
 78 |   </DropdownMenuPrimitive.Portal>
 79 | ))
 80 | DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 81 | 
 82 | const DropdownMenuItem = React.forwardRef<
 83 |   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
 84 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
 85 |     inset?: boolean
 86 |   }
 87 | >(({ className, inset, ...props }, ref) => (
 88 |   <DropdownMenuPrimitive.Item
 89 |     ref={ref}
 90 |     className={cn(
 91 |       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 92 |       inset && "pl-8",
 93 |       className
 94 |     )}
 95 |     {...props}
 96 |   />
 97 | ))
 98 | DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
 99 | 
100 | const DropdownMenuCheckboxItem = React.forwardRef<
101 |   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
102 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
103 | >(({ className, children, checked, ...props }, ref) => (
104 |   <DropdownMenuPrimitive.CheckboxItem
105 |     ref={ref}
106 |     className={cn(
107 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
108 |       className
109 |     )}
110 |     checked={checked}
111 |     {...props}
112 |   >
113 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
114 |       <DropdownMenuPrimitive.ItemIndicator>
115 |         <CheckIcon className="h-4 w-4" />
116 |       </DropdownMenuPrimitive.ItemIndicator>
117 |     </span>
118 |     {children}
119 |   </DropdownMenuPrimitive.CheckboxItem>
120 | ))
121 | DropdownMenuCheckboxItem.displayName =
122 |   DropdownMenuPrimitive.CheckboxItem.displayName
123 | 
124 | const DropdownMenuRadioItem = React.forwardRef<
125 |   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
126 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
127 | >(({ className, children, ...props }, ref) => (
128 |   <DropdownMenuPrimitive.RadioItem
129 |     ref={ref}
130 |     className={cn(
131 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
132 |       className
133 |     )}
134 |     {...props}
135 |   >
136 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
137 |       <DropdownMenuPrimitive.ItemIndicator>
138 |         <DotFilledIcon className="h-4 w-4 fill-current" />
139 |       </DropdownMenuPrimitive.ItemIndicator>
140 |     </span>
141 |     {children}
142 |   </DropdownMenuPrimitive.RadioItem>
143 | ))
144 | DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
145 | 
146 | const DropdownMenuLabel = React.forwardRef<
147 |   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
148 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
149 |     inset?: boolean
150 |   }
151 | >(({ className, inset, ...props }, ref) => (
152 |   <DropdownMenuPrimitive.Label
153 |     ref={ref}
154 |     className={cn(
155 |       "px-2 py-1.5 text-sm font-semibold",
156 |       inset && "pl-8",
157 |       className
158 |     )}
159 |     {...props}
160 |   />
161 | ))
162 | DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
163 | 
164 | const DropdownMenuSeparator = React.forwardRef<
165 |   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
166 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
167 | >(({ className, ...props }, ref) => (
168 |   <DropdownMenuPrimitive.Separator
169 |     ref={ref}
170 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
171 |     {...props}
172 |   />
173 | ))
174 | DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
175 | 
176 | const DropdownMenuShortcut = ({
177 |   className,
178 |   ...props
179 | }: React.HTMLAttributes<HTMLSpanElement>) => {
180 |   return (
181 |     <span
182 |       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
183 |       {...props}
184 |     />
185 |   )
186 | }
187 | DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
188 | 
189 | export {
190 |   DropdownMenu,
191 |   DropdownMenuTrigger,
192 |   DropdownMenuContent,
193 |   DropdownMenuItem,
194 |   DropdownMenuCheckboxItem,
195 |   DropdownMenuRadioItem,
196 |   DropdownMenuLabel,
197 |   DropdownMenuSeparator,
198 |   DropdownMenuShortcut,
199 |   DropdownMenuGroup,
200 |   DropdownMenuPortal,
201 |   DropdownMenuSub,
202 |   DropdownMenuSubContent,
203 |   DropdownMenuSubTrigger,
204 |   DropdownMenuRadioGroup,
205 | }
206 | 


--------------------------------------------------------------------------------
/components/magicui/particles.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import React, { useEffect, useRef, useState } from "react";
  4 | 
  5 | interface MousePosition {
  6 |   x: number;
  7 |   y: number;
  8 | }
  9 | 
 10 | function MousePosition(): MousePosition {
 11 |   const [mousePosition, setMousePosition] = useState<MousePosition>({
 12 |     x: 0,
 13 |     y: 0,
 14 |   });
 15 | 
 16 |   useEffect(() => {
 17 |     const handleMouseMove = (event: MouseEvent) => {
 18 |       setMousePosition({ x: event.clientX, y: event.clientY });
 19 |     };
 20 | 
 21 |     window.addEventListener("mousemove", handleMouseMove);
 22 | 
 23 |     return () => {
 24 |       window.removeEventListener("mousemove", handleMouseMove);
 25 |     };
 26 |   }, []);
 27 | 
 28 |   return mousePosition;
 29 | }
 30 | 
 31 | interface ParticlesProps {
 32 |   className?: string;
 33 |   quantity?: number;
 34 |   staticity?: number;
 35 |   ease?: number;
 36 |   size?: number;
 37 |   refresh?: boolean;
 38 |   color?: string;
 39 |   vx?: number;
 40 |   vy?: number;
 41 | }
 42 | function hexToRgb(hex: string): number[] {
 43 |   hex = hex.replace("#", "");
 44 | 
 45 |   if (hex.length === 3) {
 46 |     hex = hex
 47 |       .split("")
 48 |       .map((char) => char + char)
 49 |       .join("");
 50 |   }
 51 | 
 52 |   const hexInt = parseInt(hex, 16);
 53 |   const red = (hexInt >> 16) & 255;
 54 |   const green = (hexInt >> 8) & 255;
 55 |   const blue = hexInt & 255;
 56 |   return [red, green, blue];
 57 | }
 58 | 
 59 | const Particles: React.FC<ParticlesProps> = ({
 60 |   className = "",
 61 |   quantity = 100,
 62 |   staticity = 50,
 63 |   ease = 50,
 64 |   size = 0.4,
 65 |   refresh = false,
 66 |   color = "#ffffff",
 67 |   vx = 0,
 68 |   vy = 0,
 69 | }) => {
 70 |   const canvasRef = useRef<HTMLCanvasElement>(null);
 71 |   const canvasContainerRef = useRef<HTMLDivElement>(null);
 72 |   const context = useRef<CanvasRenderingContext2D | null>(null);
 73 |   const circles = useRef<any[]>([]);
 74 |   const mousePosition = MousePosition();
 75 |   const mouse = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
 76 |   const canvasSize = useRef<{ w: number; h: number }>({ w: 0, h: 0 });
 77 |   const dpr = typeof window !== "undefined" ? window.devicePixelRatio : 1;
 78 | 
 79 |   useEffect(() => {
 80 |     if (canvasRef.current) {
 81 |       context.current = canvasRef.current.getContext("2d");
 82 |     }
 83 |     initCanvas();
 84 |     animate();
 85 |     window.addEventListener("resize", initCanvas);
 86 | 
 87 |     return () => {
 88 |       window.removeEventListener("resize", initCanvas);
 89 |     };
 90 |   }, [color]);
 91 | 
 92 |   useEffect(() => {
 93 |     onMouseMove();
 94 |   }, [mousePosition.x, mousePosition.y]);
 95 | 
 96 |   useEffect(() => {
 97 |     initCanvas();
 98 |   }, [refresh]);
 99 | 
100 |   const initCanvas = () => {
101 |     resizeCanvas();
102 |     drawParticles();
103 |   };
104 | 
105 |   const onMouseMove = () => {
106 |     if (canvasRef.current) {
107 |       const rect = canvasRef.current.getBoundingClientRect();
108 |       const { w, h } = canvasSize.current;
109 |       const x = mousePosition.x - rect.left - w / 2;
110 |       const y = mousePosition.y - rect.top - h / 2;
111 |       const inside = x < w / 2 && x > -w / 2 && y < h / 2 && y > -h / 2;
112 |       if (inside) {
113 |         mouse.current.x = x;
114 |         mouse.current.y = y;
115 |       }
116 |     }
117 |   };
118 | 
119 |   type Circle = {
120 |     x: number;
121 |     y: number;
122 |     translateX: number;
123 |     translateY: number;
124 |     size: number;
125 |     alpha: number;
126 |     targetAlpha: number;
127 |     dx: number;
128 |     dy: number;
129 |     magnetism: number;
130 |   };
131 | 
132 |   const resizeCanvas = () => {
133 |     if (canvasContainerRef.current && canvasRef.current && context.current) {
134 |       circles.current.length = 0;
135 |       canvasSize.current.w = canvasContainerRef.current.offsetWidth;
136 |       canvasSize.current.h = canvasContainerRef.current.offsetHeight;
137 |       canvasRef.current.width = canvasSize.current.w * dpr;
138 |       canvasRef.current.height = canvasSize.current.h * dpr;
139 |       canvasRef.current.style.width = `${canvasSize.current.w}px`;
140 |       canvasRef.current.style.height = `${canvasSize.current.h}px`;
141 |       context.current.scale(dpr, dpr);
142 |     }
143 |   };
144 | 
145 |   const circleParams = (): Circle => {
146 |     const x = Math.floor(Math.random() * canvasSize.current.w);
147 |     const y = Math.floor(Math.random() * canvasSize.current.h);
148 |     const translateX = 0;
149 |     const translateY = 0;
150 |     const pSize = Math.floor(Math.random() * 2) + size;
151 |     const alpha = 0;
152 |     const targetAlpha = parseFloat((Math.random() * 0.6 + 0.1).toFixed(1));
153 |     const dx = (Math.random() - 0.5) * 0.1;
154 |     const dy = (Math.random() - 0.5) * 0.1;
155 |     const magnetism = 0.1 + Math.random() * 4;
156 |     return {
157 |       x,
158 |       y,
159 |       translateX,
160 |       translateY,
161 |       size: pSize,
162 |       alpha,
163 |       targetAlpha,
164 |       dx,
165 |       dy,
166 |       magnetism,
167 |     };
168 |   };
169 | 
170 |   const rgb = hexToRgb(color);
171 | 
172 |   const drawCircle = (circle: Circle, update = false) => {
173 |     if (context.current) {
174 |       const { x, y, translateX, translateY, size, alpha } = circle;
175 |       context.current.translate(translateX, translateY);
176 |       context.current.beginPath();
177 |       context.current.arc(x, y, size, 0, 2 * Math.PI);
178 |       context.current.fillStyle = `rgba(${rgb.join(", ")}, ${alpha})`;
179 |       context.current.fill();
180 |       context.current.setTransform(dpr, 0, 0, dpr, 0, 0);
181 | 
182 |       if (!update) {
183 |         circles.current.push(circle);
184 |       }
185 |     }
186 |   };
187 | 
188 |   const clearContext = () => {
189 |     if (context.current) {
190 |       context.current.clearRect(
191 |         0,
192 |         0,
193 |         canvasSize.current.w,
194 |         canvasSize.current.h
195 |       );
196 |     }
197 |   };
198 | 
199 |   const drawParticles = () => {
200 |     clearContext();
201 |     const particleCount = quantity;
202 |     for (let i = 0; i < particleCount; i++) {
203 |       const circle = circleParams();
204 |       drawCircle(circle);
205 |     }
206 |   };
207 | 
208 |   const remapValue = (
209 |     value: number,
210 |     start1: number,
211 |     end1: number,
212 |     start2: number,
213 |     end2: number
214 |   ): number => {
215 |     const remapped =
216 |       ((value - start1) * (end2 - start2)) / (end1 - start1) + start2;
217 |     return remapped > 0 ? remapped : 0;
218 |   };
219 | 
220 |   const animate = () => {
221 |     clearContext();
222 |     circles.current.forEach((circle: Circle, i: number) => {
223 |       // Handle the alpha value
224 |       const edge = [
225 |         circle.x + circle.translateX - circle.size, // distance from left edge
226 |         canvasSize.current.w - circle.x - circle.translateX - circle.size, // distance from right edge
227 |         circle.y + circle.translateY - circle.size, // distance from top edge
228 |         canvasSize.current.h - circle.y - circle.translateY - circle.size, // distance from bottom edge
229 |       ];
230 |       const closestEdge = edge.reduce((a, b) => Math.min(a, b));
231 |       const remapClosestEdge = parseFloat(
232 |         remapValue(closestEdge, 0, 20, 0, 1).toFixed(2)
233 |       );
234 |       if (remapClosestEdge > 1) {
235 |         circle.alpha += 0.02;
236 |         if (circle.alpha > circle.targetAlpha) {
237 |           circle.alpha = circle.targetAlpha;
238 |         }
239 |       } else {
240 |         circle.alpha = circle.targetAlpha * remapClosestEdge;
241 |       }
242 |       circle.x += circle.dx + vx;
243 |       circle.y += circle.dy + vy;
244 |       circle.translateX +=
245 |         (mouse.current.x / (staticity / circle.magnetism) - circle.translateX) /
246 |         ease;
247 |       circle.translateY +=
248 |         (mouse.current.y / (staticity / circle.magnetism) - circle.translateY) /
249 |         ease;
250 | 
251 |       drawCircle(circle, true);
252 | 
253 |       // circle gets out of the canvas
254 |       if (
255 |         circle.x < -circle.size ||
256 |         circle.x > canvasSize.current.w + circle.size ||
257 |         circle.y < -circle.size ||
258 |         circle.y > canvasSize.current.h + circle.size
259 |       ) {
260 |         // remove the circle from the array
261 |         circles.current.splice(i, 1);
262 |         // create a new circle
263 |         const newCircle = circleParams();
264 |         drawCircle(newCircle);
265 |         // update the circle position
266 |       }
267 |     });
268 |     window.requestAnimationFrame(animate);
269 |   };
270 | 
271 |   return (
272 |     <div className={className} ref={canvasContainerRef} aria-hidden="true">
273 |       <canvas ref={canvasRef} className="size-full" />
274 |     </div>
275 |   );
276 | };
277 | 
278 | export default Particles;
279 | 


--------------------------------------------------------------------------------
/components/feedback-table.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useState, useMemo } from "react";
  4 | import { unparse } from "papaparse";
  5 | 
  6 | import {
  7 |   Card,
  8 |   CardHeader,
  9 |   CardTitle,
 10 |   CardDescription,
 11 |   CardContent,
 12 | } from "@/components/ui/card";
 13 | import { Input } from "@/components/ui/input";
 14 | import {
 15 |   DropdownMenu,
 16 |   DropdownMenuTrigger,
 17 |   DropdownMenuContent,
 18 |   DropdownMenuRadioGroup,
 19 |   DropdownMenuRadioItem,
 20 | } from "@/components/ui/dropdown-menu";
 21 | import { Button } from "@/components/ui/button";
 22 | import {
 23 |   Table,
 24 |   TableHeader,
 25 |   TableRow,
 26 |   TableHead,
 27 |   TableBody,
 28 |   TableCell,
 29 | } from "@/components/ui/table";
 30 | import { FeedbackView } from "./feedback-view";
 31 | 
 32 | interface FeedbackItem {
 33 |   id: string;
 34 |   name: string;
 35 |   email: string;
 36 |   feedback: string;
 37 |   rating: number;
 38 |   createdAt: Date;
 39 | }
 40 | 
 41 | type SortOption = {
 42 |   key: keyof FeedbackItem;
 43 |   order: "asc" | "desc";
 44 | };
 45 | 
 46 | type FeedbackTableProps = {
 47 |   initialFeedback: FeedbackItem[];
 48 |   initialSort: SortOption;
 49 | };
 50 | 
 51 | function generateCSV(data: FeedbackItem[]): string {
 52 |   return unparse(data, {
 53 |     columns: ["name", "email", "feedback", "rating", "createdAt"],
 54 |     quotes: true,
 55 |     quoteChar: '"',
 56 |     escapeChar: '"',
 57 |     delimiter: ",",
 58 |     header: true,
 59 |     newline: "\n",
 60 |   });
 61 | }
 62 | 
 63 | function downloadCSV(
 64 |   data: FeedbackItem[],
 65 |   filename = "feedback_data.csv"
 66 | ): void {
 67 |   const csv = generateCSV(data);
 68 |   const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
 69 |   const url = URL.createObjectURL(blob);
 70 | 
 71 |   const link = document.createElement("a");
 72 |   link.href = url;
 73 |   link.download = filename;
 74 |   link.style.display = "none";
 75 |   document.body.appendChild(link);
 76 | 
 77 |   link.click();
 78 | 
 79 |   document.body.removeChild(link);
 80 |   URL.revokeObjectURL(url);
 81 | }
 82 | 
 83 | export function FeedbackTable({
 84 |   initialFeedback,
 85 |   initialSort,
 86 | }: FeedbackTableProps) {
 87 |   const [search, setSearch] = useState("");
 88 |   const [sort, setSort] = useState<SortOption>(initialSort);
 89 | 
 90 |   const filteredFeedback = useMemo(() => {
 91 |     return initialFeedback
 92 |       .filter((item) => {
 93 |         const searchValue = search.toLowerCase();
 94 |         return (
 95 |           item.name.toLowerCase().includes(searchValue) ||
 96 |           item.email.toLowerCase().includes(searchValue) ||
 97 |           item.feedback.toLowerCase().includes(searchValue)
 98 |         );
 99 |       })
100 |       .sort((a, b) => {
101 |         if (sort.order === "asc") {
102 |           return a[sort.key] > b[sort.key] ? 1 : -1;
103 |         } else {
104 |           return a[sort.key] < b[sort.key] ? 1 : -1;
105 |         }
106 |       });
107 |   }, [initialFeedback, search, sort]);
108 | 
109 |   const handleSort = (key: keyof FeedbackItem) => {
110 |     if (sort.key === key) {
111 |       setSort({ key, order: sort.order === "asc" ? "desc" : "asc" });
112 |     } else {
113 |       setSort({ key, order: "asc" });
114 |     }
115 |   };
116 | 
117 |   return (
118 |     <Card>
119 |       <CardHeader className="px-7">
120 |         <CardTitle>Customer Feedback</CardTitle>
121 |         <CardDescription>
122 |           View and manage customer feedback for your website 🚀.
123 |         </CardDescription>
124 |       </CardHeader>
125 |       <CardContent>
126 |         <div className="flex items-center gap-x-2 justify-between mb-4">
127 |           <Input
128 |             placeholder="Search feedback..."
129 |             className="bg-white dark:bg-black"
130 |             value={search}
131 |             onChange={(e) => setSearch(e.target.value)}
132 |           />
133 |           <div className="flex gap-x-2">
134 |             <DropdownMenu>
135 |               <DropdownMenuTrigger asChild>
136 |                 <Button variant="outline" className="shrink-0">
137 |                   <ArrowUpDownIcon className="w-4 h-4 mr-2" />
138 |                   Sort by
139 |                 </Button>
140 |               </DropdownMenuTrigger>
141 |               <DropdownMenuContent className="w-[200px]" align="end">
142 |                 <DropdownMenuRadioGroup
143 |                   value={sort.key}
144 |                   onValueChange={(key) => handleSort(key as keyof FeedbackItem)}
145 |                 >
146 |                   <DropdownMenuRadioItem value="name">
147 |                     Name
148 |                   </DropdownMenuRadioItem>
149 |                   <DropdownMenuRadioItem value="rating">
150 |                     Rating
151 |                   </DropdownMenuRadioItem>
152 |                   <DropdownMenuRadioItem value="createdAt">
153 |                     Created At
154 |                   </DropdownMenuRadioItem>
155 |                 </DropdownMenuRadioGroup>
156 |               </DropdownMenuContent>
157 |             </DropdownMenu>
158 |             <Button
159 |               variant="outline"
160 |               onClick={() => downloadCSV(filteredFeedback)}
161 |             >
162 |               Export CSV <DownloadIcon className="w-4 h-4" />
163 |             </Button>
164 |           </div>
165 |         </div>
166 |         <Table>
167 |           <TableHeader>
168 |             <TableRow>
169 |               <TableHead
170 |                 className="cursor-pointer"
171 |                 onClick={() => handleSort("name")}
172 |               >
173 |                 Name
174 |                 {sort.key === "name" && (
175 |                   <span className="ml-1">
176 |                     {sort.order === "asc" ? "\u2191" : "\u2193"}
177 |                   </span>
178 |                 )}
179 |               </TableHead>
180 |               <TableHead>Email</TableHead>
181 |               <TableHead>Feedback</TableHead>
182 |               <TableHead
183 |                 className="cursor-pointer"
184 |                 onClick={() => handleSort("rating")}
185 |               >
186 |                 Rating
187 |                 {sort.key === "rating" && (
188 |                   <span className="ml-1">
189 |                     {sort.order === "asc" ? "\u2191" : "\u2193"}
190 |                   </span>
191 |                 )}
192 |               </TableHead>
193 |               <TableHead
194 |                 className="cursor-pointer"
195 |                 onClick={() => handleSort("createdAt")}
196 |               >
197 |                 Created At
198 |                 {sort.key === "createdAt" && (
199 |                   <span className="ml-1">
200 |                     {sort.order === "asc" ? "\u2191" : "\u2193"}
201 |                   </span>
202 |                 )}
203 |               </TableHead>
204 |               <TableHead>Actions</TableHead>
205 |             </TableRow>
206 |           </TableHeader>
207 |           <TableBody>
208 |             {filteredFeedback.map((item) => (
209 |               <TableRow key={item.id}>
210 |                 <TableCell>{item.name}</TableCell>
211 |                 <TableCell>
212 |                   {item.email.length > 10
213 |                     ? `${item.email.slice(0, 10)}...`
214 |                     : item.email}
215 |                 </TableCell>
216 |                 <TableCell>
217 |                   {item.feedback.length > 10
218 |                     ? `${item.feedback.slice(0, 10)}...`
219 |                     : item.feedback}
220 |                 </TableCell>
221 |                 <TableCell>
222 |                   <div className="flex items-center gap-0.5">
223 |                     {Array.from({ length: item.rating }).map((_, index) => (
224 |                       <StarIcon key={index} className="w-5 h-5 fill-primary" />
225 |                     ))}
226 |                     {Array.from({ length: 5 - item.rating }).map((_, index) => (
227 |                       <StarIcon
228 |                         key={index}
229 |                         className="w-5 h-5 fill-muted stroke-muted-foreground"
230 |                       />
231 |                     ))}
232 |                   </div>
233 |                 </TableCell>
234 |                 <TableCell>{item.createdAt.toDateString()}</TableCell>
235 |                 <TableCell>
236 |                   <FeedbackView
237 |                     email={item.email}
238 |                     feedback={item.feedback}
239 |                     name={item.name}
240 |                     rating={item.rating}
241 |                     projectId={item.id}
242 |                     submitted={item.createdAt.toLocaleDateString()}
243 |                   />
244 |                 </TableCell>
245 |               </TableRow>
246 |             ))}
247 |           </TableBody>
248 |         </Table>
249 |       </CardContent>
250 |     </Card>
251 |   );
252 | }
253 | 
254 | function ArrowUpDownIcon(props: React.SVGProps<SVGSVGElement>) {
255 |   return (
256 |     <svg
257 |       {...props}
258 |       xmlns="http://www.w3.org/2000/svg"
259 |       width="24"
260 |       height="24"
261 |       viewBox="0 0 24 24"
262 |       fill="none"
263 |       stroke="currentColor"
264 |       strokeWidth="2"
265 |       strokeLinecap="round"
266 |       strokeLinejoin="round"
267 |     >
268 |       <path d="m21 16-4 4-4-4" />
269 |       <path d="M17 20V4" />
270 |       <path d="m3 8 4-4 4 4" />
271 |       <path d="M7 4v16" />
272 |     </svg>
273 |   );
274 | }
275 | 
276 | function StarIcon(props: React.SVGProps<SVGSVGElement>) {
277 |   return (
278 |     <svg
279 |       {...props}
280 |       xmlns="http://www.w3.org/2000/svg"
281 |       width="24"
282 |       height="24"
283 |       viewBox="0 0 24 24"
284 |       fill="none"
285 |       stroke="currentColor"
286 |       strokeWidth="2"
287 |       strokeLinecap="round"
288 |       strokeLinejoin="round"
289 |     >
290 |       <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
291 |     </svg>
292 |   );
293 | }
294 | 
295 | function DownloadIcon(props: React.SVGProps<SVGSVGElement>) {
296 |   return (
297 |     <svg
298 |       {...props}
299 |       xmlns="http://www.w3.org/2000/svg"
300 |       width="24"
301 |       height="24"
302 |       viewBox="0 0 24 24"
303 |       fill="none"
304 |       stroke="currentColor"
305 |       strokeWidth="2"
306 |       strokeLinecap="round"
307 |       strokeLinejoin="round"
308 |     >
309 |       <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
310 |       <polyline points="7 10 12 15 17 10" />
311 |       <line x1="12" y1="15" x2="12" y2="3" />
312 |     </svg>
313 |   );
314 | }
315 | 


--------------------------------------------------------------------------------