{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/sXdzmAVys9165BsbYeb7/h40G1mBq9jMIFaQyU2Wp/ReboundShots.js"],
  "sourcesContent": ["// Welcome to Code in Framer\n// Get Started: https://www.framer.com/developers\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useEffect,useState,useMemo,Fragment}from\"react\";const styleString=`\n    :root {\n        --rebound-skeleton-color: #F9F9FA;\n    }\n    \n    .rebounds-container {\n        font-family: \"Mona-Sans Medium\", sans-serif;\n        text-align: center;\n    }\n    \n    .rebounds-grid {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n        display: grid;\n        grid-template-columns: repeat(var(--rebound-columns, 1), 1fr);\n        gap: 24px;\n    }\n    \n    @media (min-width: 500px) {\n        .rebounds-grid {\n            --rebound-columns: 2;\n        }\n    }\n    \n    @media (min-width: 850px) {\n        .rebounds-grid {\n            --rebound-columns: 3;\n            gap: 32px;\n        }\n    }\n    \n    @media (min-width: 1200px) {\n        .rebounds-grid {\n            --rebound-columns: 4;\n        }\n    }\n    \n    .rebounds-sort-options {\n        display: flex;\n        justify-content: center;\n        gap: 2px;\n        margin-bottom: 24px;\n    }\n    \n    @media (min-width: 500px) {\n        .rebounds-sort-options {\n            justify-content: flex-end;\n            gap: 8px;\n            margin-bottom: 32px;\n        }\n    }\n    \n    \n    .rebounds-sort-btn {\n        padding: 1px 9px 0 9px;\n        background: none;\n        border: none;\n        border-radius: 999999999px;\n        font-family: \"Mona-Sans Medium\", sans-serif;\n        font-weight: 400;\n        font-size: 11px;\n        line-height: 1;\n        height: 32px;\n        cursor: pointer;\n        transition: background-color 0.1s ease-in-out;\n        white-space: nowrap;\n    }\n    \n    .rebounds-sort-btn.active {\n        background-color: #F8F7F4;\n    }\n    \n    @media (min-width: 500px) {\n        .rebounds-sort-btn {\n            padding: 2px 16px 0 16px;\n            font-size: 14px;\n            height: 36px;\n        }\n    }\n    \n    .rebound {\n        display: flex;\n        flex-direction: column;\n        gap: 12px;\n    }\n    \n    .fetched .rebound.skeleton {\n        display: none;\n    }\n    \n    .fetched .rebound.skeleton:nth-child(1) {\n        display: flex;\n    }\n    \n     @media (min-width: 500px) {\n        .fetched .rebound.skeleton:nth-child(2) {\n            display: flex;\n        }\n    }\n    \n    @media (min-width: 850px) {\n        .fetched .rebound.skeleton:nth-child(3) {\n            display: flex;\n        }\n    }\n    \n    @media (min-width: 1200px) {\n        .fetched .rebound.skeleton:nth-child(4) {\n            display: flex;\n        }\n    }\n    \n    .rebound-image {\n        width: 100%;\n        border-radius: 8px;\n        display: flex;\n        aspect-ratio: 4 / 3;\n        object-fit: cover;\n        object-position: center;\n        background-color: var(--rebound-skeleton-color);\n    }\n    \n    .rebound-user-details {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n    }\n    \n    .rebound-user-avatar {\n        width: 24px;\n        height: 24px;\n        border-radius: 50%;\n        object-fit: cover;\n        background-color: var(--rebound-skeleton-color);\n    }\n    \n    .rebound-user-name {\n        font-size: 14px;\n        line-height: 1;\n        margin-top: 1px;\n    }\n    \n    .rebound.skeleton .rebound-user-name {\n        width: 82px;\n        height: 14px;\n        background-color: var(--rebound-skeleton-color);\n        border-radius: 4px;\n        display: inline-flex;\n        margin-top: 0;\n    }\n    \n    .rebound-link {\n        text-decoration: none;\n        color: inherit;\n    }\n    \n    .rebound-empty-container {\n        display: flex;\n        align-items: center;\n        gap: 24px;\n        font-size: 16px;\n        justify-content: center;\n        margin-top: 40px;\n        font-family: \"Mona-Sans Regular\", \"Mona-Sans Regular Placeholder\", sans-serif;\n        white-space: nowrap;\n    }\n    \n    @media (min-width: 500px) {\n        .rebound-empty-container {\n            font-size: 18px;\n        }\n    }\n    \n    .rebound-submit-btn {\n        display: inline-flex;\n        align-items: center;\n        font-size: 15px;\n        color: white;\n        padding: 16px 24px;\n        background: #060318;\n        border-radius: 999999px;\n        font-family: \"Mona-Sans Medium\", sans-serif;\n        text-decoration: none;\n        white-space: nowrap;\n    }\n    \n    .rebound-see-all-btn {\n        display: inline-flex;\n        align-items: center;\n        font-size: 15px;\n        color: #060318;\n        padding: 16px 24px;\n        background: white;\n        border-radius: 999999px;\n        font-family: \"Mona-Sans Medium\", sans-serif;\n        text-decoration: none;\n        white-space: nowrap;\n        border: 1px solid #060318;\n        margin: 40px auto 0;\n    }\n`;const invisiblePixel=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\";const placeholderRebound={isSkeleton:true};const sortModes={liked:{label:\"Most Liked\",value:\"popular\"},comments:{label:\"Most Comments\",value:\"comments\"},recent:{label:\"Most Recent\",value:\"\"}};/**\n * These annotations control how your component sizes\n * Learn more: https://www.framer.com/developers/#code-components-auto-sizing\n *\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight auto\n */const fetchRebounds=async(screenshot_id,sortValue)=>{const response=await fetch(`/client_app/rebounds?screenshot_id=${screenshot_id}&s=${sortValue}`);if(response.ok){var _this;return((_this=await response.json())===null||_this===void 0?void 0:_this.data)||[];}else{return[];}};export default function ReboundShots({screenshot_id,rebound_url,view_all_rebounds_url}){const[hasFetched,setHasFetched]=useState(false);const[activeSortMode,setActiveSortMode]=useState(Object.keys(sortModes)[0]);const[rebounds,setRebounds]=useState(Array(12).fill(placeholderRebound));useEffect(()=>{// fetch rebounds on intial load & when sort mode changes\nconst fetchAndSetRebounds=async()=>{const rebounds=await fetchRebounds(screenshot_id,sortModes[activeSortMode].value);setRebounds(rebounds);setHasFetched(true);};fetchAndSetRebounds();},[activeSortMode,screenshot_id]);const reboundsWithPlaceholders=useMemo(()=>Array(12).fill({}).map((_,index)=>rebounds[index]||placeholderRebound),[rebounds]);const ConditionalWrapper=({condition,wrapper,children})=>condition?wrapper(children):children;return /*#__PURE__*/_jsxs(Fragment,{children:[/*#__PURE__*/_jsx(\"style\",{children:styleString}),/*#__PURE__*/_jsxs(\"div\",{className:`rebounds-container ${hasFetched&&\"fetched\"}`,children:[hasFetched&&!!rebounds.length&&/*#__PURE__*/_jsx(\"div\",{className:\"rebounds-sort-options\",children:Object.keys(sortModes).map(sortMode=>/*#__PURE__*/_jsx(\"button\",{className:`rebounds-sort-btn ${activeSortMode===sortMode?\"active\":\"\"}`,onClick:()=>setActiveSortMode(sortMode),children:sortModes[sortMode].label},sortMode))}),/*#__PURE__*/_jsx(\"ul\",{className:\"rebounds-grid\",children:reboundsWithPlaceholders.map((rebound,index)=>/*#__PURE__*/_jsxs(\"li\",{className:`rebound ${rebound.isSkeleton&&\"skeleton\"}`,children:[/*#__PURE__*/_jsx(ConditionalWrapper,{condition:!rebound.isSkeleton,wrapper:children=>/*#__PURE__*/_jsx(\"a\",{href:rebound.reboundUrl,className:\"rebound-link\",children:children}),children:/*#__PURE__*/_jsx(\"img\",{className:\"rebound-image\",src:rebound.isSkeleton?invisiblePixel:rebound.thumbnailImageUrl})}),/*#__PURE__*/_jsxs(\"div\",{className:\"rebound-user-details\",children:[/*#__PURE__*/_jsx(ConditionalWrapper,{condition:!rebound.isSkeleton,wrapper:children=>/*#__PURE__*/_jsx(\"a\",{href:rebound.userProfileUrl,className:\"rebound-link\",children:children}),children:/*#__PURE__*/_jsx(\"img\",{className:\"rebound-user-avatar\",src:rebound.isSkeleton?invisiblePixel:rebound.avatarImageUrl})}),/*#__PURE__*/_jsx(ConditionalWrapper,{condition:!rebound.isSkeleton,wrapper:children=>/*#__PURE__*/_jsx(\"a\",{href:rebound.userProfileUrl,className:\"rebound-link\",children:children}),children:/*#__PURE__*/_jsx(\"div\",{className:\"rebound-user-name\",children:rebound.isSkeleton?\"\":rebound.userDisplayName})})]})]},rebound.reboundUrl))}),hasFetched&&!rebounds.length&&/*#__PURE__*/_jsxs(\"div\",{className:\"rebound-empty-container\",children:[\"No entries yet\",/*#__PURE__*/_jsx(\"a\",{href:rebound_url,className:\"rebound-submit-btn\",\"data-show-if-player\":true,children:\"Submit yours!\"})]}),hasFetched&&!!rebounds.length&&/*#__PURE__*/_jsx(\"a\",{href:view_all_rebounds_url,className:\"rebound-see-all-btn\",children:\"See all entries\"})]})]});}addPropertyControls(ReboundShots,{screenshot_id:{title:\"Screenshot Id\",type:ControlType.String,defaultValue:\"\"},rebound_url:{title:\"Rebound URL\",type:ControlType.Link,defaultValue:\"\"},view_all_rebounds_url:{title:\"View all rebounds URL\",type:ControlType.Link,defaultValue:\"\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ReboundShots\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ReboundShots.map"],
  "mappings": "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",
  "names": ["styleString", "invisiblePixel", "placeholderRebound", "sortModes", "fetchRebounds", "screenshot_id", "sortValue", "response", "_this", "ReboundShots", "rebound_url", "view_all_rebounds_url", "hasFetched", "setHasFetched", "ye", "activeSortMode", "setActiveSortMode", "rebounds", "setRebounds", "ue", "reboundsWithPlaceholders", "se", "_", "index", "ConditionalWrapper", "condition", "wrapper", "children", "u", "x", "p", "sortMode", "rebound", "addPropertyControls", "ControlType"]
}