Text diff

<script setup>
import { reactive } from 'vue';
import { DomTextDiff } from '@getdom/studio/vue';

const data = reactive({
	  "original": "Write better pages with a flexible visual editor.",
	  "proposed": "Create clearer pages with an editor built for focused teams.",
	  "mode": "diff",
	  "view": "inline",
	  "format": "text",
	  "originalLabel": "Current",
	  "proposedLabel": "Suggested",
	  "showHeader": true,
	  "showModeSwitcher": true,
	  "framed": true
	});
</script>

<template>
	<DomTextDiff
		v-bind="data"
	/>
</template>

<script setup>
import { DomBadge, DomTextDiff } from '../../../lib/vue';

const original = `export async function generateMetadata(page) {
	return {
		title: page.title,
		description: page.description,
	};
}`;

const proposed = `export async function generateMetadata(page) {
	const description = page.seoDescription || page.description;

	return {
		title: page.seoTitle || page.title,
		description,
		robots: page.noIndex ? 'noindex' : 'index',
	};
}`;
</script>

<template>
	<div class="w-full max-w-3xl overflow-hidden rounded-xl border border-border bg-canvas shadow-lg">
		<header class="flex items-center justify-between gap-3 border-b border-border bg-secondary/35 px-4 py-2.5">
			<div class="flex min-w-0 items-center gap-2">
				<svg class="size-4 shrink-0 text-muted-fg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
					<path d="M6 3h9l4 4v14H6V3Zm9 0v5h4M9 12h6M9 16h6" />
				</svg>
				<p class="truncate font-mono text-xs font-medium text-canvas-fg">app/metadata.js</p>
			</div>
			<DomBadge label="AI edit" tone="primary" size="sm" />
		</header>

		<DomTextDiff
			:original="original"
			:proposed="proposed"
			view="unified"
			format="code"
			original-label="Current file"
			proposed-label="Proposed edit"
			:framed="false"
		/>
	</div>
</template>

<script setup>
import { ref } from 'vue';
import { DomBadge, DomButton, DomTextDiff } from '../../../lib/vue';

const current = 'Our platform gives teams many tools that can be used to create, review, and publish content in a number of different ways.';
const suggested = 'Give every team one focused place to create, review, and publish content with confidence.';
const decision = ref('');

/**
 * Records the reviewer's decision for the suggestion demo.
 *
 * @param {'accepted'|'rejected'} value Review decision.
 * @returns {void}
 */
function decide(value) {
	decision.value = value;
}
</script>

<template>
	<article class="w-full max-w-2xl rounded-xl border border-border bg-canvas shadow-lg">
		<header class="flex flex-wrap items-center justify-between gap-3 border-b border-border px-5 py-3">
			<div>
				<p class="text-sm font-semibold text-canvas-fg">Launch announcement</p>
				<p class="mt-0.5 text-xs text-muted-fg">Draft · Product update</p>
			</div>
			<DomBadge label="AI suggestion" tone="primary" size="sm" />
		</header>

		<div class="space-y-4 p-5">
			<div class="border-b border-border pb-4 text-[15px] leading-7 text-canvas-fg">
				<p class="font-serif text-2xl font-semibold tracking-tight">A clearer way to publish</p>
				<p class="mt-3 text-muted-fg">The opening paragraph has a suggestion ready for review.</p>
			</div>

			<DomTextDiff
				:original="current"
				:proposed="suggested"
				view="inline"
				original-label="Current paragraph"
				proposed-label="Suggested rewrite"
			/>

			<footer class="flex items-center justify-between gap-3">
				<p class="text-xs text-muted-fg">
					{{ decision ? `Suggestion ${decision}` : 'Review the wording before changing the document.' }}
				</p>
				<div class="flex items-center gap-2">
					<DomButton size="sm" variant="secondary" @click="decide('rejected')">Reject</DomButton>
					<DomButton size="sm" variant="primary" @click="decide('accepted')">Accept</DomButton>
				</div>
			</footer>
		</div>
	</article>
</template>

<script setup>
import { DomButton, DomTextDiff } from '../../../lib/vue';

const currentDescription = 'DOM Studio is a collection of Vue components that helps developers build websites and apps.';
const suggestedDescription = 'Build polished Vue application interfaces with editable components, practical blocks, and source your team can own.';
</script>

<template>
	<div class="w-full max-w-2xl rounded-xl border border-border bg-canvas p-5 shadow-sm">
		<div class="flex flex-wrap items-start justify-between gap-3">
			<div>
				<p class="text-sm font-semibold text-canvas-fg">Meta description</p>
				<p class="mt-1 text-xs leading-5 text-muted-fg">AI found a clearer description for the search result.</p>
			</div>
			<span class="rounded-full bg-primary/10 px-2.5 py-1 text-xs font-medium text-primary">SEO suggestion</span>
		</div>

		<DomTextDiff
			class="mt-4"
			:original="currentDescription"
			:proposed="suggestedDescription"
			view="inline"
			original-label="Current description"
			proposed-label="Suggested replacement"
		/>

		<div class="mt-4 flex flex-wrap items-center justify-between gap-3">
			<p class="text-xs text-muted-fg">{{ suggestedDescription.length }} / 160 characters</p>
			<div class="flex items-center gap-2">
				<DomButton size="sm" variant="secondary">Keep current</DomButton>
				<DomButton size="sm" variant="primary">Use suggestion</DomButton>
			</div>
		</div>
	</div>
</template>