Skip to content

Commit 102097f

Browse files
JonnyBurgerJonnyBurger
committed
footer
1 parent 84f1c53 commit 102097f

File tree

2 files changed

+120
-39
lines changed

2 files changed

+120
-39
lines changed

‎packages/convert/app/components/FileAvailable.tsx

+44-39
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
import React, {useCallback, useState} from 'react';
77
import {Source} from '~/lib/convert-state';
88
import ConvertUI from './ConvertUi';
9+
import {Footer} from './Footer';
910
import {Probe} from './Probe';
1011
import {Button} from './ui/button';
1112

@@ -30,47 +31,51 @@ export const FileAvailable: React.FC<{
3031
}, []);
3132

3233
return (
33-
<div className="overflow-y-auto w-full lg:flex lg:justify-center pt-6 pb-10 px-4">
34-
<div>
35-
<div className="block">
36-
<Button variant="link" onClick={clear}>
37-
<svg
38-
xmlns="http://www.w3.org/2000/svg"
39-
viewBox="0 0 448 512"
40-
style={{height: 16}}
41-
>
42-
<path
43-
fill="currentcolor"
44-
d="M18.2 273l-17-17 17-17L171.8 85.4l17-17 33.9 33.9-17 17L93.1 232 424 232l24 0 0 48-24 0L93.1 280 205.8 392.6l17 17-33.9 33.9-17-17L18.2 273z"
45-
/>
46-
</svg>
47-
<div className="w-2" />
48-
Choose another file
49-
</Button>
50-
</div>
51-
<div className="lg:inline-flex lg:flex-row">
52-
<Probe
53-
src={src}
54-
probeDetails={probeDetails}
55-
setProbeDetails={setProbeDetails}
56-
setAudioCodec={setCurrentAudioCodec}
57-
setVideoCodec={setCurrentVideoCodec}
58-
onTracks={onTracks}
59-
onDuration={setDuration}
60-
/>
61-
<div className="h-8 lg:h-0 lg:w-8" />
62-
<div className="w-full lg:w-[350px]">
63-
<div className="gap-4">
64-
<ConvertUI
65-
currentAudioCodec={currentAudioCodec}
66-
currentVideoCodec={currentVideoCodec}
67-
src={src}
68-
tracks={tracks}
69-
setSrc={setSrc}
70-
duration={duration}
71-
/>
34+
<div>
35+
<div className="overflow-y-auto w-full lg:flex lg:justify-center pt-6 pb-10 px-4">
36+
<div>
37+
<div className="block">
38+
<Button variant="link" onClick={clear}>
39+
<svg
40+
xmlns="http://www.w3.org/2000/svg"
41+
viewBox="0 0 448 512"
42+
style={{height: 16}}
43+
>
44+
<path
45+
fill="currentcolor"
46+
d="M18.2 273l-17-17 17-17L171.8 85.4l17-17 33.9 33.9-17 17L93.1 232 424 232l24 0 0 48-24 0L93.1 280 205.8 392.6l17 17-33.9 33.9-17-17L18.2 273z"
47+
/>
48+
</svg>
49+
<div className="w-2" />
50+
Choose another file
51+
</Button>
52+
</div>
53+
<div className="lg:inline-flex lg:flex-row">
54+
<Probe
55+
src={src}
56+
probeDetails={probeDetails}
57+
setProbeDetails={setProbeDetails}
58+
setAudioCodec={setCurrentAudioCodec}
59+
setVideoCodec={setCurrentVideoCodec}
60+
onTracks={onTracks}
61+
onDuration={setDuration}
62+
/>
63+
<div className="h-8 lg:h-0 lg:w-8" />
64+
<div className="w-full lg:w-[350px]">
65+
<div className="gap-4">
66+
<ConvertUI
67+
currentAudioCodec={currentAudioCodec}
68+
currentVideoCodec={currentVideoCodec}
69+
src={src}
70+
tracks={tracks}
71+
setSrc={setSrc}
72+
duration={duration}
73+
/>
74+
</div>
7275
</div>
7376
</div>
77+
<div className="h-16" />
78+
<Footer />
7479
</div>
7580
</div>
7681
</div>

‎packages/convert/app/components/Footer.tsx

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import React from 'react';
2+
3+
const Logo: React.FC = () => {
4+
return (
5+
<svg
6+
width="733"
7+
height="753"
8+
viewBox="0 0 733 753"
9+
fill="none"
10+
style={{
11+
height: 36,
12+
width: 36,
13+
}}
14+
>
15+
<path
16+
d="M165.171 0.0649414C149.299 0.920593 136.509 3.42175 123.619 8.29248C117.191 10.6949 106.654 15.9277 100.855 19.5479C76.6004 34.6537 58.1109 57.3618 48.4686 83.7887C46.5467 89.0214 41.3445 105.707 37.9978 117.193C15.6978 193.972 3.04016 277.926 0.323069 366.784C-0.10769 380.935 -0.10769 414.636 0.323069 428.557C2.14551 487.466 7.81163 540.649 18.0836 594.885C22.2586 616.836 28.9519 646.324 32.8287 659.718C40.7481 686.935 56.9181 710.104 79.9139 727.086C95.3218 738.473 112.817 746.108 132.201 749.86C141.545 751.67 153.872 752.492 162.951 751.9C175.509 751.077 200.427 747.753 220.672 744.166C311.927 728.007 396.223 699.079 472.666 657.678C521.076 631.448 562.462 603.047 602.39 568.59C642.186 534.297 676.116 497.405 705.971 456.004C712.896 446.427 716.376 440.832 719.855 433.789C728.801 415.623 733.009 397.555 732.976 377.348C732.976 358.524 729.398 341.805 721.677 324.692C717.966 316.431 714.421 310.508 706.468 299.252C677.177 257.818 644.671 221.716 605.041 186.633C543.608 132.266 470.645 87.6721 389.165 54.6631C371.504 47.5215 354.108 41.2357 333.167 34.4233C288.832 20.0415 233.96 7.56854 187.537 1.34851C180.247 0.361206 170.34 -0.198364 165.171 0.0649414Z"
17+
fill="#0B84F3"
18+
className="opacity-0 group-hover:opacity-100 transition-opacity fill-muted-foreground group-hover:fill-brand transition-fill duration-200"
19+
fill-opacity="0.1"
20+
/>
21+
<path
22+
d="M208.166 80.1331C195.677 80.8064 185.612 82.7745 175.469 86.6074C170.411 88.4978 162.119 92.6155 157.556 95.4642C138.47 107.351 123.921 125.22 116.333 146.015C114.821 150.133 110.727 163.263 108.094 172.301C90.5456 232.719 80.5853 298.783 78.4472 368.705C78.1083 379.841 78.1083 406.36 78.4472 417.314C79.8813 463.67 84.34 505.52 92.423 548.198C95.7083 565.472 100.975 588.676 104.026 599.216C110.258 620.633 122.982 638.864 141.077 652.227C153.202 661.188 166.969 667.196 182.222 670.148C189.575 671.572 199.275 672.22 206.419 671.754C216.301 671.106 235.909 668.491 251.841 665.668C323.649 652.952 389.982 630.189 450.135 597.61C488.229 576.97 520.796 554.621 552.215 527.507C583.53 500.522 610.23 471.491 633.723 438.912C639.172 431.376 641.91 426.974 644.648 421.432C651.688 407.137 655 392.919 654.973 377.018C654.973 362.205 652.157 349.049 646.082 335.583C643.162 329.083 640.372 324.421 634.114 315.564C611.065 282.96 585.486 254.55 554.301 226.944C505.96 184.162 448.544 149.071 384.428 123.096C370.53 117.477 356.841 112.53 340.362 107.17C305.475 95.8527 262.296 86.0377 225.766 81.1431C220.03 80.3661 212.234 79.9258 208.166 80.1331Z"
23+
fill="#0B84F3"
24+
className="opacity-0 group-hover:opacity-100 transition-opacity fill-muted-foreground group-hover:fill-brand transition-fill duration-200"
25+
fill-opacity="0.3"
26+
/>
27+
<path
28+
d="M252.666 163.18C243.684 163.664 236.447 165.08 229.152 167.836C225.515 169.196 219.552 172.157 216.27 174.206C202.545 182.754 192.082 195.604 186.625 210.559C185.538 213.52 182.594 222.962 180.7 229.462C168.08 272.911 160.917 320.42 159.38 370.704C159.136 378.712 159.136 397.783 159.38 405.661C160.411 438.997 163.618 469.093 169.43 499.785C171.793 512.207 175.581 528.894 177.775 536.474C182.256 551.875 191.407 564.986 204.42 574.596C213.139 581.04 223.04 585.361 234.009 587.484C239.297 588.508 246.272 588.974 251.41 588.639C258.516 588.173 272.617 586.292 284.074 584.262C335.714 575.118 383.417 558.747 426.675 535.319C454.071 520.476 477.491 504.404 500.086 484.905C522.606 465.499 541.807 444.622 558.701 421.193C562.62 415.773 564.589 412.607 566.558 408.622C571.621 398.342 574.002 388.117 573.983 376.682C573.983 366.03 571.958 356.569 567.589 346.884C565.489 342.21 563.483 338.858 558.982 332.488C542.407 309.041 524.012 288.611 501.586 268.758C466.821 237.992 425.532 212.757 379.423 194.077C369.429 190.036 359.584 186.479 347.734 182.623C322.645 174.485 291.593 167.426 265.323 163.907C261.198 163.348 255.591 163.031 252.666 163.18Z"
29+
className="fill-muted-foreground group-hover:fill-brand transition-fill duration-200"
30+
/>
31+
</svg>
32+
);
33+
};
34+
35+
export const Footer: React.FC = () => {
36+
return (
37+
<div className="lg:flex flex-row items-center">
38+
<a
39+
className="hidden group lg:flex flex-row items-center"
40+
target="_blank"
41+
href="https://remotion.dev/?utm_source=convert"
42+
>
43+
<Logo />
44+
<div className="w-1" />
45+
<div className="opacity-0 transition-opacity duration-200 font-brand text-sm text-muted-foreground group-hover:opacity-100">
46+
Remotion
47+
</div>
48+
</a>
49+
<a
50+
className="lg:hidden font-medium"
51+
target="_blank"
52+
href="https://remotion.dev/?utm_source=convert"
53+
>
54+
<div className="text-sm text-muted-foreground hover:text-foreground">
55+
A Remotion Product
56+
</div>
57+
</a>
58+
<div className="flex-1" />
59+
<a
60+
target="_blank"
61+
href="https://remotion.dev/webcodecs"
62+
className="text-sm text-muted-foreground font-medium hover:text-foreground"
63+
>
64+
Powered by @remotion/webcodecs
65+
</a>
66+
<div className="w-6" />
67+
<a
68+
target="_blank"
69+
href="https://github.com/remotion-dev/remotion/tree/main/packages/webcodecs"
70+
className="text-sm text-muted-foreground font-medium hover:text-foreground"
71+
>
72+
Source code
73+
</a>
74+
</div>
75+
);
76+
};

0 commit comments

Comments
 (0)