Vite + React

38 | 39 | 40 | 44 | 45 | 46 | 47 | {submitted ? ( 48 |

49 |

Thank you for your feedback!

50 |

51 | We appreciate your feedback. It helps us improve our product and provide better 52 | service to our customers. 53 |

54 |

55 | ) : ( 56 |

57 |

Send us your feedback

58 |

62 |

63 |

64 | Name 65 | 69 |

70 |

71 | Email 72 | 77 |

78 |

79 |

80 | Feedback 81 |

86 |                   </div>
 87 |                   <div className="flex items-center justify-between">
 88 |                     <div className="flex items-center gap-2">
 89 |                       {[...Array(5)].map((_, index) => (
 90 |                         <StarIcon
 91 |                           key={index}
 92 |                           className={`h-5 w-5 cursor-pointer ${
 93 |                             rating > index ? "fill-primary" : "fill-muted stroke-muted-foreground"
 94 |                           }`}
 95 |                           onClick={() => onSelectStar(index)}
 96 |                         />
 97 |                       ))}
 98 |                     </div>
 99 |                     <Button type="submit">Submit</Button>
100 |                   </div>
101 |                 </form>
102 |               </div>
103 |             )}
104 |             <Separator className="my-4" />
105 |             <div className="text-gray-600">
106 |               Powered by{" "}
107 |               <a
108 |                 href="https://nexx-saas.vercel.app/"
109 |                 target="_blank"
110 |                 className="text-indigo-600 hover:underline"
111 |               >
112 |                 Nexx ⚡️
113 |               </a>
114 |             </div>
115 |           </PopoverContent>
116 |         </Popover>
117 |       </div>
118 |     </>
119 |   );
120 | };
121 | 
122 | function StarIcon(props) {
123 |   return (
124 |     <svg
125 |       {...props}
126 |       xmlns="http://www.w3.org/2000/svg"
127 |       width="24"
128 |       height="24"
129 |       viewBox="0 0 24 24"
130 |       fill="none"
131 |       stroke="currentColor"
132 |       strokeWidth="2"
133 |       strokeLinecap="round"
134 |       strokeLinejoin="round"
135 |     >
136 |       <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" />
137 |     </svg>
138 |   );
139 | }
140 | 
141 | function MessageCircleIcon(props) {
142 |   return (
143 |     <svg
144 |       {...props}
145 |       xmlns="http://www.w3.org/2000/svg"
146 |       width="24"
147 |       height="24"
148 |       viewBox="0 0 24 24"
149 |       fill="none"
150 |       stroke="currentColor"
151 |       stroke-width="2"
152 |       stroke-linecap="round"
153 |       stroke-linejoin="round"
154 |       class="lucide lucide-message-circle"
155 |     >
156 |       <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
157 |     </svg>
158 |   );
159 | }
160 |

--------------------------------------------------------------------------------
/src/components/ui/button.jsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva } 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 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 |         destructive:
14 |           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 |         outline:
16 |           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 |         secondary:
18 |           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 |         ghost: "hover:bg-accent hover:text-accent-foreground",
20 |         link: "text-primary underline-offset-4 hover:underline",
21 |       },
22 |       size: {
23 |         default: "h-10 px-4 py-2",
24 |         sm: "h-9 rounded-md px-3",
25 |         lg: "h-11 rounded-md px-8",
26 |         icon: "h-10 w-10",
27 |       },
28 |     },
29 |     defaultVariants: {
30 |       variant: "default",
31 |       size: "default",
32 |     },
33 |   }
34 | )
35 | 
36 | const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
37 |   const Comp = asChild ? Slot : "button"
38 |   return (
39 |     (<Comp
40 |       className={cn(buttonVariants({ variant, size, className }))}
41 |       ref={ref}
42 |       {...props} />)
43 |   );
44 | })
45 | Button.displayName = "Button"
46 | 
47 | export { Button, buttonVariants }
48 |

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

--------------------------------------------------------------------------------
/src/components/ui/label.jsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as LabelPrimitive from "@radix-ui/react-label"
 3 | import { cva } from "class-variance-authority";
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const labelVariants = cva(
 8 |   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 9 | )
10 | 
11 | const Label = React.forwardRef(({ className, ...props }, ref) => (
12 |   <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
13 | ))
14 | Label.displayName = LabelPrimitive.Root.displayName
15 | 
16 | export { Label }
17 |

--------------------------------------------------------------------------------
/src/components/ui/popover.jsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as PopoverPrimitive from "@radix-ui/react-popover"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const Popover = PopoverPrimitive.Root
 7 | 
 8 | const PopoverTrigger = PopoverPrimitive.Trigger
 9 | 
