helpful stuff
This commit is contained in:
parent
199ca176cf
commit
4fc784e5c8
8
package-lock.json
generated
8
package-lock.json
generated
@ -9,7 +9,7 @@
|
||||
"version": "0.0.1",
|
||||
"dependencies": {
|
||||
"aws-sdk": "^2.1628.0",
|
||||
"bits-ui": "^0.21.7",
|
||||
"bits-ui": "^0.21.10",
|
||||
"clsx": "^2.1.1",
|
||||
"dotenv": "^16.4.5",
|
||||
"tailwind-merge": "^2.3.0",
|
||||
@ -1468,9 +1468,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/bits-ui": {
|
||||
"version": "0.21.7",
|
||||
"resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-0.21.7.tgz",
|
||||
"integrity": "sha512-1PKp90ly1R6jexIiAUj1Dk4u2pln7ok+L8Vc0rHMY7pi7YZvadFNZvkp1G5BtmL8qh2xsn4MVNgKjPAQMCxW0A==",
|
||||
"version": "0.21.10",
|
||||
"resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-0.21.10.tgz",
|
||||
"integrity": "sha512-KuweEOKO0Rr8XX87dQh46G9mG0bZSmTqNxj5qBazz4OTQC+oPKui04/wP/ISsCOSGFomaRydTULqh4p+nsyc2g==",
|
||||
"dependencies": {
|
||||
"@internationalized/date": "^3.5.1",
|
||||
"@melt-ui/svelte": "0.76.2",
|
||||
|
||||
18
package.json
18
package.json
@ -18,6 +18,9 @@
|
||||
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
||||
"@tabler/icons-svelte": "^3.3.0",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"formsnap": "^1.0.0",
|
||||
"lucide-svelte": "^0.373.0",
|
||||
"mode-watcher": "^0.3.0",
|
||||
"postcss": "^8.4.32",
|
||||
"postcss-load-config": "^5.0.2",
|
||||
"prettier": "^3.1.1",
|
||||
@ -27,23 +30,20 @@
|
||||
"svelte-awesome-color-picker": "^3.0.6",
|
||||
"svelte-check": "^3.6.0",
|
||||
"svelte-legos": "^0.2.2",
|
||||
"tailwindcss": "^3.3.6",
|
||||
"timeago.js": "^4.0.2",
|
||||
"typescript": "^5.0.0",
|
||||
"vite": "^5.0.3",
|
||||
"formsnap": "^1.0.0",
|
||||
"lucide-svelte": "^0.373.0",
|
||||
"mode-watcher": "^0.3.0",
|
||||
"svelte-markdown": "^0.4.1",
|
||||
"svelte-motion": "^0.12.2",
|
||||
"svelte-radix": "^1.1.0",
|
||||
"svelte-sonner": "^0.3.22",
|
||||
"sveltekit-superforms": "^2.12.6"
|
||||
"sveltekit-superforms": "^2.12.6",
|
||||
"tailwindcss": "^3.3.6",
|
||||
"timeago.js": "^4.0.2",
|
||||
"typescript": "^5.0.0",
|
||||
"vite": "^5.0.3"
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"aws-sdk": "^2.1628.0",
|
||||
"bits-ui": "^0.21.7",
|
||||
"bits-ui": "^0.21.10",
|
||||
"clsx": "^2.1.1",
|
||||
"dotenv": "^16.4.5",
|
||||
"tailwind-merge": "^2.3.0",
|
||||
|
||||
12
src/lib/components/ui/collapsible/collapsible-content.svelte
Normal file
12
src/lib/components/ui/collapsible/collapsible-content.svelte
Normal file
@ -0,0 +1,12 @@
|
||||
<script>
|
||||
import { Collapsible as CollapsiblePrimitive } from "bits-ui";
|
||||
import { slide } from "svelte/transition";
|
||||
export let transition = slide;
|
||||
export let transitionConfig = {
|
||||
duration: 150,
|
||||
};
|
||||
</script>
|
||||
|
||||
<CollapsiblePrimitive.Content {transition} {transitionConfig} {...$$restProps}>
|
||||
<slot />
|
||||
</CollapsiblePrimitive.Content>
|
||||
13
src/lib/components/ui/collapsible/index.js
Normal file
13
src/lib/components/ui/collapsible/index.js
Normal file
@ -0,0 +1,13 @@
|
||||
import { Collapsible as CollapsiblePrimitive } from "bits-ui";
|
||||
import Content from "./collapsible-content.svelte";
|
||||
const Root = CollapsiblePrimitive.Root;
|
||||
const Trigger = CollapsiblePrimitive.Trigger;
|
||||
export {
|
||||
Root,
|
||||
Content,
|
||||
Trigger,
|
||||
//
|
||||
Root as Collapsible,
|
||||
Content as CollapsibleContent,
|
||||
Trigger as CollapsibleTrigger,
|
||||
};
|
||||
@ -141,16 +141,16 @@
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
<Select.Group>
|
||||
<Select.Item value="700" label="Short (~700 words)"
|
||||
>Short (~700 words)</Select.Item
|
||||
<Select.Item value="700" label="Short"
|
||||
>Short</Select.Item
|
||||
>
|
||||
<Select.Item value="1500" label="Medium (~1500 words)"
|
||||
>Medium (~1500 words)
|
||||
<Select.Item value="1500" label="Medium"
|
||||
>Medium
|
||||
<!-- <ProBadge /> -->
|
||||
</Select.Item>
|
||||
<!-- disabled={['free', 'basic'].includes(tier)} -->
|
||||
<Select.Item value="2500" label="Long (~2500 words)"
|
||||
>Long (~2500 words)
|
||||
<Select.Item value="2500" label="Long"
|
||||
>Long
|
||||
<!-- <ProBadge /> -->
|
||||
</Select.Item>
|
||||
</Select.Group>
|
||||
|
||||
@ -11,6 +11,10 @@
|
||||
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';
|
||||
|
||||
/** @type {import("./$types").PageServerData} */
|
||||
export let data;
|
||||
@ -71,15 +75,28 @@
|
||||
}
|
||||
|
||||
let disable_freebies = !$formData.use_freebie;
|
||||
let disable_autopublish = !$formData.auto_publish;
|
||||
$: disable_freebies = !$formData.use_freebie;
|
||||
$: disable_autopublish = !$formData.auto_publish;
|
||||
</script>
|
||||
|
||||
<div class="w-full max-w-7xl">
|
||||
<form method="post" use:enhance enctype="multipart/form-data">
|
||||
<input type="text" value={data.blog_info.id} name="id" readonly class="hidden" />
|
||||
|
||||
<div class="grid grid-cols-1 gap-16 md:grid-cols-2 md:grid-rows-1">
|
||||
<div>
|
||||
<Collapsible.Root class="space-y-2">
|
||||
<div class="flex items-center justify-between space-x-4 border-b px-4">
|
||||
<h2 class="mb-4 text-2xl font-bold">Basics</h2>
|
||||
<Collapsible.Trigger asChild let:builder>
|
||||
<Button builders={[builder]} variant="ghost" size="sm" class="w-9 p-0">
|
||||
<ChevronsUpDown class="h-4 w-4" />
|
||||
<span class="sr-only">Toggle</span>
|
||||
</Button>
|
||||
</Collapsible.Trigger>
|
||||
</div>
|
||||
<Collapsible.Content class="space-y-2">
|
||||
<Form.Field {form} name="name">
|
||||
<Form.Control let:attrs>
|
||||
<Form.Label>Blog name</Form.Label>
|
||||
@ -104,7 +121,6 @@
|
||||
<Form.Description />
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
|
||||
<Form.Field {form} name="primary_color_hex">
|
||||
<Form.Control let:attrs>
|
||||
<Form.Label>Primary color</Form.Label>
|
||||
@ -163,23 +179,21 @@
|
||||
{/if}
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field {form} name="auto_publish">
|
||||
<Form.Control let:attrs>
|
||||
<Tooltip.Root>
|
||||
<Tooltip.Trigger>
|
||||
<Form.Label>Auto Publish</Form.Label>
|
||||
</Tooltip.Trigger>
|
||||
<Tooltip.Content>
|
||||
<p>Automatically creates a blog post for you when you upload a video</p>
|
||||
</Tooltip.Content>
|
||||
</Tooltip.Root>
|
||||
<Switch {...attrs} bind:checked={$formData.auto_publish} />
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
</Collapsible.Content>
|
||||
</Collapsible.Root>
|
||||
</div>
|
||||
<div>
|
||||
<Collapsible.Root class="space-y-2">
|
||||
<div class="flex items-center justify-between space-x-4 border-b px-4">
|
||||
<h2 class="mb-4 text-2xl font-bold">Freebies</h2>
|
||||
<Collapsible.Trigger asChild let:builder>
|
||||
<Button builders={[builder]} variant="ghost" size="sm" class="w-9 p-0">
|
||||
<ChevronsUpDown class="h-4 w-4" />
|
||||
<span class="sr-only">Toggle</span>
|
||||
</Button>
|
||||
</Collapsible.Trigger>
|
||||
</div>
|
||||
<Collapsible.Content class="space-y-2">
|
||||
<Form.Field {form} name="use_freebie">
|
||||
<Form.Control let:attrs>
|
||||
<Form.Label class="text-right">Send freebie</Form.Label>
|
||||
@ -262,9 +276,70 @@
|
||||
>The text displayed next to the signup form on your blog.</Form.Description
|
||||
>
|
||||
</Form.Field>
|
||||
</Collapsible.Content>
|
||||
</Collapsible.Root>
|
||||
</div>
|
||||
<div>
|
||||
<Collapsible.Root class="space-y-2">
|
||||
<div class="flex items-center justify-between space-x-4 border-b px-4">
|
||||
<h2 class="mb-4 text-2xl font-bold">Auto publish</h2>
|
||||
<Collapsible.Trigger asChild let:builder>
|
||||
<Button builders={[builder]} variant="ghost" size="sm" class="w-9 p-0">
|
||||
<ChevronsUpDown class="h-4 w-4" />
|
||||
<span class="sr-only">Toggle</span>
|
||||
</Button>
|
||||
</Collapsible.Trigger>
|
||||
</div>
|
||||
<Collapsible.Content class="space-y-2">
|
||||
<Form.Field {form} name="auto_publish">
|
||||
<Form.Control let:attrs>
|
||||
<Form.Label>Auto Publish</Form.Label>
|
||||
<div class="flex items-center justify-start">
|
||||
<Switch {...attrs} bind:checked={$formData.auto_publish} />
|
||||
</div>
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
<Form.Description
|
||||
>Automatically creates a blog post for you when you upload a video</Form.Description
|
||||
>
|
||||
</Form.Field>
|
||||
<Form.Field {form} name="freebie_name">
|
||||
<Form.Control let:attrs>
|
||||
<Form.Label class="text-right">Freebie Name</Form.Label>
|
||||
<div class="flex items-center justify-start">
|
||||
<Input
|
||||
{...attrs}
|
||||
bind:value={$formData.freebie_name}
|
||||
bind:readonly={disable_freebies}
|
||||
/>
|
||||
</div>
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field {form} name="freebie_url">
|
||||
<Form.Control let:attrs>
|
||||
<Form.Label class="text-right">Freebie file</Form.Label>
|
||||
<div class="flex items-center justify-start">
|
||||
<Input
|
||||
type="file"
|
||||
on:input={(e) =>
|
||||
handleFileChange(e, $formData.freebie_url).then((x) => {
|
||||
$formData.freebie_url = x;
|
||||
})}
|
||||
bind:disabled={disable_freebies}
|
||||
/>
|
||||
<Input {...attrs} class="hidden" bind:value={$formData.freebie_url} readonly />
|
||||
</div>
|
||||
</Form.Control>
|
||||
<Form.Description>Maximum size of 5MB (TEMPORARY)</Form.Description>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
</Collapsible.Content>
|
||||
</Collapsible.Root>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<Form.Button disabled={!isTainted($tainted)}>Submit</Form.Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user