Porta/constants.tsx at main · HJhajun/Porta · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160

import React from 'react';
import { ProjectTemplate } from './types';

export const POPUP_TEMPLATE: ProjectTemplate = {
  name: 'Popup Extension',
  description: 'A basic extension with a popup that appears when you click the icon.',
  files: {
    'manifest.json': {
      type: 'file',
      name: 'manifest.json',
      content: JSON.stringify(
        {
          manifest_version: 3,
          name: 'Popup Extension',
          version: '1.0',
          description: 'A simple popup extension.',
          action: {
            default_popup: 'popup.html',
            default_icon: 'icon.png',
          },
          icons: {
            '16': 'icon.png',
            '48': 'icon.png',
            '128': 'icon.png',
          },
        },
        null,
        2
      ),
    },
    'popup.html': {
      type: 'file',
      name: 'popup.html',
      content: `<!DOCTYPE html>
<html>
<head>
  <title>Popup</title>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <h1>Hello, Extension!</h1>
  <p>This is a popup.</p>
  <script src="popup.js"></script>
</body>
</html>`,
    },
    'popup.js': {
      type: 'file',
      name: 'popup.js',
      content: `console.log("Popup script loaded!");

document.addEventListener('DOMContentLoaded', () => {
  console.log('DOM fully loaded and parsed');
});`,
    },
    'popup.css': {
      type: 'file',
      name: 'popup.css',
      content: `body {
  font-family: sans-serif;
  width: 200px;
  padding: 10px;
  background-color: #f0f0f0;
}`,
    },
    'icon.png': {
      type: 'file',
      name: 'icon.png',
      content: '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',
    },
    'background.js': {
      type: 'file',
      name: 'background.js',
      content: `console.log("Background script is running!");
// In a real extension, you would add listeners here
// e.g., chrome.action.onClicked.addListener(...)
`,
    },
  },
};

export const BACKGROUND_TEMPLATE: ProjectTemplate = {
  name: 'Background Service',
  description: 'An extension that runs a script in the background.',
  files: {
    ...POPUP_TEMPLATE.files,
    'manifest.json': {
      type: 'file',
      name: 'manifest.json',
      content: JSON.stringify(
        {
          manifest_version: 3,
          name: 'Background Service Extension',
          version: '1.0',
          description: 'Runs a background script.',
          background: {
            service_worker: 'background.js',
          },
          icons: {
            '16': 'icon.png',
            '48': 'icon.png',
            '128': 'icon.png',
          },
        },
        null,
        2
      ),
    },
  },
};

export const PROJECT_TEMPLATES: ProjectTemplate[] = [
  POPUP_TEMPLATE,
  BACKGROUND_TEMPLATE,
];

export const FileIcon = ({ className }: { className?: string }) => (
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
      <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
      <polyline points="14 2 14 8 20 8"></polyline>
    </svg>
);

export const FolderIcon = ({ className }: { className?: string }) => (
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
        <path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"></path>
    </svg>
);

export const ChevronDownIcon = ({ className }: { className?: string }) => (
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
        <polyline points="6 9 12 15 18 9"></polyline>
    </svg>
);

export const ChevronRightIcon = ({ className }: { className?: string }) => (
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
        <polyline points="9 18 15 12 9 6"></polyline>
    </svg>
);

export const CloseIcon = ({ className }: { className?: string }) => (
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
        <line x1="18" y1="6" x2="6" y2="18"></line>
        <line x1="6" y1="6" x2="18" y2="18"></line>
    </svg>
);

export const SmartphoneIcon = ({ className }: { className?: string }) => (
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/></svg>
);

export const TabletIcon = ({ className }: { className?: string }) => (
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><rect width="16" height="20" x="4" y="2" rx="2" ry="2"/><path d="M12 18h.01"/></svg>
);

export const LaptopIcon = ({ className }: { className?: string }) => (
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M20 16V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v9m16 0H4m16 0 1.28 2.55A1 1 0 0 1 20.7 20H3.3a1 1 0 0 1-.58-1.45L4 16"/></svg>
);