39 |
57 | )
58 | }
59 |
--------------------------------------------------------------------------------
/app/components/GridBackground.tsx:
--------------------------------------------------------------------------------
1 | export function GridBackground(props: { className?: string }) {
2 | return (
3 |
46 |
56 | 47 | Folder Studio / {filename}.png 48 |
49 | 50 |
51 |
53 |
54 |
4 |
2496 |
2497 | )
2498 | }
2499 |
--------------------------------------------------------------------------------
/app/components/HowToUse.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 | import { QuestionMarkIcon } from '@/icons'
3 | import { useState } from 'react'
4 |
5 | export function HowToUse() {
6 | const [open, setOpen] = useState(false)
7 |
8 | return (
9 | <>
10 |
16 |
17 | {
24 | if (e.target === e.currentTarget) {
25 | setOpen(false)
26 | }
27 | }}
28 | >
29 |
48 |
49 | )
50 | }
51 |
--------------------------------------------------------------------------------
/app/components/MobileUnderConstruction.tsx:
--------------------------------------------------------------------------------
1 | import Image from 'next/image'
2 | import fallbackFolder from '../../public/fallback-folder.png'
3 |
4 | export function MobileUnderConstruction() {
5 | return (
6 | {
31 | e.stopPropagation()
32 | }}
33 | className={
34 | 'px-6 py-4 bg-white border border-zinc-300 rounded-2xl pointer-events-auto w-full max-w-lg max-h-[80vh] overflow-y-auto min-h-96 transition-transform duration-200 ' +
35 | (open ? 'scale-100' : 'scale-50')
36 | }
37 | >
38 |
47 |
39 |
46 | -
40 |
- 41 | Built by @sameerasw forking from @christianvm. 42 | 43 |
44 |
7 |
27 | )
28 | }
29 |
--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sameerasw/folder-studio/285823e2cc5c09024454a92a9a246cda501e554b/app/favicon.ico
--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | .loader {
6 | width: 60px;
7 | aspect-ratio: 4;
8 | background: radial-gradient(circle closest-side, #000 90%, #0000) 0 /
9 | calc(100% / 3) 100% space;
10 | clip-path: inset(0 100% 0 0);
11 | animation: l1 1s steps(4) infinite;
12 | }
13 | @keyframes l1 {
14 | to {
15 | clip-path: inset(0 -34% 0 0);
16 | }
17 | }
18 |
19 | main{
20 | transition: background-color 1s, color 1s;
21 | }
22 |
23 | .dark{
24 | background-color: #363636;
25 | color: #fff;
26 | }
27 |
28 | .editor{
29 | background-color: #fff;
30 | color: #000;
31 | }
32 |
33 | select{
34 | background-color: #fff;
35 | color: #000;
36 | }
37 |
38 | .editor{
39 | box-shadow: 0 0 20px 0 #00000066;
40 | left: 0;
41 | animation: slideInFromLeft 1s cubic-bezier(0.175, 0.485, 0.32, 1.275)
42 | }
43 |
44 | /* create custom animation to make the .editor slide in from left side */
45 | @keyframes slideInFromLeft {
46 | 0% {
47 | transform: translateX(-100%);
48 | opacity: 0;
49 | }
50 | 100% {
51 | transform: translateX(0);
52 | opacity: 1;
53 | }
54 | }
55 |
56 | @keyframes scaleIn {
57 | 0% {
58 | scale: 0;
59 | opacity: 0;
60 | }
61 | 100% {
62 | scale: 1;
63 | opacity: 1;
64 | }
65 | }
66 |
67 | .icon-preview{
68 | /* shadow of the png */
69 | filter: drop-shadow(0 0 20px #00000033);
70 | animation: scaleIn 1s cubic-bezier(0.175, 0.485, 0.32, 1.275);
71 | transition: color 1s;
72 | }
73 |
74 | Image{
75 | transition: all 1s ease-in-out;
76 | }
77 |
78 | ol a{
79 | color: #099;
80 | text-decoration: underline;
81 | }
--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import type { Metadata } from 'next'
2 | import { Analytics } from '@vercel/analytics/react'
3 | import { GeistSans } from 'geist/font/sans'
4 | import { GeistMono } from 'geist/font/mono'
5 | import './globals.css'
6 |
7 | export const metadata: Metadata = {
8 | title: 'Folder Icon Maker - Folder Studio by @sameerasw',
9 | description: 'Create custom icons for files or folders for Windows',
10 | metadataBase: new URL('https://folder-studio.netlify.app'),
11 | }
12 |
13 | export default function RootLayout({
14 | children,
15 | }: Readonly<{
16 | children: React.ReactNode
17 | }>) {
18 | return (
19 |
20 |
21 | {children}
22 |
10 |
26 | FolderArt mobile coming soon
11 | 12 |In the meantime, please use a Desktop Browser.
13 | 14 |15 | Stay tuned for updates at the{' '} 16 | 22 | official repository. 23 | 24 |
25 |