CatBut — DeviceDeviceFrame · phone · desktop · free · chrome

DeviceFrame.tsx

Phone — styles iOS · Android · Generic

type="phone" phoneStyle="ios" | "android" | "generic"

CatButStream dashboard

phoneStyle="ios"

CatButStream dashboard

phoneStyle="android"

CatButStream dashboard

phoneStyle="generic"

DeviceFrame.tsx

Phone — showHeader / showFooter

showHeader=false | showFooter=false — masquer notch ou home indicator

CatButStream dashboard

showHeader=false showFooter=false

CatButStream dashboard

showFooter=false

CatButStream dashboard

showHeader=false

DeviceFrame.tsx

Phone — dimensions personnalisées

width / height — tailles sur mesure

CatButStream dashboard

200 × 420

CatButStream dashboard

240 × 500 (défaut)

CatButStream dashboard

320 × 640

DeviceFrame.tsx

Desktop — styles macOS · Windows · Generic

type="desktop" desktopStyle="macos" | "windows" | "generic"

catbut.gg

Dashboard

catbut.gg

desktopStyle="macos"

CatBut
−
□
×

Dashboard

catbut.gg

desktopStyle="windows"

CatBut

Dashboard

catbut.gg

desktopStyle="generic"

DeviceFrame.tsx

Desktop — header personnalisé

header prop — remplace la barre OS par défaut par du contenu custom

Mon header custom

Dashboard

catbut.gg

DeviceFrame.tsx

Type "free" — conteneur libre

type="free" — pas de chrome OS, juste une boîte avec overflow hidden

type="free" width=280 height=160

contenu libre

type="free" avec header + footer

header
children
footer

DesktopBarMacOS.tsx · DesktopBarWindows.tsx · DesktopBarGeneric.tsx

Barres desktop — composants isolés

Props url / title / children — aperçu de chaque barre séparément

DesktopBarMacOS — url par défaut

catbut.gg

DesktopBarMacOS — url="catbut.gg/stream"

catbut.gg/stream

DesktopBarMacOS — children custom

FichierÉditionAffichage

DesktopBarWindows — title par défaut

CatBut
−
□
×

DesktopBarWindows — title="Mon Application"

Mon Application
−
□
×

DesktopBarGeneric — title par défaut

CatBut

DesktopBarGeneric — title="Dashboard"

Dashboard

PhoneNotchIOS.tsx · PhoneCameraAndroid.tsx · PhoneGenericTop.tsx · PhoneHomeIndicatorIOS.tsx

Chrome téléphone — composants isolés

Chaque élément affiché dans un cadre téléphone minimaliste

PhoneNotchIOS

PhoneCameraAndroid

PhoneGenericTop

PhoneHomeIndicatorIOS

DeviceFrame.tsx

Cas réels — composition

Exemples d'usage concrets combinant type phone + desktop

CatBut
Stream actif
Chat replay
Clips récents

iOS — header custom, liste

catbut.gg
Dashboard
Stream
Clips
Chat
Stats

Dashboard

catbut.gg · 1.2k viewers en direct

1.2k

viewers

87

subs

5.2k

bits

macOS — barre latérale + stats

CatBut · Device · DeviceFrame · DesktopBarMacOS · DesktopBarWindows · DesktopBarGeneric · PhoneNotchIOS · PhoneCameraAndroid · PhoneGenericTop · PhoneHomeIndicatorIOS