Added social links to sidebar

This commit is contained in:
Jaret Burkett
2025-06-17 13:25:24 -06:00
parent 989ebfaa11
commit 4586eb5392

View File

@@ -1,5 +1,6 @@
import Link from 'next/link';
import { Home, Settings, BrainCircuit, Images, Plus } from 'lucide-react';
import { Home, Settings, BrainCircuit, Images, Plus} from 'lucide-react';
import { FaXTwitter, FaDiscord, FaYoutube } from "react-icons/fa6";
const Sidebar = () => {
const navigation = [
@@ -10,13 +11,16 @@ const Sidebar = () => {
{ name: 'Settings', href: '/settings', icon: Settings },
];
const socialsBoxClass = 'flex flex-col items-center justify-center p-1 hover:bg-gray-800 rounded-lg transition-colors';
const socialIconClass = 'w-5 h-5 text-gray-400 hover:text-white';
return (
<div className="flex flex-col w-59 bg-gray-900 text-gray-100">
<div className="px-4 py-3">
<h1 className="text-l">
<img src="/ostris_logo.png" alt="Ostris AI Toolkit" className="w-auto h-7 mr-3 inline" />
<span className="font-bold uppercase">Ostris</span>
<span className='ml-2 uppercase text-gray-300'>AI-Toolkit</span>
<span className="ml-2 uppercase text-gray-300">AI-Toolkit</span>
</h1>
</div>
<nav className="flex-1">
@@ -34,7 +38,12 @@ const Sidebar = () => {
))}
</ul>
</nav>
<a href="https://ostris.com/support" target="_blank" rel="noreferrer" className="flex items-center space-x-2 px-4 py-3">
<a
href="https://ostris.com/support"
target="_blank"
rel="noreferrer"
className="flex items-center space-x-2 px-4 py-3"
>
<div className="min-w-[26px] min-h-[26px]">
<svg height="24" version="1.1" width="24" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(0 -1028.4)">
@@ -47,6 +56,39 @@ const Sidebar = () => {
</div>
<div className="uppercase text-gray-500 text-sm mb-2 flex-1 pt-2 pl-0">Support AI-Toolkit</div>
</a>
{/* Social links grid */}
<div className="px-1 py-1 border-t border-gray-800">
<div className="grid grid-cols-3 gap-4">
<a
href="https://discord.gg/VXmU2f5WEU"
target="_blank"
rel="noreferrer"
className={socialsBoxClass}
>
<FaDiscord className={socialIconClass} />
{/* <span className="text-xs text-gray-500 mt-1">Discord</span> */}
</a>
<a
href="https://www.youtube.com/@ostrisai"
target="_blank"
rel="noreferrer"
className={socialsBoxClass}
>
<FaYoutube className={socialIconClass} />
{/* <span className="text-xs text-gray-500 mt-1">YouTube</span> */}
</a>
<a
href="https://x.com/ostrisai"
target="_blank"
rel="noreferrer"
className={socialsBoxClass}
>
<FaXTwitter className={socialIconClass} />
{/* <span className="text-xs text-gray-500 mt-1">X</span> */}
</a>
</div>
</div>
</div>
);
};