further adjustments to audio fallback comp and text based fallback comps

1ifeworld · Jun 2, 2024 · 00bd22a · 00bd22a
1 parent 765c8e6
commit 00bd22a
Showing 1 changed file with 6 additions and 6 deletions.
diff --git a/apps/site/components/server/ItemFallback.tsx b/apps/site/components/server/ItemFallback.tsx
@@ -25,7 +25,7 @@ export function ItemFallback({
       {match(contentType)
         .with(
           P.when((type: string) => isAudio({ mimeType: type })),
-          () => <AudioFallback />,
+          () => <AudioFallback size={size} />,
         )
         .with(
           P.when((type: string) => isVideo({ mimeType: type })),
@@ -50,9 +50,9 @@ export function ItemFallback({
   )
 }
 
-export function AudioFallback() {
+export function AudioFallback({ size }: { size?: 'xs' | 'sm' | 'md' | 'lg' }) {
   return (
-    <div className="w-1/4 aspect-square md:mr-3">
+    <div className={cn('w-1/4 aspect-square', size === 'lg' && 'mr-3')}>
       <svg viewBox="0 0 66 80" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
           d="M0.0469468 71.5663C-0.349763 67.1658 1.8652 64.3989 3.02227 63.5654C4.17934 62.732 7.9342 61.0652 12.94 61.5652C17.5 62.0207 19.3866 60 19.3866 57.5648V12.0599C19.3866 9.6596 21.0395 8.72617 21.866 8.55948L47.6522 3.05889C51.454 2.39215 59.5065 0.558618 62.5288 0.0585639C64.9613 -0.441476 66 2.39215 66 3.55894V61.0652C66 64.0655 64.4132 70.3662 56.0822 71.5663C47.7513 72.7664 43.1422 68.566 41.7015 65.5657C40.3882 62.8306 40.5114 57.5648 43.6851 55.5646C47.6522 53.0643 52.1151 53.5644 56.0822 53.0643C59.2992 52.6588 60.5452 51.5641 60.5452 50.064V19.5607C60.5452 18.3605 59.5065 17.8541 58.5617 18.0605C48.6439 20.2274 28.4117 24.6612 26.8249 25.0613C25.238 25.4613 24.8413 27.2282 24.8413 28.0616V69.5661C24.8413 70.3995 24.7944 72.5665 22.8578 75.5667C19.3396 80.0673 10.4136 80.5673 6.49348 79.5672C3.47121 78.5671 0.443657 75.9668 0.0469468 71.5663Z"
@@ -79,7 +79,7 @@ export function VideoFallback() {
 
 export function TextFallback() {
   return (
-    <div className="w-1/3 md:w-1/4 aspect-square md:mr-1 mt-[6px] md:mt-3">
+    <div className="w-1/3 md:w-1/4 aspect-square md:mr-1 mt-[6px] md:mt-4">
       <svg viewBox="0 0 83 54" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
           d="M34.7162 52.6443L30.0473 36.9038H11.8984L7.22941 52.6443H0L16.6427 0H25.4536L42.021 52.6443H34.7162ZM13.6305 31.0293H28.3152L20.9352 6.32636L13.6305 31.0293Z"
@@ -96,7 +96,7 @@ export function TextFallback() {
 
 export function ThreeDFallback() {
   return (
-    <div className="w-1/3 md:w-1/4 aspect-square md:mr-1 mt-[6px] md:mt-3">
+    <div className="w-1/3 md:w-1/4 aspect-square md:mr-1 mt-[6px] md:mt-4">
       <svg viewBox="0 0 77 54" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
           d="M14.0071 23.0152C14.2554 23.0648 14.4789 23.0897 14.6775 23.0897C14.9258 23.0897 15.174 23.0897 15.4223 23.0897H16.763C18.1037 23.0897 19.3699 22.9159 20.5616 22.5683C21.803 22.171 22.8706 21.6248 23.7644 20.9297C24.7078 20.1848 25.4527 19.2662 25.9989 18.1738C26.5451 17.0814 26.8182 15.84 26.8182 14.4497C26.8182 11.6193 25.9244 9.50897 24.1368 8.11862C22.3492 6.67862 20.1147 5.95862 17.4333 5.95862C15.7451 5.95862 14.2554 6.28138 12.9644 6.9269C11.723 7.52276 10.6802 8.34207 9.8361 9.38483C9.04162 10.4276 8.44576 11.6441 8.04852 13.0345C7.65128 14.4248 7.45266 15.8897 7.45266 17.429H1.12162C1.22093 14.8966 1.61817 12.5876 2.31335 10.5021C3.05817 8.41655 4.10093 6.62897 5.44162 5.13931C6.78231 3.64966 8.44576 2.48276 10.432 1.63862C12.4678 0.794483 14.8016 0.372413 17.4333 0.372413C19.7175 0.372413 21.8278 0.670345 23.7644 1.26621C25.7506 1.81241 27.4637 2.65655 28.9037 3.79862C30.3437 4.94069 31.4609 6.40552 32.2554 8.1931C33.0996 9.98069 33.5216 12.091 33.5216 14.5241C33.5216 16.9076 32.8264 19.0179 31.4361 20.8552C30.0458 22.6924 28.3078 24.0828 26.2223 25.0262V25.1752C29.4499 25.8703 31.8333 27.3848 33.3727 29.7186C34.9616 32.0524 35.7561 34.8083 35.7561 37.9862C35.7561 40.6179 35.2596 42.9517 34.2664 44.9876C33.323 46.9738 32.032 48.6372 30.3933 49.9779C28.7547 51.3186 26.8182 52.3366 24.5837 53.0317C22.3989 53.6772 20.0651 54 17.5823 54C14.9009 54 12.4678 53.6276 10.283 52.8828C8.09817 52.1379 6.2361 51.0455 4.69679 49.6055C3.15748 48.1159 1.96576 46.3034 1.12162 44.1683C0.32714 42.0331 -0.0452738 39.6 0.00438134 36.869H6.33542C6.43473 40.2952 7.42783 43.1007 9.31473 45.2855C11.2016 47.4207 13.9575 48.4883 17.5823 48.4883C19.1216 48.4883 20.5864 48.2648 21.9768 47.8179C23.3671 47.3214 24.5837 46.651 25.6264 45.8069C26.6692 44.9131 27.4885 43.8455 28.0844 42.6041C28.7299 41.3131 29.0527 39.8731 29.0527 38.2841C29.0527 36.6455 28.7547 35.2055 28.1589 33.9641C27.563 32.6731 26.7685 31.6055 25.7754 30.7614C24.7823 29.8676 23.5906 29.2221 22.2002 28.8248C20.8596 28.3779 19.3947 28.1545 17.8058 28.1545C16.4651 28.1545 15.1989 28.229 14.0071 28.3779V23.0152Z"
@@ -129,7 +129,7 @@ export function FileFallback() {
 
 export function Unsupported() {
   return (
-    <div className="w-1/6 aspect-square md:mr-1 mt-[6px] md:mt-3">
+    <div className="w-1/6 aspect-square md:mr-1 mt-[6px] md:mt-4">
       <svg viewBox="0 0 33 54" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
           d="M12.0457 45.8003H20.2454V54H12.0457V45.8003ZM0.00461698 17.7291C-0.0446307 15.2175 0.300103 12.8782 1.03882 10.7114C1.82678 8.54446 2.93485 6.67305 4.36303 5.09712C5.79121 3.47195 7.5395 2.21614 9.6079 1.32968C11.6763 0.443227 13.9909 0 16.5518 0C18.8664 0 20.9595 0.344733 22.8309 1.0342C24.7515 1.67442 26.4013 2.63474 27.7803 3.91518C29.1592 5.14637 30.218 6.67305 30.9567 8.49521C31.7447 10.3174 32.1387 12.4104 32.1387 14.7743C32.1387 16.301 31.9417 17.6799 31.5477 18.9111C31.203 20.093 30.7351 21.1765 30.1442 22.1614C29.5532 23.1464 28.8637 24.0575 28.0758 24.8947C27.337 25.7319 26.5737 26.5445 25.7857 27.3324C24.9978 28.0711 24.2098 28.8345 23.4219 29.6224C22.6831 30.3611 21.9937 31.1737 21.3535 32.0602C20.7625 32.8974 20.27 33.8331 19.876 34.8673C19.5313 35.8523 19.3589 36.985 19.3589 38.2654V41.1464H13.0799V37.6744C13.1784 35.606 13.5477 33.8577 14.1879 32.4295C14.8774 30.9521 15.69 29.6471 16.6257 28.5144C17.6106 27.3817 18.6202 26.3475 19.6544 25.4118C20.7379 24.4268 21.7228 23.4172 22.6093 22.383C23.545 21.2996 24.2837 20.1176 24.8254 18.8372C25.3671 17.5568 25.5887 16.0055 25.4903 14.1833C25.2933 11.4747 24.4068 9.35704 22.8309 7.83037C21.3042 6.30369 19.2112 5.54035 16.5518 5.54035C14.7789 5.54035 13.2522 5.86046 11.9718 6.50068C10.6913 7.1409 9.6079 8.00273 8.72144 9.08618C7.88423 10.1696 7.26864 11.4501 6.87466 12.9275C6.48068 14.4049 6.28369 16.0055 6.28369 17.7291H0.00461698Z"