56d43e6636
- Introduced a new SolidJS starter template with relevant metadata including description, tags, and GitHub repository link. - Updated the FrameworkLink component to enhance the hover effect with grayscale transition. - Replaced multiple SVG icons with updated versions for Angular, Astro, Qwik, React, Remix, Slidev, Svelte, TypeScript, Vite, and Vue, ensuring improved visuals and consistency across the application.
39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import type { Template } from '~/types/template';
|
|
import { STARTER_TEMPLATES } from '~/utils/constants';
|
|
|
|
interface FrameworkLinkProps {
|
|
template: Template;
|
|
}
|
|
|
|
const FrameworkLink: React.FC<FrameworkLinkProps> = ({ template }) => (
|
|
<a
|
|
href={`/git?url=https://github.com/${template.githubRepo}.git`}
|
|
data-state="closed"
|
|
data-discover="true"
|
|
className="items-center justify-center"
|
|
>
|
|
<div
|
|
className={`inline-block ${template.icon} w-8 h-8 text-4xl transition-theme hover:text-purple-500 dark:text-white dark:opacity-50 dark:hover:opacity-100 dark:hover:text-purple-400 transition-all grayscale hover:grayscale-0 transition`}
|
|
title={template.label}
|
|
/>
|
|
</a>
|
|
);
|
|
|
|
const StarterTemplates: React.FC = () => {
|
|
return (
|
|
<div className="flex flex-col items-center gap-4">
|
|
<span className="text-sm text-gray-500">or start a blank app with your favorite stack</span>
|
|
<div className="flex justify-center">
|
|
<div className="flex flex-wrap justify-center items-center gap-4 max-w-sm">
|
|
{STARTER_TEMPLATES.map((template) => (
|
|
<FrameworkLink key={template.name} template={template} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default StarterTemplates;
|