Source identity
| Field | Recorded value |
|---|---|
| Source type | GitHub source |
| Original record | Janady13/llms-txt-hub / apps/web/components/sections/tools-section.tsx |
| Date | Not specified in source |
| Repository | Janady13/llms-txt-hub |
| Revision | e0f4bf978d4df168369c7601d9c5f5ea89e84377 |
| Branch | main |
| Path or archive member | apps/web/components/sections/tools-section.tsx |
| Original SHA-256 | 9a43c8c2ea977617b717131508a811e5a53350414999877d4f768dd27271cede |
| Git blob SHA | a1c699b8f5e5020920cb0086b3152af993471df6 |
| Reading-copy SHA-256 | 9a43c8c2ea977617b717131508a811e5a53350414999877d4f768dd27271cede |
Recovered source transcript
Download complete source text ↓157 lines · 6.0 KB
import { ExternalLink } from 'lucide-react'
import Image from 'next/image'
import Link from 'next/link'
import { Section } from '@/components/layout/section'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { getRoute } from '@/lib/routes'
interface ToolCardData {
title: string
description: string
href: string
image: string
imageAlt: string
}
const TOOLS: ToolCardData[] = [
{
title: 'LLMs.txt Checker Chrome Extension',
description: 'Check if websites implement llms.txt and llms-full.txt files',
href: 'https://chromewebstore.google.com/detail/llmstxt-checker/klcihkijejcgnaiinaehcjbggamippej',
image: '/tools/llmstxt-checker.png',
imageAlt: 'LLMs.txt Checker Screenshot'
},
{
title: 'LLMS.txt VSCode Extension',
description: 'Search and explore llms.txt files directly in VS Code',
href: 'https://marketplace.visualstudio.com/items?itemName=TheDavidDias.vscode-llms-txt',
image: '/tools/vscode-extension.png',
imageAlt: 'VS Code Extension Screenshot'
},
{
title: 'MCP LLMS.txt Explorer',
description: 'Explore and analyze llms.txt files using MCP',
href: 'https://github.com/thedaviddias/mcp-llms-txt-explorer',
image: '/tools/mcp-llms-txt-explorer.png',
imageAlt: 'MCP LLMS.txt Explorer Screenshot'
},
{
title: 'LLMs Txt Raycast Extension',
description: 'Search and explore llms.txt files directly in Raycast',
href: 'https://www.raycast.com/thedaviddias/llms-txt',
image: '/tools/llms-txt-raycast-extension.png',
imageAlt: 'Raycast Extension Screenshot'
},
{
title: 'llmstxt CLI',
description: 'Install llms.txt documentation directly into your AI coding agents',
href: 'https://www.npmjs.com/package/llmstxt-cli',
image: '/tools/llmstxt-cli.png',
imageAlt: 'llmstxt CLI Screenshot'
}
]
interface ToolsSectionProps {
layout?: 'default' | 'compact'
showImages?: boolean
}
/**
* Section component displaying popular development tools.
* When showImages=false (e.g. on website detail pages), renders a single card
* with a compact list of tools to match the page layout.
*/
export function ToolsSection({ layout = 'default', showImages = true }: ToolsSectionProps) {
if (!showImages) {
return (
<Section
title="Developer Tools"
description="Explore tools created to help you work with llms.txt"
viewAllHref={getRoute('category.page', { category: 'developer-tools' })}
viewAllText="All tools"
titleId="developer-tools"
>
<div className="rounded-2xl border border-border/50 bg-card/50 backdrop-blur-sm overflow-hidden">
<ul className="divide-y divide-border/50">
{TOOLS.map((tool, index) => (
<li key={tool.href}>
<Link
href={tool.href}
target="_blank"
rel="noopener noreferrer"
className="group flex items-start gap-4 px-6 py-4 transition-colors hover:bg-muted/30 focus-visible:bg-muted/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
>
<span className="flex-1 min-w-0">
<span className="font-medium text-foreground group-hover:text-primary transition-colors block truncate">
{tool.title}
</span>
<span className="text-sm text-muted-foreground line-clamp-2 mt-0.5 block">
{tool.description}
</span>
</span>
<ExternalLink
className="size-4 shrink-0 text-muted-foreground group-hover:text-primary transition-colors mt-1"
aria-hidden
/>
</Link>
</li>
))}
</ul>
</div>
</Section>
)
}
return (
<Section
title="Developer Tools"
description="Explore tools created to help you work with llms.txt"
viewAllHref={getRoute('category.page', { category: 'developer-tools' })}
viewAllText="All tools"
titleId="developer-tools"
>
<div className="@container">
<div className="grid gap-4 @[500px]:grid-cols-2 @[800px]:grid-cols-4">
{TOOLS.map(tool => (
<Link
key={tool.href}
href={tool.href}
target="_blank"
rel="noopener noreferrer"
className="group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-lg"
>
<Card className="h-full flex flex-col transition-all duration-200 hover:border-primary/50 hover:bg-muted/50 rounded-2xl border-border/50">
<CardHeader className="p-2 sm:p-2.5 md:p-3 space-y-1">
<CardTitle className="flex items-center gap-2 leading-5 text-base sm:text-lg">
{tool.title}
<ExternalLink
className="size-4 opacity-0 transition-opacity group-hover:opacity-100 shrink-0"
aria-hidden
/>
</CardTitle>
<CardDescription className="text-sm sm:text-base">
{tool.description}
</CardDescription>
</CardHeader>
{layout === 'default' && (
<CardContent className="p-2 sm:p-2.5 md:p-3 pt-0 mt-auto">
<div className="relative aspect-video overflow-hidden rounded-lg">
<Image
src={tool.image}
alt={tool.imageAlt}
fill
className="object-cover"
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
/>
</div>
</CardContent>
)}
</Card>
</Link>
))}
</div>
</div>
</Section>
)
}