75 lines
2.2 KiB
TypeScript
75 lines
2.2 KiB
TypeScript
import {
|
|
IconAdjustments,
|
|
IconDragDrop,
|
|
IconIcons,
|
|
IconKey,
|
|
IconLanguage,
|
|
IconPlug,
|
|
type TablerIcon,
|
|
} from "@tabler/icons-react";
|
|
|
|
interface Feature {
|
|
icon: TablerIcon;
|
|
title: string;
|
|
content: string;
|
|
}
|
|
|
|
const featureList: Feature[] = [
|
|
{
|
|
icon: IconDragDrop,
|
|
title: "Build boards with drag and drop",
|
|
content: "Arrange apps and widgets with a mouse or a finger.",
|
|
},
|
|
{
|
|
icon: IconIcons,
|
|
title: "Thousands of built-in icons",
|
|
content: "Choose icons from the repositories included with Homarr.",
|
|
},
|
|
{
|
|
icon: IconPlug,
|
|
title: "Connect the services you run",
|
|
content: "See status, activity, and controls from supported apps directly on the dashboard.",
|
|
},
|
|
{
|
|
icon: IconKey,
|
|
title: "Authentication and permissions included",
|
|
content: "Use credentials, OIDC, or LDAP and decide precisely what each user can see and manage.",
|
|
},
|
|
{
|
|
icon: IconLanguage,
|
|
title: "Available in 26 languages",
|
|
content: "Select one of 26 available interface languages.",
|
|
},
|
|
{
|
|
icon: IconAdjustments,
|
|
title: "Fine-grained customization",
|
|
content: "Configure boards, apps, and widgets from the interface.",
|
|
},
|
|
];
|
|
|
|
function FeatureComponent(props: Feature) {
|
|
return (
|
|
<article className="grid grid-cols-[2.75rem_1fr] gap-4 border-t py-7 first:border-t-0 sm:first:border-t lg:[&:nth-child(-n+2)]:border-t-0 lg:[&:nth-child(odd)]:pr-8 lg:[&:nth-child(even)]:border-l lg:[&:nth-child(even)]:pl-8">
|
|
<div className="flex size-11 items-center justify-center rounded-lg bg-fd-primary/10 text-fd-primary">
|
|
<props.icon aria-hidden="true" size={24} stroke={1.8} />
|
|
</div>
|
|
<div>
|
|
<h2 className="m-0 text-lg font-semibold tracking-tight text-fd-foreground">{props.title}</h2>
|
|
<p className="mb-0 mt-2 text-sm leading-6 text-fd-muted-foreground">{props.content}</p>
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|
|
|
|
export default function HomepageFeatures() {
|
|
return (
|
|
<section className="mb-20 mt-4 lg:mb-24" aria-label="Homarr features">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2">
|
|
{featureList.map((props) => (
|
|
<FeatureComponent key={props.title} {...props} />
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|