logos-messaging/OpChan
1
0
Fork 0
mirror of https://github.com/logos-messaging/OpChan.git synced 2026-01-02 12:53:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: add remix banner

Browse Source
This commit is contained in:
Danish Arora 2025-11-19 01:37:06 -05:00
parent 51d26603d1
commit bc3db4382f
No known key found for this signature in database
GPG Key ID: 1C6EF37CDAE1426E
2 changed files with 85 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/src/components/Header.tsx
View File

@ -34,6 +34,7 @@ import { useToast } from '@/components/ui/use-toast';
import { useEthereumWallet } from '@opchan/react';
import { WalletWizard } from '@/components/ui/wallet-wizard';
import { CallSignSetupDialog } from '@/components/ui/call-sign-setup-dialog';
import RemixBanner from '@/components/RemixBanner';
const Header = () => {
@ -259,6 +260,9 @@ const Header = () => {
</div>
</header>
{/* Remix Banner */}
<RemixBanner />
{/* Wallet Wizard */}
<WalletWizard
open={walletWizardOpen}

81
app/src/components/RemixBanner.tsx Normal file
View File

@ -0,0 +1,81 @@
import React, { useState } from 'react';
import { X, Users, Code } from 'lucide-react';
import { useUIState } from '@/hooks';
const RemixBanner = () => {
const [isDismissed, setIsDismissed] = useUIState('remixBannerDismissed', false);
const [activeTab, setActiveTab] = useState<'users' | 'devs'>('users');
if (isDismissed) return null;
return (
<div className="bg-gradient-to-r from-primary/10 to-primary/5 border-b border-primary/30">
<div className="max-w-6xl mx-auto px-2 py-2">
<div className="flex items-center justify-between gap-4">
{/* Tab Toggle */}
<div className="flex items-center gap-2 text-[10px]">
<button
onClick={() => setActiveTab('users')}
className={`flex items-center gap-1 px-2 py-1 border transition-colors ${
activeTab === 'users'
? 'border-primary text-primary bg-primary/10'
: 'border-border text-muted-foreground hover:text-foreground hover:border-primary/50'
}`}
>
<Users className="w-3 h-3" />
<span className="hidden sm:inline">USERS</span>
</button>
<button
onClick={() => setActiveTab('devs')}
className={`flex items-center gap-1 px-2 py-1 border transition-colors ${
activeTab === 'devs'
? 'border-primary text-primary bg-primary/10'
: 'border-border text-muted-foreground hover:text-foreground hover:border-primary/50'
}`}
>
<Code className="w-3 h-3" />
<span className="hidden sm:inline">DEVS</span>
</button>
</div>
{/* Message Content */}
<div className="flex-1 text-[10px] text-foreground">
{activeTab === 'users' ? (
<p>
<span className="text-primary font-semibold">REMIX THIS:</span>{' '}
<span className="text-muted-foreground">Use it • Create cells • Post comments • Shape the conversation</span>
</p>
) : (
<p>
<span className="text-primary font-semibold">BUILD YOUR OWN:</span>{' '}
<span className="text-muted-foreground">
Write your own UI with the forum library •{' '}
<a
href="https://opchan.app/docs"
target="_blank"
rel="noopener noreferrer"
className="text-primary hover:underline"
>
Docs (WIP)
</a>
</span>
</p>
)}
</div>
{/* Dismiss Button */}
<button
onClick={() => setIsDismissed(true)}
className="text-muted-foreground hover:text-foreground transition-colors p-1"
aria-label="Dismiss banner"
>
<X className="w-3 h-3" />
</button>
</div>
</div>
</div>
);
};
export default RemixBanner;