10 | const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
11 |   <PopoverPrimitive.Portal>
12 |     <PopoverPrimitive.Content
13 |       ref={ref}
14 |       align={align}
15 |       sideOffset={sideOffset}
16 |       className={cn(
17 |         "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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",
18 |         className
19 |       )}
20 |       {...props} />
21 |   </PopoverPrimitive.Portal>
22 | ))
23 | PopoverContent.displayName = PopoverPrimitive.Content.displayName
24 | 
25 | export { Popover, PopoverTrigger, PopoverContent }
26 |

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

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

--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 |   @tailwind components;
 3 |   @tailwind utilities;
 4 | 
 5 |   @layer base {
 6 |     .widget {
 7 |       --background: 0 0% 100%;
 8 |       --foreground: 222.2 84% 4.9%;
 9 | 
10 |       --card: 0 0% 100%;
11 |       --card-foreground: 222.2 84% 4.9%;
12 | 
13 |       --popover: 0 0% 100%;
14 |       --popover-foreground: 222.2 84% 4.9%;
15 | 
16 |       --primary: 222.2 47.4% 11.2%;
17 |       --primary-foreground: 210 40% 98%;
18 | 
19 |       --secondary: 210 40% 96.1%;
20 |       --secondary-foreground: 222.2 47.4% 11.2%;
21 | 
22 |       --muted: 210 40% 96.1%;
23 |       --muted-foreground: 215.4 16.3% 46.9%;
24 | 
25 |       --accent: 210 40% 96.1%;
26 |       --accent-foreground: 222.2 47.4% 11.2%;
27 | 
28 |       --destructive: 0 84.2% 60.2%;
29 |       --destructive-foreground: 210 40% 98%;
30 | 
31 |       --border: 214.3 31.8% 91.4%;
32 |       --input: 214.3 31.8% 91.4%;
33 |       --ring: 222.2 84% 4.9%;
34 | 
35 |       --radius: 0.5rem;
36 |     }
37 | 
38 |     .dark .widget {
39 |       --background: 222.2 84% 4.9%;
40 |       --foreground: 210 40% 98%;
41 | 
42 |       --card: 222.2 84% 4.9%;
43 |       --card-foreground: 210 40% 98%;
44 | 
45 |       --popover: 222.2 84% 4.9%;
46 |       --popover-foreground: 210 40% 98%;
47 | 
48 |       --primary: 210 40% 98%;
49 |       --primary-foreground: 222.2 47.4% 11.2%;
50 | 
51 |       --secondary: 217.2 32.6% 17.5%;
52 |       --secondary-foreground: 210 40% 98%;
53 | 
54 |       --muted: 217.2 32.6% 17.5%;
55 |       --muted-foreground: 215 20.2% 65.1%;
56 | 
57 |       --accent: 217.2 32.6% 17.5%;
58 |       --accent-foreground: 210 40% 98%;
59 | 
60 |       --destructive: 0 62.8% 30.6%;
61 |       --destructive-foreground: 210 40% 98%;
62 | 
63 |       --border: 217.2 32.6% 17.5%;
64 |       --input: 217.2 32.6% 17.5%;
65 |       --ring: 212.7 26.8% 83.9%;
66 |     }
67 |   }
68 | 
69 |   @layer base {
70 |     * {
71 |       @apply border-border;
72 |     }
73 |     body {
74 |       @apply bg-background text-foreground;
75 |     }
76 |   }

--------------------------------------------------------------------------------
/src/index.jsx:
--------------------------------------------------------------------------------
1 | import WidgetWebComponent from "./web-component";
2 | 
3 | customElements.define("my-widget", WidgetWebComponent);
4 |

--------------------------------------------------------------------------------
/src/lib/utils.js:
--------------------------------------------------------------------------------
1 | import { clsx } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 | 
4 | export function cn(...inputs) {
5 |   return twMerge(clsx(inputs))
6 | }
7 |

--------------------------------------------------------------------------------
/src/supabaseClient.js:
--------------------------------------------------------------------------------
 1 | import { createClient } from "@supabase/supabase-js";
 2 | 
 3 | const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
 4 | const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
 5 | 
 6 | // Create a single supabase client for interacting with your database
 7 | const supabase = createClient(supabaseUrl, supabaseKey);
 8 | 
 9 | export default supabase;
10 |

