feat: add Starter template menu in homepage (#884)
* added icons and component * updated unocss to add dynamic icons * removed temp logs * updated readme
This commit is contained in:
37
app/components/chat/StarterTemplates.tsx
Normal file
37
app/components/chat/StarterTemplates.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
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 opacity-25 hover:opacity-75 transition-all`}
|
||||
/>
|
||||
</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 w-70 flex-wrap items-center justify-center gap-4">
|
||||
{STARTER_TEMPLATES.map((template) => (
|
||||
<FrameworkLink key={template.name} template={template} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default StarterTemplates;
|
||||
Reference in New Issue
Block a user