pascallinxweiler/Metify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[dyad] Added colored length indicators for meta tags - wrote 2 file(s)

Browse Source
This commit is contained in:
[dyad]
2026-01-20 12:05:34 +01:00
parent b4f088dd47
commit 4c06ed78cf
2 changed files with 79 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/meta-form.tsx
View File

@@ -6,6 +6,7 @@ import { Input } from "@/components/ui/input";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Globe } from "lucide-react";
import { extractMetaData } from "@/app/actions";
import { LengthIndicator } from "./length-indicator";
interface MetaData {
title: string;
@@ -70,14 +71,26 @@ export function MetaForm() {
</CardHeader>
<CardContent className="space-y-4">
<div>
<h3 className="font-semibold text-card-foreground">Meta Title</h3>
<p className="text-muted-foreground bg-muted p-3 rounded-md mt-1">
<div className="flex items-center gap-2 mb-1">
<h3 className="font-semibold text-card-foreground">Meta Title</h3>
<LengthIndicator
length={metaData.title.length}
type="title"
/>
</div>
<p className="text-muted-foreground bg-muted p-3 rounded-md">
{metaData.title || "Not found"}
</p>
</div>
<div>
<h3 className="font-semibold text-card-foreground">Meta Description</h3>
<p className="text-muted-foreground bg-muted p-3 rounded-md mt-1">
<div className="flex items-center gap-2 mb-1">
<h3 className="font-semibold text-card-foreground">Meta Description</h3>
<LengthIndicator
length={metaData.description.length}
type="description"
/>
</div>
<p className="text-muted-foreground bg-muted p-3 rounded-md">
{metaData.description || "Not found"}
</p>
</div>