--------------------------------------------------------------------------------
/src/web-component.jsx:
--------------------------------------------------------------------------------
 1 | import ReactDom from "react-dom/client";
 2 | import { Widget } from "./components/Widget";
 3 | 
 4 | export const normalizeAttribute = (attribute) => {
 5 |   return attribute.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
 6 | };
 7 | 
 8 | class WidgetWebComponent extends HTMLElement {
 9 |   constructor() {
10 |     super();
11 |     this.attachShadow({ mode: "open" });
12 |   }
13 | 
14 |   connectedCallback() {
15 |     const props = this.getPropsFromAttributes();
16 |     const root = ReactDom.createRoot(this.shadowRoot);
17 |     root.render(<Widget {...props} />);
18 |   }
19 | 
20 |   getPropsFromAttributes() {
21 |     const props = {};
22 |     for (const { name, value } of this.attributes) {
23 |       props[normalizeAttribute(name)] = value;
24 |     }
25 |     return props;
26 |   }
27 | }
28 | 
29 | export default WidgetWebComponent;
30 |

--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   darkMode: ["class"],
 4 |   content: [
 5 |     './pages/**/*.{js,jsx}',
 6 |     './components/**/*.{js,jsx}',
 7 |     './app/**/*.{js,jsx}',
 8 |     './src/**/*.{js,jsx}',
 9 |   ],
10 |   prefix: "",
11 |   theme: {
12 |     container: {
13 |       center: true,
14 |       padding: "2rem",
15 |       screens: {
16 |         "2xl": "1400px",
17 |       },
18 |     },
19 |     extend: {
20 |       colors: {
21 |         border: "hsl(var(--border))",
22 |         input: "hsl(var(--input))",
23 |         ring: "hsl(var(--ring))",
24 |         background: "hsl(var(--background))",
25 |         foreground: "hsl(var(--foreground))",
26 |         primary: {
27 |           DEFAULT: "hsl(var(--primary))",
28 |           foreground: "hsl(var(--primary-foreground))",
29 |         },
30 |         secondary: {
31 |           DEFAULT: "hsl(var(--secondary))",
32 |           foreground: "hsl(var(--secondary-foreground))",
33 |         },
34 |         destructive: {
35 |           DEFAULT: "hsl(var(--destructive))",
36 |           foreground: "hsl(var(--destructive-foreground))",
37 |         },
38 |         muted: {
39 |           DEFAULT: "hsl(var(--muted))",
40 |           foreground: "hsl(var(--muted-foreground))",
41 |         },
42 |         accent: {
43 |           DEFAULT: "hsl(var(--accent))",
44 |           foreground: "hsl(var(--accent-foreground))",
45 |         },
46 |         popover: {
47 |           DEFAULT: "hsl(var(--popover))",
48 |           foreground: "hsl(var(--popover-foreground))",
49 |         },
50 |         card: {
51 |           DEFAULT: "hsl(var(--card))",
52 |           foreground: "hsl(var(--card-foreground))",
53 |         },
54 |       },
55 |       borderRadius: {
56 |         lg: "var(--radius)",
57 |         md: "calc(var(--radius) - 2px)",
58 |         sm: "calc(var(--radius) - 4px)",
59 |       },
60 |       keyframes: {
61 |         "accordion-down": {
62 |           from: { height: "0" },
63 |           to: { height: "var(--radix-accordion-content-height)" },
64 |         },
65 |         "accordion-up": {
66 |           from: { height: "var(--radix-accordion-content-height)" },
67 |           to: { height: "0" },
68 |         },
69 |       },
70 |       animation: {
71 |         "accordion-down": "accordion-down 0.2s ease-out",
72 |         "accordion-up": "accordion-up 0.2s ease-out",
73 |       },
74 |     },
75 |   },
76 |   plugins: [require("tailwindcss-animate")],
77 | }

--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "vite";
 2 | import react from "@vitejs/plugin-react";
 3 | import path from "path";
 4 | 
 5 | // https://vitejs.dev/config/
 6 | export default defineConfig({
 7 |   define: {
 8 |     "process.env": {
 9 |       NODE_ENV: "production",
10 |     },
11 |   },
12 |   plugins: [react()],
13 |   resolve: {
14 |     alias: {
15 |       "@": path.resolve(__dirname, "./src"),
16 |     },
17 |   },
18 |   build: {
19 |     lib: {
20 |       entry: "./src/index.jsx",
21 |       name: "widget",
22 |       fileName: (format) => `widget.${format}.js`,
23 |     },
24 |     target: "esnext",
25 |   },
26 | });
27 |

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