제품

코드 내보내기

디자인을 작동하는 코드로 내보내어 첫날부터 엔지니어 인수인계가 가능합니다.

Generated Files

src

components

App.tsx

index.css

index.tsx

index.html

package.json

postcss.config.js

README.md

tailwind.config.js

tsconfig.json

tsconfig.node.json

vite.config.ts

App.tsx

import Header from './components/Header';
...
import MetricList from './components/MetricList';

export default function App() {
  return (
    <div className="p-6 bg-gray-100 min-h-screen">
      <Header
        title="Linea"
        tabs={['Report', 'Dashboard', 'Settings']}
        active="Dashboard"
      />
      <StudioInfo
        name="Visly Studio"
        url="visly.dashboardhub.io"
        logo="visly"
      />

      <div className="grid md:grid-cols-3 gap-4 my-6">
        <StatCard title="All revenue" value="$12,903.45" change="5.7%" />
        <StatCard title="Viewers" value="37,553" change="2.4%" />
        <StatCard title="Active Users" value="322" change="8.5%" />
      </div>

      <div className="bg-white p-6 rounded-xl shadow">
        <div className="flex gap-3 mb-4">
          <Badge text="Conversion Rate: 3.8%" color="green" />
          <Badge text="Churn Rate: 1.2%" />
          <Badge text="ARPU: $15.45" />
        </div>
        <div className="grid md:grid-cols-2 gap-6">
          <RevenueChart title="All revenue" amount="$12,903.45" change="5.7%" />
          <MetricList
            items={[
              { label: 'Day Range', value: '$12,903.45' },
              { label: 'Active Users (MAU)', value: '322' },
              { label: 'Avg. Session Duration', value: '4m 32s' },
              { label: 'Bounce Rate', value: '48.2%' },
              { label: 'Conversion Rate', value: '3.9%' },
            ]}
          />
        </div>
      </div>
    </div>
  );
}