help card for domains

package-lock.json

@@ -9,7 +9,7 @@
 			"version": "0.0.1",
 			"dependencies": {
 				"aws-sdk": "^2.1628.0",
-				"bits-ui": "^0.21.10",
+				"bits-ui": "^0.21.13",
 				"clsx": "^2.1.1",
 				"dotenv": "^16.4.5",
 				"tailwind-merge": "^2.3.0",
@@ -1468,9 +1468,9 @@
 			}
 		},
 		"node_modules/bits-ui": {
-			"version": "0.21.10",
-			"resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-0.21.10.tgz",
-			"integrity": "sha512-KuweEOKO0Rr8XX87dQh46G9mG0bZSmTqNxj5qBazz4OTQC+oPKui04/wP/ISsCOSGFomaRydTULqh4p+nsyc2g==",
+			"version": "0.21.13",
+			"resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-0.21.13.tgz",
+			"integrity": "sha512-7nmOh6Ig7ND4DXZHv1FhNsY9yUGrad0+mf3tc4YN//3MgnJT1LnHtk4HZAKgmxCOe7txSX7/39LtYHbkrXokAQ==",
 			"dependencies": {
 				"@internationalized/date": "^3.5.1",
 				"@melt-ui/svelte": "0.76.2",

package.json

@@ -43,7 +43,7 @@
 	"type": "module",
 	"dependencies": {
 		"aws-sdk": "^2.1628.0",
-		"bits-ui": "^0.21.10",
+		"bits-ui": "^0.21.13",
 		"clsx": "^2.1.1",
 		"dotenv": "^16.4.5",
 		"tailwind-merge": "^2.3.0",

src/lib/components/ui/hover-card/hover-card-content.svelte

@@ -0,0 +1,24 @@
+<script>
+	import { LinkPreview as HoverCardPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils.js";
+	let className = undefined;
+	export let transition = flyAndScale;
+	export let transitionConfig = undefined;
+	export let align = "center";
+	export let sideOffset = 4;
+	export { className as class };
+</script>
+
+<HoverCardPrimitive.Content
+	{transition}
+	{transitionConfig}
+	{align}
+	{sideOffset}
+	class={cn(
+		"bg-popover text-popover-foreground z-50 mt-3 w-64 rounded-md border p-4 shadow-md outline-none",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</HoverCardPrimitive.Content>

src/lib/components/ui/hover-card/index.js

@@ -0,0 +1,12 @@
+import { LinkPreview as HoverCardPrimitive } from "bits-ui";
+import Content from "./hover-card-content.svelte";
+const Root = HoverCardPrimitive.Root;
+const Trigger = HoverCardPrimitive.Trigger;
+export {
+	Root,
+	Content,
+	Trigger,
+	Root as HoverCard,
+	Content as HoverCardContent,
+	Trigger as HoverCardTrigger,
+};

src/routes/(app)/website/+page.svelte

@@ -11,10 +11,8 @@
 	import { Textarea } from '$lib/components/ui/textarea';
 	import * as Tooltip from '$lib/components/ui/tooltip';
 	import { config } from '$lib';
-	import { QuestionMarkCircled } from 'svelte-radix';
-	import ChevronsUpDown from 'lucide-svelte/icons/chevrons-up-down';
-	import * as Collapsible from '$lib/components/ui/collapsible/index.js';
-	import { Button } from '$lib/components/ui/button/index.js';
+	import CircleQuestion from 'lucide-svelte/icons/circle-help';
+
 
 	/** @type {import("./$types").PageServerData} */
 	export let data;
@@ -160,7 +158,15 @@
 							</Form.Field> -->
 							<Form.Field {form} name="domain">
 								<Form.Control let:attrs>
-									<Form.Label>Custom domain</Form.Label>
+									<Tooltip.Root>
+										<Tooltip.Trigger>
+										  <Form.Label>Custom domain <CircleQuestion class="inline size-4" /></Form.Label>
+										</Tooltip.Trigger>
+										<Tooltip.Content>
+										  <p>To connect your own domain to your blog, create a CNAME record pointing your domain to <code>target.youpage.ai</code></p>
+										  <p>If you're having trouble doing it yourself, please feel free to contact us at <a href="mailto:osabic2004@gmail.com" class="font-semibold underline">our support email</a> for assistance.</p>
+										</Tooltip.Content>
+									  </Tooltip.Root>
 									<Input {...attrs} bind:value={$formData.domain} />
 								</Form.Control>
 								{#if data.blog_info.subdomain_slug}