Skip to content

Commit

Permalink
add size prop to text based fallback comps for additional styling
Browse files Browse the repository at this point in the history
  • Loading branch information
Salief authored and Salief committed Jun 2, 2024
1 parent 308dfd7 commit b1f3190
Showing 1 changed file with 38 additions and 23 deletions.
61 changes: 38 additions & 23 deletions apps/site/components/server/ItemFallback.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,18 +33,18 @@ export function ItemFallback({
)
.with(
P.when((type: string) => isMarkdown({ mimeType: type })),
() => <TextFallback />,
() => <TextFallback size={size} />,
)
.with(
P.when((type: string) => isGlb({ mimeType: type })),
() => <ThreeDFallback />,
() => <ThreeDFallback size={size} />,
)
.with(
P.when((type: string) => isPdf({ mimeType: type })),
() => <FileFallback />,
)
.otherwise(() => (
<Unsupported />
<Unsupported size={size} />
))}
</Flex>
)
Expand Down Expand Up @@ -78,24 +78,29 @@ export function VideoFallback() {
}

export function FileFallback() {
return (
<div className="w-1/4 aspect-square">
<svg viewBox="0 0 66 83" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0 0V83H65.5263V34.7047H30.8216V0H0Z"
fill="#D3D3D3"
/>
<path d="M65.5263 34.7047L30.8216 0V34.7047H65.5263Z" fill="#B6B6B6" />
</svg>
</div>
)
}
return (
<div className="w-1/4 aspect-square">
<svg viewBox="0 0 66 83" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0 0V83H65.5263V34.7047H30.8216V0H0Z"
fill="#D3D3D3"
/>
<path d="M65.5263 34.7047L30.8216 0V34.7047H65.5263Z" fill="#B6B6B6" />
</svg>
</div>
)
}

export function TextFallback() {
export function TextFallback({ size }: { size?: 'xs' | 'sm' | 'md' | 'lg' }) {
return (
<div className="w-1/3 md:w-1/4 aspect-square md:mr-1 mt-1 md:mt-4">
<div
className={cn(
'w-1/3 md:1/4 aspect-square md:mr-1 mt-1',
size === 'lg' && '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"
Expand All @@ -110,9 +115,14 @@ export function TextFallback() {
)
}

export function ThreeDFallback() {
export function ThreeDFallback({ size }: { size?: 'xs' | 'sm' | 'md' | 'lg' }) {
return (
<div className="w-1/3 md:w-1/4 aspect-square md:mr-1 mt-1 md:mt-4">
<div
className={cn(
'w-1/3 md:1/4 aspect-square md:mr-1 mt-1',
size === 'lg' && '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"
Expand All @@ -127,9 +137,14 @@ export function ThreeDFallback() {
)
}

export function Unsupported() {
export function Unsupported({ size }: { size?: 'xs' | 'sm' | 'md' | 'lg' }) {
return (
<div className="w-1/6 aspect-square md:mr-1 mt-1 md:mt-4">
<div
className={cn(
'w-1/6 aspect-square md:mr-1 mt-1',
size === 'lg' && '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"
Expand Down

0 comments on commit b1f3190

Please sign in to comment.