rwalk 0.9.0

A blazing fast web directory scanner
Documentation
import { useId } from "react";
import {
	FastForward,
	Code,
	Blocks,
	Filter,
	RotateCcw,
	Folders,
	Link,
	FileText,
} from "lucide-react";
import { useConfig } from "nextra-theme-docs";

export function Feature({ text, icon }) {
	return (
		<div className="inline-flex items-center">
			{icon}
			<h4 className="ml-3 font-bold text-[0.9rem] md:text-[1.1rem]  whitespace-nowrap">
				{text}
			</h4>
		</div>
	);
}

/** @type {{ key: string; icon: React.FC }[]} */
const FEATURES_LIST = [
	{
		key: "fast",
		icon: <FastForward className="lg:w-6 w-4 sm:w-5 md:stroke-[2.5]" />,
	},
	{
		key: "scripting",
		icon: <Code className="lg:w-6 w-4 sm:w-5 md:stroke-[2.5]" />,
	},
	{
		key: "interactive",
		icon: <Blocks className="lg:w-6 w-4 sm:w-5 md:stroke-[2.5]" />,
	},
	{
		key: "filters",
		icon: <Filter className="lg:w-6 w-4 sm:w-5 md:stroke-[2.5]" />,
	},
	{
		key: "resume",
		icon: <RotateCcw className="lg:w-6 w-4 sm:w-5 md:stroke-[2.5]" />,
	},
	{
		key: "recursive",
		icon: <Folders className="lg:w-6 w-4 sm:w-5 md:stroke-[2.5]" />,
	},
	{
		key: "spider",
		icon: <Link className="lg:w-6 w-4 sm:w-5 md:stroke-[2.5]" />,
	},
	{
		key: "wordlists",
		icon: <FileText className="lg:w-6 w-4 sm:w-5 md:stroke-[2.5]" />,
	},
];

export default function Features() {
	const keyId = useId();
	const config = useConfig();

	const primaryColor = (lightness: string) =>
		`hsl(${config.primaryHue}deg, ${config.primarySaturation}%, ${lightness})`;

	const title = "Features";
	const features = {
		fast: "Blazingly fast",
		scripting: (
			<>
				Scripting in{" "}
				<a href="https://rhai.rs/" target="_blank" rel="noreferrer">
					<code
						className="font-mono font-bold underline"
						style={{
							color: primaryColor("50%"),
							// backgroundColor: primaryColor("12%"),
						}}
					>
						rhai
					</code>
				</a>
			</>
		),
		interactive: "Interactive mode",
		filters: "Advanced filters",
		resume: "Resume execution",
		recursive: "Recursive mode",
		spider: "Spider mode",
		wordlists: "Granular wordlists",
	};

	return (
		<div className="mx-auto max-w-full w-[900px] text-center px-4 mb-10">
			<p className="text-lg mb-4 text-gray-600 md:text-2xl">{title}</p>
			<div className="grid gap-y-4 gap-x-8 md:grid-cols-4 grid-cols-2 mb-8">
				{FEATURES_LIST.map(({ key, icon }) => (
					<Feature text={features[key]} icon={icon} key={keyId + key} />
				))}
			</div>
		</div>
	);
}